How to make a flyout not prevent clicking anything else

I'm working on a UWP project in c# and xaml.

When you click outsde of a flyout, the flyout closes, but it also prevents anything else from getting clicked on.

Is there a way to make the flyout not swallow the click/pointerpressed event? So that, for example, clicking a button while the flyout is open will both close the flyout and execute the button click.

I tried making a derived flyout class, with the intention of overriding the OnPointerPressed function (like you can for a button), so I can set the Handled flag to false, but it doesn't seem to have an OnPointerPressed function or anything like it.

Solution

How to make a flyout not prevent clicking anything else

Derive from Light dismiss behavior. You can change this behavior by designating the button as an input pass-through element for the flyout.

The flyout will close as a result of the light dismiss actions described above and will also pass the tap event to its designated OverlayInputPassThroughElement. Consider adopting this behavior to speed up user interactions on functionally similar items. If your app has a favorites collection and each item in the collection includes an attached flyout, it's reasonable to expect that users may want to interact with multiple flyouts in rapid succession.

<Page.Resources>
    <Flyout x:Name="TravelFlyout" x:Key="TravelFlyout"
            OverlayInputPassThroughElement="{x:Bind FavoritesBar}">
        <StackPanel>
            <HyperlinkButton Content="Washington Trails Association"/>
            <HyperlinkButton Content="Washington Cascades - Go Northwest! A Travel Guide"/>
        </StackPanel>
    </Flyout>
</Page.Resources>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <StackPanel x:Name="FavoritesBar" Orientation="Horizontal">
        <HyperlinkButton x:Name="PageLinkBtn">Bing</HyperlinkButton>
        <Button x:Name="Folder1" Content="Travel" Flyout="{StaticResource TravelFlyout}"/>
        <Button x:Name="Folder2" Content="Entertainment" Click="Folder2_Click"/>
    </StackPanel>
</Grid>