question

NoahWood-1334 avatar image
0 Votes"
NoahWood-1334 asked NoahWood-1334 commented

WinUI 2 Flyout in Overflow

I have an existing UWP app that I am adding WinUI (v2) to for updated visual controls. I have a commandbar with a button that opens a flyout. Like so:

 <AppBarButton x:Name="FindButton" Icon="Find" Label="Find Text"
               ToolTipService.ToolTip="Find (Ctrl+F)" AllowFocusOnInteraction="True">
     <AppBarButton.KeyboardAccelerators>
         <KeyboardAccelerator Modifiers="Control" Key="F"/>
     </AppBarButton.KeyboardAccelerators>
     <AppBarButton.Flyout>
         <Flyout>
             <Grid>
                 <Grid.RowDefinitions>
                     <RowDefinition Height="Auto"/>
                     <RowDefinition Height="Auto"/>
                     <RowDefinition Height="Auto"/>
                     <RowDefinition Height="Auto"/>
                 </Grid.RowDefinitions>
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="300"/>
                 </Grid.ColumnDefinitions>
                 <TextBlock Grid.Row="0" Grid.Column="0" Text="Find what" Margin="5"/>
                 <TextBox x:Name="FindTextBox" Grid.Row="1" Grid.Column="0" Margin="5" PreviewKeyDown="FindTextBox_PreviewKeyDown"/>
                 <CheckBox x:Name="MatchCaseCheckbox" Grid.Row="2" Grid.Column="0" Content="Match case" Margin="5"/>
                 <StackPanel Grid.Row="3" Grid.Column="0" Orientation="Horizontal">
                     <Button Content="Find Previous" Tag="Prev" Margin="5" Click="FindText_Click"/>
                     <Button Content="Find Next" Tag="Next" Margin="5" Click="FindText_Click"/>
                 </StackPanel>
             </Grid>
         </Flyout>
     </AppBarButton.Flyout>
 </AppBarButton>

When the button is in the overflow menu, the overflow menu will not close when the flyout is open causing it to appear on-top. Is there a way to cause the flyout opening to close the commandbar overflow? I couldn't find a way. This only seems to be an issue with WinUI since it wasn't an issue before installing the package to my app.

87849-2021-04-14-17-49-19.jpg



windows-uwp
5 |1600 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.

1 Answer

NicoZhu-MSFT avatar image
1 Vote"
NicoZhu-MSFT answered NoahWood-1334 commented

Hello, Welcome to Micorosoft Q&A,

We could reproduce this problem, we suggest you post this in Winui Github issue box, And currently, there is a workaround that reduce the app's target version to 1809, and use WinUI 2.0.181011001 nuget package.


If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 1
5 |1600 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 Nico. I made an issue on the GitHub as you mention. Linking it here for future reference. Thanks!

https://github.com/microsoft/microsoft-ui-xaml/issues/4829

1 Vote 1 ·