Object └─DependencyObject └─FlyoutBase ├─Flyout └─MenuFlyout
Example: Show a confirmation Flyout when the user clicks a button:
<Button x:Name="DeleteContactButton" Content="Delete Contact"> <Button.Flyout> <Flyout> <StackPanel> <TextBlock>Are you sure?</TextBlock> <Button Click="DeleteContact_Click">Yes, delete</Button> </StackPanel> </Flyout> </Button.Flyout> </Button>
private void DeleteContact_Click(object sender, RoutedEventArgs args) { Flyout flyout = DeleteContactButton.Flyout as Flyout; if (flyout != null) { flyout.Hide(); } }
Use the FlyoutBase.AttachedFlyout property to attach a Flyout to any FrameworkElement object.
Example: Show a flyout when the user clicks a ListView's item:
<ListView Width="100" Background="Silver" Margin="100" SelectionChanged="ListView_SelectionChanged"> <Flyout.AttachedFlyout> <Flyout Placement="Bottom"> <StackPanel> <TextBlock Text="Selection changed" FontSize="18" /> </StackPanel> </Flyout> </Flyout.AttachedFlyout> <ListViewItem Padding="4">Red</ListViewItem> <ListViewItem Padding="4">Green</ListViewItem> <ListViewItem Padding="4">Blue</ListViewItem> </ListView>
private void ListView_SelectionChanged(object sender, RoutedEventArgs args) { ListView list = sender as ListView; if (list != null) { Flyout.ShowAttachedFlyout(list); } }
Example: Show a Flyout when the user taps a TextBlock:
<TextBlock Text="Tap here to provide your name" Tapped="TextBlock_Tapped" FontSize="18"> <FlyoutBase.AttachedFlyout> <Flyout> <StackPanel> <TextBlock Text="Your name:" /> <TextBox x:Name="TextBox1" Text="" Width="200" /> </StackPanel> </Flyout> </FlyoutBase.AttachedFlyout> </TextBlock>
private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e) { FrameworkElement element = sender as FrameworkElement; if (element != null) { FlyoutBase.ShowAttachedFlyout(element); } }
Example: Define a Flyout as a resource:
<Page.Resources> <Flyout x:Key="SharedFlyout"> <StackPanel> <TextBlock Text="This is a shared flyout." /> </StackPanel> </Flyout> </Page.Resources> <StackPanel Width="400"> <Button Content="Button" Flyout="{StaticResource SharedFlyout}" /> <TextBlock Text="TextBlock" FlyoutBase.AttachedFlyout="{StaticResource SharedFlyout}" Tapped="TextBlock_Tapped" /> </StackPanel>
private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e) { FrameworkElement element = sender as FrameworkElement; if (element != null) { FlyoutBase.ShowAttachedFlyout(element); } }
Example: Share a Flyout between multiple buttons. Also, bind the Flyout to the same data as the buttons:
<Page x:Class="TestApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:TestApp"> <Page.Resources> <local:Book x:Key="Book1" Title="C++" /> <local:Book x:Key="Book2" Title="DirectX" /> <local:Book x:Key="Book3" Title="JavaScript" /> <Flyout x:Key="SharedFlyout"> <TextBlock Text="{Binding Title}" /> </Flyout> </Page.Resources> <Grid> <StackPanel Orientation="Horizontal"> <Button DataContext="{StaticResource Book1}" Content="Book1" Flyout="{StaticResource SharedFlyout}" Margin="4" /> <Button DataContext="{StaticResource Book2}" Content="Book2" Flyout="{StaticResource SharedFlyout}" Margin="4" /> <Button DataContext="{StaticResource Book3}" Content="Book3" Flyout="{StaticResource SharedFlyout}" Margin="4" /> </StackPanel> </Grid> </Page>
using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace TestApp { public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); } } public class Book { public string Title { get; set; } } }
Example: Create the contents of a Flyout dynamically. Use the flyout's Opening event handler to do that:
<Page x:Class="TestApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Page.Resources> <Style x:Name="FlyoutTextBlock" TargetType="TextBlock"> <Setter Property="FontSize" Value="15" /> <Setter Property="FontWeight" Value="Bold" /> </Style> </Page.Resources> <Grid> <Button Content="Show Date/Time"> <Button.Flyout> <Flyout Opening="Flyout_Opening" /> </Button.Flyout> </Button> </Grid> </Page>
using System; using Windows.Globalization.DateTimeFormatting; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace TestApp { public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); } private void Flyout_Opening(object sender, object args) { var f = sender as Flyout; if (f != null) { DateTimeFormatter dateFormatter = new DateTimeFormatter("shortdate"); DateTimeFormatter timeFormatter = new DateTimeFormatter("shorttime"); DateTime now = DateTime.Now; string dateTimeStr = dateFormatter.Format(now) + " " + timeFormatter.Format(now); TextBlock tb = new TextBlock(); tb.Text = String.Format("Here and now: {0}", dateTimeStr); tb.Style = (Style)this.Resources["FlyoutTextBlock"]; f.Content = tb; } } } }
Example: Create a Flyout with no margins and padding containing a ListView:
<Button Content="Show Colors"> <Button.Flyout> <Flyout> <ListView Margin="0" Padding="0"> <ListView.ItemTemplate> <DataTemplate> <Rectangle Width="100" Height="44"> <Rectangle.Fill> <SolidColorBrush Color="{Binding}" /> </Rectangle.Fill> </Rectangle> </DataTemplate> </ListView.ItemTemplate> <Color>Blue</Color> <Color>Red</Color> <Color>Green</Color> <Color>Magenta</Color> </ListView> <Flyout.FlyoutPresenterStyle> <Style TargetType="FlyoutPresenter"> <Setter Property="BorderBrush" Value="Transparent"></Setter> <Setter Property="BorderThickness" Value="0"></Setter> <Setter Property="Margin" Value="0"></Setter> <Setter Property="Padding" Value="0"></Setter> </Style> </Flyout.FlyoutPresenterStyle> </Flyout> </Button.Flyout> </Button>
Example: A button with a MenuFlyout:
<Button Content="Colors"> <Button.Flyout> <MenuFlyout Opened="MenuFlyout_Opened"> <MenuFlyoutItem Text="Default" Click="ItemDefault_Click" /> <MenuFlyoutSeparator /> <ToggleMenuFlyoutItem Text="Red" IsChecked="{Binding IsRed, Mode=TwoWay}" /> <ToggleMenuFlyoutItem Text="Green" IsChecked="{Binding IsGreen, Mode=TwoWay}" /> <ToggleMenuFlyoutItem Text="Blue" IsChecked="{Binding IsBlue, Mode=TwoWay}" /> </MenuFlyout> </Button.Flyout> </Button>
private void MenuFlyout_Opened(object sender, object args) { MenuFlyout m = sender as MenuFlyout; if (m != null) { Debug.WriteLine("MenuFlyout opened"); } } private void ItemDefault_Click(object sender, RoutedEventArgs args) { MenuFlyoutItem item = sender as MenuFlyoutItem; if (item != null) { Debug.WriteLine("Selected option: " + item.Text); } }
More information on menu and context menus can be found here.
Win10 update: The new MenuFlyout.ShowAt method lets you specify where you want the flyout to appear in relation to another element. Use the new MenuFlyoutSubItemclass to create cascading menus.