原文:
重新想象 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
[源码下载]
