<Page    x:Class="Windows81.Controls.FlyoutDemo"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows81.Controls"    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="SharedFlyout" Placement="Right">            <StackPanel>                <TextBlock Text="我是 Flyout 中的内容" Foreground="White" FontSize="24" />            </StackPanel>            <!--                FlyoutPresenterStyle - 用于定义 flyout 的显示样式            -->            <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>            </Page.Resources>        <Grid Background="Transparent">        <StackPanel Margin="120 0 0 0">            <TextBlock Name="lblMsg" FontSize="14.667" />                        <!--                Button 控件增加了一个 Flyout 属性（单击按钮后可以显示指定的 flyout）            -->            <Button Name="btnDemo" Content="按我弹出 Flyout" Margin="0 20 0 0">                <Button.Flyout>                    <!--                        Flyout - flyout 控件                            Placement - flyout 的显示位置（FlyoutPlacementMode 枚举：Top, Bottom, Left, Right, Full - 屏幕中央）                            Opening - flyout 准备显示时触发的事件                            Opened - flyout 显示之后触发的事件                            Closed - flyout 隐藏之后触发的事件                    -->                    <Flyout Placement="Right" Opening="Flyout_Opening" Opened="Flyout_Opened" Closed="Flyout_Closed">                        <StackPanel>                            <TextBlock>我是 Flyout 中的内容</TextBlock>                            <Button Click="Button_Click">隐藏 Flyout</Button>                        </StackPanel>                    </Flyout>                </Button.Flyout>            </Button>            <!--                让 FrameworkElement 弹出 flyout（通过 FlyoutBase.AttachedFlyout 来定义 FrameworkElement 对应的 flyout）                不会自动弹出，需要后台代码处理            -->            <TextBlock Text="按我弹出 Flyout" Margin="0 20 0 0" Tapped="TextBlock_Tapped" FontSize="18">                <FlyoutBase.AttachedFlyout>                    <Flyout>                        <TextBlock Text="我是 Flyout 中的内容" />                    </Flyout>                </FlyoutBase.AttachedFlyout>            </TextBlock>            <!--                通过指定资源的方式，设置 flyout 的样式和内容            -->            <TextBlock Text="按我弹出 Flyout" Margin="0 20 0 0" Tapped="TextBlock_Tapped" FontSize="18"                       FlyoutBase.AttachedFlyout="{StaticResource SharedFlyout}" />        </StackPanel>    </Grid></Page>

/* * Flyout - Flyout 控件（点击 Flyout 外部的话，Flyout 会自动关闭），继承自 FlyoutBase */using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;using Windows.UI.Xaml.Controls.Primitives;using Windows.UI.Xaml.Input;namespace Windows81.Controls{    public sealed partial class FlyoutDemo : Page    {        public FlyoutDemo()        {            this.InitializeComponent();        }        private void Button_Click(object sender, RoutedEventArgs e)        {            // Flyout 继承自 FlyoutBase            FlyoutBase flyout = btnDemo.Flyout;            // FlyoutBase.Hide() - 隐藏 Flyout            flyout.Hide();        }        private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)        {            FrameworkElement element = sender as FrameworkElement;            // FlyoutBase.ShowAttachedFlyout(FrameworkElement flyoutOwner) - 在指定的 FrameworkElement 上显示 flyout            FlyoutBase.ShowAttachedFlyout(element);            // FlyoutBase.GetAttachedFlyout(FrameworkElement element) - 获取指定 FrameworkElement 上定义的 flyout            FlyoutBase flyout = FlyoutBase.GetAttachedFlyout(element);            // FlyoutBase.ShowAt(FrameworkElement placementTarget) - 在指定的 FrameworkElement 上显示指定的 flyout            // flyout.ShowAt(btnDemo);        }        private void Flyout_Opening(object sender, object e)        {            lblMsg.Text = "Flyout 打开中";        }        private void Flyout_Opened(object sender, object e)        {            lblMsg.Text = "Flyout 已打开";        }        private void Flyout_Closed(object sender, object e)        {            lblMsg.Text = "Flyout 已关闭";        }    }}

<Page    x:Class="Windows81.Controls.MenuFlyoutDemo"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows81.Controls"    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="120 0 0 0">            <TextBlock Name="lblMsg" FontSize="14.667" />                        <Button Content="Options" Margin="0 20 0 0">                <Button.Flyout>                    <!--                        MenuFlyout - MenuFlyout 控件                            Items - MenuFlyout 中包含的 item（MenuFlyoutItem, ToggleMenuFlyoutItem, MenuFlyoutSeparator）                    -->                    <MenuFlyout>                                                <!--                            MenuFlyoutItem - MenuFlyout 中的 item                            ToggleMenuFlyoutItem - MenuFlyout 中的可以 toggle 的 item                            MenuFlyoutSeparator - MenuFlyout 中的分隔符                        -->                        <MenuFlyoutItem Text="MenuFlyoutItem" Click="MenuFlyoutItem_Click" />                        <MenuFlyoutSeparator/>                        <ToggleMenuFlyoutItem Text="ToggleMenuFlyoutItem1" IsChecked="True" />                        <ToggleMenuFlyoutItem Text="ToggleMenuFlyoutItem2" IsChecked="True" />                        <!--                            MenuFlyout.MenuFlyoutPresenterStyle - 用于定义 MenuFlyout 的显示样式                        -->                        <MenuFlyout.MenuFlyoutPresenterStyle>                            <Style TargetType="MenuFlyoutPresenter">                                <Setter Property="BorderBrush" Value="Red"/>                                <Setter Property="BorderThickness" Value="5"/>                            </Style>                        </MenuFlyout.MenuFlyoutPresenterStyle>                    </MenuFlyout>                </Button.Flyout>            </Button>        </StackPanel>    </Grid></Page>

/* * MenuFlyout - 菜单 Flyout 控件（点击 Flyout 外部的话，Flyout 会自动关闭），继承自 FlyoutBase */using Windows.UI.Xaml.Controls;namespace Windows81.Controls{    public sealed partial class MenuFlyoutDemo : Page    {        public MenuFlyoutDemo()        {            this.InitializeComponent();        }        private void MenuFlyoutItem_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)        {            lblMsg.Text = "MenuFlyoutItem 被 click 了";        }    }}

<SettingsFlyout    x:Class="Windows81.Controls.SettingsFlyout.SettingsFlyout1"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows81.Controls.SettingsFlyout"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d"        Title="SettingsFlyout 1"    IconSource="/Assets/SmallLogo.png"     HeaderForeground="White"     HeaderBackground="#00b2f0"    Background="White">        <!--        SettingsFlyout - 设置面板（本例是通过 SettingsFlyout 模板创建的）            Title - 标题            IconSource - 图标（在标题右侧）            HeaderForeground - header 的前景色            HeaderBackground - header 的背景色            Background - 设置面板的背景    -->        <!-- 此 StackPanel 充当内容部分的垂直布局的根面板-->    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >        <!-- 下列 StackPanel 定义个别内容部分-->        <!-- 第 1 部分内容-->        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">            <!-- 第 1 部分标题-->            <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="Lorem ipsum" />            <!-- 第 1 部分正文-->            <TextBlock Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,0,25" TextWrapping="Wrap">                <TextBlock.Text>                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.                </TextBlock.Text>            </TextBlock>        </StackPanel>        <!-- 根据需要在下面定义更多内容部分-->    </StackPanel></SettingsFlyout>

<Page    x:Class="Windows81.Controls.SettingsFlyout.Demo"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows81.Controls.SettingsFlyout"    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="120 0 0 0">            <Button Name="btnShowSettingsFlyout" Content="显示通过 SettingsFlyout 实现的自定义设置面板 " Click="btnShowSettingsFlyout_Click" />        </StackPanel>    </Grid></Page>

/* * SettingsFlyout - 设置面板 Flyout 控件 *  * 本例用于演示如何弹出 SettingsFlyout，实际的 SettingsFlyout 页面请参见：SettingsFlyout1.xaml */using Windows.UI.ApplicationSettings;using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;using Windows.UI.Xaml.Navigation;namespace Windows81.Controls.SettingsFlyout{    public sealed partial class Demo : Page    {        public Demo()        {            this.InitializeComponent();        }        protected override void OnNavigatedTo(NavigationEventArgs e)        {            SettingsPane.GetForCurrentView().CommandsRequested += onCommandsRequested;        }        protected override void OnNavigatedFrom(NavigationEventArgs e)        {            SettingsPane.GetForCurrentView().CommandsRequested -= onCommandsRequested;            base.OnNavigatedFrom(e);        }        void onCommandsRequested(SettingsPane settingsPane, SettingsPaneCommandsRequestedEventArgs e)        {            // 关联到 charm 栏的设置按钮            SettingsCommand myCommand = new SettingsCommand("myCommand", "SettingsFlyout 面板",                (handler) =>                {                    SettingsFlyout1 sf = new SettingsFlyout1();                    // SettingsFlyout.Show() - 显示指定的 SettingsFlyout（Show - 通过 charm 栏的设置按钮弹出；ShowIndependent - 通过自己写代码的方式弹出）                    sf.Show();                    // SettingsFlyout.Hide() - 隐藏指定的 SettingsFlyout                    // sf.Hide();                });            e.Request.ApplicationCommands.Add(myCommand);        }        private void btnShowSettingsFlyout_Click(object sender, RoutedEventArgs e)        {            SettingsFlyout1 sf = new SettingsFlyout1();            // 点击了 SettingsFlyout 的后退按钮时触发的事件            // sf.BackClick += xxx;            // SettingsFlyout.ShowIndependent() - 显示指定的 SettingsFlyout（ShowIndependent - 通过自己写代码的方式弹出；Show - 通过 charm 栏的设置按钮弹出）            sf.ShowIndependent();            // SettingsFlyout.Hide() - 隐藏指定的 SettingsFlyout            // sf.Hide();        }    }}