Show flyout using BottomAppBar

Question

I'm trying to show a simple Flyout (with informational content) when a AppBarToggleButton within BottomAppBar is pressed, but my solution doesn't work. :(

This is my code:

<Page.BottomAppBar>
        <CommandBar>
            <AppBarToggleButton x:Uid="MapPageAppBarLegend" Label="" Icon="List">
                <FlyoutBase.AttachedFlyout>
                    <Flyout>
                        <TextBlock Text="Informations here..."/>
                    </Flyout>
                </FlyoutBase.AttachedFlyout>
            </AppBarToggleButton>
        </CommandBar>
</Page.BottomAppBar>

Nothing appears.. Can anyone help me to showing this flayout? Thank you very much and sorry for my english language. :)

Pame

Answer 1

Everything is quite clearly described at MSDN (there is also a very good example there):

Nothing appears, because Flyouts open automatically only for buttons (and AppBarToggleButton doesn't derive from Button class):

A flyout attached to a button opens automatically when the user clicks the button. You don't need to handle any events to open the flyout. (This includes controls derived from Button, like AppBarButton

Of course you can add a Flyout to any FrameworkElement but you will have to open it manually:

You can attach a Flyout control to any FrameworkElement object by using the FlyoutBase.AttachedFlyout attached property. If you do so, you must respond to an interaction on the FrameworkElement, such as the Tapped event, and open the Flyout in your code.

In XAML - define your Flyout in Resources and attach it to button:

<Page.Resources>
    <Flyout x:Key="myFlyout" Placement="Top">
        <TextBlock Text="Informations here..."/>
    </Flyout>
</Page.Resources>
<Page.BottomAppBar>
    <CommandBar>
        <AppBarToggleButton x:Uid="MapPageAppBarLegend" Label="First" Icon="List"
                            FlyoutBase.AttachedFlyout="{StaticResource myFlyout}"
                            Click="AppBarToggleButton_Click"/>                
    </CommandBar>
</Page.BottomAppBar>

And event in code behind:

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