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

Maybe [this question](http://stackoverflow.com/q/23326717/2681948) will help you. — Romasz, Jun 05 '14 at 09:51
@Romasz Thank you but I will show the flayout on AppBarToggleButton click and not in a AppBarButton.. and I cannot use the same way used for AppBarButton.. I don't know why, there are both button at the end.. — Pame1692, Jun 05 '14 at 09:55
Thought, I haven't played with this much, I guess that one solution if there aren't others provided, may be [the answer to that question](http://stackoverflow.com/a/23523126/2681948) - show Flyout upon your Button event. Have you tried like this? — Romasz, Jun 05 '14 at 09:59

Romasz · Accepted Answer · 2014-06-05T15:05:23.870

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);  
}

Show flyout using BottomAppBar

1 Answers1

Linked