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

2024-01-22 18:58:41

介绍
重新想象 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
[源码下载]

码农公寓

相关文章