User Tools

Site Tools


notes:uwp:flyout

Table of Contents

Flyout in XAML

Object
 └─DependencyObject
   └─FlyoutBase
     ├─Flyout
     └─MenuFlyout

Flyout

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.

notes/uwp/flyout.txt · Last modified: 2017/03/14 by admin