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

Wael weil 96 Reputation points
2020-04-06T17:05:08.067+00:00

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

Universal Windows Platform (UWP)
0 comments No comments
{count} votes

Accepted answer
  1. Wael weil 96 Reputation points
    2020-04-07T06:44:51.03+00:00

    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 :)


1 additional answer

Sort by: Most helpful
  1. Fay Wang - MSFT 5,201 Reputation points
    2020-04-07T02:39:02.787+00:00

    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>
    
    0 comments No comments