[UWP] Can't launch Flyout using click event attached to MenuFlyoutItem

Question

Hi,

I'm trying to launch a Flyout in which I collect data from user. The idea is that the user click on an item from the Menu Flyout and the assigned Flyout launch. I'm using a command bar.

<CommandBar
            Background="Transparent"
            DefaultLabelPosition="Right"
            IsOpen="False"
            IsSticky="False">
            <AppBarButton Icon="Add" Label="Add">
                <Button.Flyout>
                    <MenuFlyout x:Name="Flayout" Placement="Bottom">
                        <MenuFlyoutItem
                            Click="MenuFlyoutItem_Click"
                            Icon="Copy"
                            Text="New Project">
                            <MenuFlyoutItem.KeyboardAccelerators>
                                <KeyboardAccelerator Key="P" Modifiers="Control" />
                            </MenuFlyoutItem.KeyboardAccelerators>
                            <FlyoutBase.AttachedFlyout>
                                <Flyout Placement="Full">
                                    <StackPanel Background="Red">
                                        <TextBlock Margin="0,0,0,12" Text="Text and another controls" />
                                        <Button Content="Add" />
                                    </StackPanel>
                                </Flyout>
                            </FlyoutBase.AttachedFlyout>
                        </MenuFlyoutItem>
                    </MenuFlyout>
                </Button.Flyout>
            </AppBarButton>
            <AppBarButton Icon="Edit" Label="Edit" />
        </CommandBar>

Code Behind

      private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
        {
            FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
        }

Nothing Happens when I click the Menu Flyout item "New Project".
Not sure why.

This scenario can works if I create my own flyout and use buttons, But I want to use the Menu Flyout So I don't lose Accessibility, keyboarding and correct UI guideline.

Thanks

Answer 1

Hi @Fay Wang - MSFT

Thanks a lot for the answer. yes that works.

Your answer made me think of another workaround that allowed me to use the MenuFlyout and access the flyout using the click event for the MenuFlyoutItem. Also, since I like the fact that the MenuFlyout get hidden after the click.
This is what I did:

1. Created a button with my Flyout.

        <Button  
            x:Name="clickme"  
            Click="clickme_Click"  
            Content="click me">  
            <FlyoutBase.AttachedFlyout>  
                <Flyout Placement="Full">  
                    <StackPanel Background="Red">  
                        <TextBlock                             
                            Text="text" />  
                        <Button Content="Yes" />  
                    </StackPanel>  
                </Flyout>  
            </FlyoutBase.AttachedFlyout>  
        </Button>  
   

2. added the click event behind Code

        private void clickme_Click(object sender, RoutedEventArgs e)  
        {  
            FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);  
        }  
   

3. In the MenuFlyoutItem I added the Click event as shown in my example.
   In that click event I Triggered the button click through code in the code behind

        private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)  
        {  
   
            clickme_Click(clickme, e);  
        }  
   

And 4. I Hidden the button lol

I'm new, so still experimenting with this. If you see any issue with this workaround let me know.

Thanks again :)

Answer 2

Hello,

Welcome to Microsoft Q&A!

Nothing Happens when I click the Menu Flyout item "New Project".

The flyout doesn't appear is because after the MenuFlyoutItem is clicked, the entire MenuFlyout will be hidden, the Flyout inside it can't appear. So it is recommended you could create my own flyout and use buttons as you mentioned. But you still can add KeyboardAccelerators method in it. For example:

.xaml:

<Page.Resources>
    <Flyout x:Key="MyAttachedFlyout">
        <StackPanel>
            <Button Background="Transparent">
                <Button.Content>
                    <StackPanel Orientation="Horizontal">
                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE8C8;" FontSize="14" Margin="0,0,10,0"></FontIcon>
                        <TextBlock>New Project</TextBlock>
                        <TextBlock Margin="20,0,0,0" Foreground="Gray">Ctrl+P</TextBlock>
                    </StackPanel>
                </Button.Content>
                <Button.KeyboardAccelerators>
                    <KeyboardAccelerator Key="P" Modifiers="Control" />
                </Button.KeyboardAccelerators>
                <Button.Flyout>
                    <Flyout Placement="Full">
                        <StackPanel Background="Red">
                            <TextBlock Margin="0,0,0,12" Text="Text and another controls" />
                            <Button Content="Add" />
                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>
        </StackPanel>
    </Flyout>
</Page.Resources>

<CommandBar
         Background="Transparent"
         DefaultLabelPosition="Right"
         IsOpen="False"
         IsSticky="False">
        <AppBarButton Icon="Add" Label="Add" Flyout="{StaticResource MyAttachedFlyout}" />
        <AppBarButton Icon="Edit" Label="Edit" />
</CommandBar>