Show flyout using BottomAppBar
c#, win-universal-app, windows-phone-8.1, windows-runtime, xaml
Solution
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);
}
Problem
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