<Page    x:Class="Windows10.Controls.FlyoutControl.FlyoutBaseDemo"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows10.Controls.FlyoutControl"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Page.Resources>        <!--            通过资源的方式定义 flyout 的样式和内容        -->        <Flyout x:Key="MyFlyout">            <StackPanel>                <TextBlock Text="我是 Flyout 中的内容" />            </StackPanel>        </Flyout>    </Page.Resources>        <Grid Background="Transparent">        <StackPanel Margin="10 0 10 10">            <!--                Flyout - 弹出框控件，继承自 FlyoutBase，下面介绍 FlyoutBase 的相关知识点                    Placement - 弹出框的显示位置                        Top - 目标元素的上边（默认值）                        Bottom - 目标元素的下边                        Left - 目标元素的左边                        Right - 目标元素的右边                        Full - 屏幕中央                    Opening - 弹出框准备显示时触发的事件                    Opened - 弹出框显示之后触发的事件                    Closed - 弹出框隐藏之后触发的事件            -->            <!--                FlyoutBase 的用法 1                部分控件本身有 Flyout 属性，比如 Button 控件，可以通过其 Flyout 属性直接为其绑定 FlyoutBase 控件及行为（单击按钮后就会显示此 FlyoutBase 控件）            -->            <Button Name="button1" Margin="5" Content="按我弹出 Flyout">                <Button.Flyout>                    <Flyout x:Name="flyout1" Placement="Right" Opening="flyout1_Opening" Opened="flyout1_Opened" Closed="flyout1_Closed">                        <StackPanel>                            <TextBlock>我是 Flyout 中的内容</TextBlock>                            <Button x:Name="button1CloseFlyout" Click="button1CloseFlyout_Click">隐藏 Flyout</Button>                        </StackPanel>                    </Flyout>                </Button.Flyout>            </Button>            <TextBlock Name="lblMsg1" Margin="5" />                        <!--                FlyoutBase 的用法 2                通过附加属性 FlyoutBase.AttachedFlyout 为指定的控件绑定 FlyoutBase 控件（何时显示需要在 CodeBehind 中控制）            -->            <TextBlock Name="textBlock1" Margin="5" Text="按我弹出 Flyout" Tapped="textBlock1_Tapped" FontSize="18">                <FlyoutBase.AttachedFlyout>                    <Flyout Placement="Right">                        <TextBlock Text="我是 Flyout 中的内容" />                    </Flyout>                </FlyoutBase.AttachedFlyout>            </TextBlock>                        <!--                FlyoutBase 的用法 3                此用法同用法 2，不同之处在于这里把 flyout 的样式和内容放到资源中定义了            -->            <TextBlock Name="textBlock2" Margin="5" Text="按我弹出 Flyout" Tapped="textBlock2_Tapped" FontSize="18"                       FlyoutBase.AttachedFlyout="{StaticResource MyFlyout}" />            <!--                FlyoutBase 的用法 4                在 CodeBehind 中创建 FlyoutBase 控件后，将其绑定到指定的控件上，并显示            -->            <TextBlock Name="textBlock3" Margin="5" Text="按我弹出 Flyout" Tapped="textBlock3_Tapped" FontSize="18" />            <!--                FlyoutBase 的用法 5                在 CodeBehind 中创建 FlyoutBase 控件后，在不设置绑定的情况下，使其显示在指定的控件上            -->            <TextBlock Name="textBlock4" Margin="5" Text="按我弹出 Flyout" Tapped="textBlock4_Tapped" FontSize="18" />        </StackPanel>    </Grid></Page>

/* * FlyoutBase（基类） - 弹出框控件基类（继承自 DependencyObject, 请参见 /Controls/BaseControl/DependencyObjectDemo.xaml） *     Hide() - 隐藏 Flyout *     ShowAt(FrameworkElement targetElement) - 在指定的 FrameworkElement 上显示指定的 Flyout * *     FlyoutBase.SetAttachedFlyout(FrameworkElement element, FlyoutBase value) - 在指定的 FrameworkElement 上绑定指定的 Flyout *     FlyoutBase.GetAttachedFlyout(FrameworkElement element) - 获取指定的 FrameworkElement 上绑定的 Flyout *     FlyoutBase.ShowAttachedFlyout(FrameworkElement flyoutOwner) - 在指定的 FrameworkElement 上显示其绑定的 Flyout * * * 注：点击 FlyoutBase 外部的话，FlyoutBase 会自动关闭 *  * 另外，在 uwp 中不再支持 SettingsFlyout 了 */using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;using Windows.UI.Xaml.Controls.Primitives;using Windows.UI.Xaml.Input;namespace Windows10.Controls.FlyoutControl{    public sealed partial class FlyoutBaseDemo : Page    {        public FlyoutBaseDemo()        {            this.InitializeComponent();        }        private void flyout1_Opening(object sender, object e)        {            lblMsg1.Text = "Flyout 打开中";        }        private void flyout1_Opened(object sender, object e)        {            lblMsg1.Text = "Flyout 已打开";        }        private void flyout1_Closed(object sender, object e)        {            lblMsg1.Text = "Flyout 已关闭";        }        private void button1CloseFlyout_Click(object sender, RoutedEventArgs e)        {            flyout1.Hide();        }        private void textBlock1_Tapped(object sender, TappedRoutedEventArgs e)        {            FlyoutBase.ShowAttachedFlyout(textBlock1);        }        private void textBlock2_Tapped(object sender, TappedRoutedEventArgs e)        {            FlyoutBase flyout = FlyoutBase.GetAttachedFlyout(textBlock2);            flyout.Placement = FlyoutPlacementMode.Right;            FlyoutBase.ShowAttachedFlyout(textBlock2);        }        // 在 CodeBehind 中创建 FlyoutBase 控件后，将其绑定到指定的控件上，并显示        private void textBlock3_Tapped(object sender, TappedRoutedEventArgs e)        {            TextBlock flyoutContent = new TextBlock();            flyoutContent.Text = "我是 Flyout 中的内容";            Flyout flyout = new Flyout();            flyout.Placement = FlyoutPlacementMode.Right;            flyout.Content = flyoutContent;            FlyoutBase.SetAttachedFlyout(textBlock3, flyout);            FlyoutBase.ShowAttachedFlyout(textBlock3);        }        // 在 CodeBehind 中创建 FlyoutBase 控件后，在不设置绑定的情况下，使其显示在指定的控件上        private void textBlock4_Tapped(object sender, TappedRoutedEventArgs e)        {            TextBlock flyoutContent = new TextBlock();            flyoutContent.Text = "我是 Flyout 中的内容";            Flyout flyout = new Flyout();            flyout.Placement = FlyoutPlacementMode.Right;            flyout.Content = flyoutContent;            flyout.ShowAt(textBlock4);        }    }}

<Page    x:Class="Windows10.Controls.FlyoutControl.FlyoutDemo"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows10.Controls.FlyoutControl"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Grid Background="Transparent">        <StackPanel Margin="10 0 10 10">            <!--                Flyout - 弹出框控件                    FlyoutPresenterStyle - 用于定义 Flyout 的样式            -->                        <!--                xaml 方式指定 flyout            -->            <Button Name="button1" Margin="5" Content="按我弹出 Flyout">                <Button.Flyout>                    <Flyout Placement="Right">                        <StackPanel>                            <TextBlock Text="我是 Flyout 中的内容" Foreground="White" FontSize="24" />                        </StackPanel>                        <Flyout.FlyoutPresenterStyle>                            <Style TargetType="FlyoutPresenter">                                <Setter Property="ScrollViewer.ZoomMode" Value="Enabled"/>                                <Setter Property="Background" Value="Blue"/>                                <Setter Property="BorderBrush" Value="Red"/>                                <Setter Property="BorderThickness" Value="10"/>                                <Setter Property="MinHeight" Value="300"/>                                <Setter Property="MinWidth" Value="300"/>                            </Style>                        </Flyout.FlyoutPresenterStyle>                    </Flyout>                </Button.Flyout>            </Button>            <!--                code-behind 方式指定 flyout            -->            <TextBlock Name="textBlock1" Margin="5" Text="按我弹出 Flyout" Tapped="textBlock1_Tapped" FontSize="18" />        </StackPanel>    </Grid></Page>

/* * Flyout - 弹出框控件（继承自 FlyoutBase, 请参见 /Controls/FlyoutControl/FlyoutBaseDemo.xaml） *     Content - 获取或设置 Flyout 的内容 */using Windows.UI.Xaml.Controls;using Windows.UI.Xaml.Controls.Primitives;using Windows.UI.Xaml.Input;namespace Windows10.Controls.FlyoutControl{    public sealed partial class FlyoutDemo : Page    {        public FlyoutDemo()        {            this.InitializeComponent();        }        private void textBlock1_Tapped(object sender, TappedRoutedEventArgs e)        {            TextBlock flyoutContent = new TextBlock();            flyoutContent.Text = "我是 Flyout 中的内容";            Flyout flyout = new Flyout();            flyout.Placement = FlyoutPlacementMode.Right;            flyout.Content = flyoutContent;            flyout.ShowAt(textBlock1);        }    }}

<Page    x:Class="Windows10.Controls.FlyoutControl.MenuFlyoutDemo"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows10.Controls.FlyoutControl"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Page.Resources>        <!--            MenuFlyout - 菜单弹出框控件                Items - MenuFlyout 中包含的 item（MenuFlyoutItem, ToggleMenuFlyoutItem, MenuFlyoutSeparator）        -->        <MenuFlyout x:Key="MyMenuFlyout" Placement="Right">                        <!--                MenuFlyoutItem - MenuFlyout 中的 item                    Text, Click, Command, CommandParameter                            ToggleMenuFlyoutItem - MenuFlyout 中的可以 toggle 的 item                    IsChecked, Text, Click, Command, CommandParameter                            MenuFlyoutSubItem - 支持 sub item 的 item                    Text, Items                            MenuFlyoutSeparator - MenuFlyout 中的分隔符            -->                        <MenuFlyoutItem Name="menuFlyoutItem1" Text="MenuFlyoutItem" Click="menuFlyoutItem1_Click" />            <MenuFlyoutSeparator/>            <ToggleMenuFlyoutItem Name="toggleMenuFlyoutItem1" Text="ToggleMenuFlyoutItem1" IsChecked="False" Click="toggleMenuFlyoutItem1_Click" />            <ToggleMenuFlyoutItem Name="toggleMenuFlyoutItem2" Text="ToggleMenuFlyoutItem2" IsChecked="True" Click="toggleMenuFlyoutItem2_Click" />            <MenuFlyoutSubItem Text="item">                <MenuFlyoutItem Text="item 1" />                <MenuFlyoutItem Text="item 2" />                <MenuFlyoutSubItem Text="item 3">                    <MenuFlyoutItem Text="item 3 - 1" />                    <MenuFlyoutItem Text="item 3 - 2" />                </MenuFlyoutSubItem>            </MenuFlyoutSubItem>            <!--                MenuFlyout.MenuFlyoutPresenterStyle - 用于定义 MenuFlyout 的样式            -->            <MenuFlyout.MenuFlyoutPresenterStyle>                <Style TargetType="MenuFlyoutPresenter">                    <Setter Property="BorderBrush" Value="Red" />                    <Setter Property="BorderThickness" Value="5" />                </Style>            </MenuFlyout.MenuFlyoutPresenterStyle>        </MenuFlyout>    </Page.Resources>    <Grid Background="Transparent">        <StackPanel Margin="10 0 10 10">            <TextBlock Name="lblMsg" Margin="5" />            <Button Name="button1" Margin="5" Content="Options" Flyout="{StaticResource MyMenuFlyout}" />            <TextBlock Name="textBlock1" Margin="5 20 5 5" Text="按我弹出 Flyout" Tapped="textBlock1_Tapped" FontSize="18" />                    </StackPanel>    </Grid></Page>

/* * MenuFlyout - 菜单弹出框控件（继承自 FlyoutBase, 请参见 /Controls/FlyoutControl/FlyoutBaseDemo.xaml） *     ShowAt(UIElement targetElement, Point point) - 在指定的 UIElement 的指定位置（point 是相对于 targetElement 的位置）显示 MenuFlyout 控件 */using Windows.Foundation;using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows10.Controls.FlyoutControl{    public sealed partial class MenuFlyoutDemo : Page    {        public MenuFlyoutDemo()        {            this.InitializeComponent();        }        private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)        {            lblMsg.Text = "MenuFlyoutItem 被 click 了";        }        private void menuFlyoutItem1_Click(object sender, RoutedEventArgs e)        {            lblMsg.Text = "menuFlyoutItem1 被 click 了";        }        private void toggleMenuFlyoutItem1_Click(object sender, RoutedEventArgs e)        {            lblMsg.Text = $"toggleMenuFlyoutItem1 被 click 了, IsChecked:{toggleMenuFlyoutItem1.IsChecked}";        }        private void toggleMenuFlyoutItem2_Click(object sender, RoutedEventArgs e)        {            lblMsg.Text = $"toggleMenuFlyoutItem2 被 click 了, IsChecked:{toggleMenuFlyoutItem2.IsChecked}";        }        private void textBlock1_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)        {            MenuFlyout menuFlyout = this.Resources["MyMenuFlyout"] as MenuFlyout;            // 对于基类的 ShowAt(FrameworkElement targetElement) 方法当然是支持的            // menuFlyout.ShowAt(textBlock1);            // 在 MenuFlyout 中重载了 ShowAt() 方法，即 ShowAt(UIElement targetElement, Point point)            // 其中 point 代表 MenuFlyout 相对于 targetElement 左上角的显示位置（此时 MenuFlyout 的 Placement 参数就无效了）            menuFlyout.ShowAt(textBlock1, new Point(10, 10));        }    }}