重新想象 Windows 8.1 Store Apps (74) - 新增控件: Flyout, MenuFlyout, SettingsFlyout

[源码下载]

重新想象 Windows 8.1 Store Apps (74) - 新增控件: Flyout, MenuFlyout, SettingsFlyout

作者：webabcd

介绍
重新想象 Windows 8.1 Store Apps 之新增控件

• Flyout - Flyout 控件
• MenuFlyout - 菜单 Flyout 控件
• SettingsFlyout - 设置面板 Flyout 控件

示例
1、演示 Flyout 的应用
FlyoutDemo.xaml

<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>

FlyoutDemo.xaml.cs

/*
 * 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 已关闭";
        }
    }
}

2、演示 MenuFlyout 的应用
MenuFlyoutDemo.xaml

<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>

MenuFlyoutDemo.xaml.cs

/*
 * 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 了";
        }
    }
}

3、演示 SettingsFlyout 的应用
SettingsFlyout/SettingsFlyout1.xaml

<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>

SettingsFlyout/Demo.xaml

<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/Demo.xaml.cs

/*
 * 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();
        }
    }
}

OK
[源码下载]