making a Flyout within a MenuFlyout in XAML UWP C#

Question

Im trying to make a program with a settings button that opens a MenuFlyout which has a SubItem That opens a Flyout (notice that its a Flyout and not a MenuFlyout). For some reason the code completely ignores all of my Flyout's properties and all of it's items. This is my Current Code (just the Flyout part):

<Button x:Name="bar_settings" Content="Settings" Margin="10,5,0,0" VerticalAlignment="Top" Width="90" Height="30" HorizontalAlignment="Left" FontFamily="Roboto">
            <Button.Flyout>
                <MenuFlyout Placement="BottomEdgeAlignedLeft">
                    <MenuFlyoutSubItem Text="Change Money Symbol">
                        <FlyoutBase.AttachedFlyout>
                            <Flyout">
                                <Grid Width="100" Height="100"> // ignores
                                    <TextBlock Text="test123"/> // ignores
                                </Grid>
                            </Flyout>
                        </FlyoutBase.AttachedFlyout>
                    </MenuFlyoutSubItem>
                </MenuFlyout>
            </Button.Flyout>
        </Button>

Here is what happens when I try to run the program and test the Flyouts:

Answer 1

According to document FlyoutBase, FlyoutBase.AttachedFlyout and FlyoutBase.ShowAttachedFlyout need to be used together, but MenuFlyoutSubItem has no event available to use ShowAttachedFlyout.

You can try the following solution, add MenuFlyoutItem in MenuFlyoutSubItem, then add your Grid in MenuFlyoutItem.Template.

<Button x:Name="bar_settings" Content="Settings" Margin="10,5,0,0" VerticalAlignment="Top" Width="90" Height="30" HorizontalAlignment="Left" FontFamily="Roboto">
    <Button.Flyout>
        <MenuFlyout Placement="BottomEdgeAlignedLeft">
            <MenuFlyoutSubItem Text="Change Money Symbol">
                <MenuFlyoutItem>
                    <MenuFlyoutItem.Template>
                        <ControlTemplate>
                            <Grid Width="100" Height="100">
                                <TextBlock Text="test123"/>
                            </Grid>
                        </ControlTemplate>
                    </MenuFlyoutItem.Template>
                </MenuFlyoutItem>                     
            </MenuFlyoutSubItem>
        </MenuFlyout>
    </Button.Flyout>
</Button>