question

Waelweil-6746 avatar image
0 Votes"
Waelweil-6746 asked ·

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

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

windows-uwpwindows-uwp-xaml
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Waelweil-6746 avatar image
0 Votes"
Waelweil-6746 answered ·

Hi @FayWang-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 ·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks for sharing the solution. If you have solved your issue, you can mark the answer to help others.

0 Votes 0 ·
FayWang-MSFT avatar image
0 Votes"
FayWang-MSFT answered ·

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>





·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.