重新想象 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
<span><</span><span>Page
</span><span>x:Class</span><span>="Windows81.Controls.FlyoutDemo"</span><span>
xmlns</span><span>="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span><span>
xmlns:x</span><span>="http://schemas.microsoft.com/winfx/2006/xaml"</span><span>
xmlns:local</span><span>="using:Windows81.Controls"</span><span>
xmlns:d</span><span>="http://schemas.microsoft.com/expression/blend/2008"</span><span>
xmlns:mc</span><span>="http://schemas.openxmlformats.org/markup-compatibility/2006"</span><span>
mc:Ignorable</span><span>="d"</span><span>></span><span><</span><span>Page.Resources</span><span>></span><span><!--</span><span>
通过资源的方式定义 flyout 的样式和内容
</span><span>--></span><span><</span><span>Flyout </span><span>x:Key</span><span>="SharedFlyout"</span><span> Placement</span><span>="Right"</span><span>></span><span><</span><span>StackPanel</span><span>></span><span><</span><span>TextBlock </span><span>Text</span><span>="我是 Flyout 中的内容"</span><span> Foreground</span><span>="White"</span><span> FontSize</span><span>="24"</span><span>/></span><span></</span><span>StackPanel</span><span>></span><span><!--</span><span>
FlyoutPresenterStyle - 用于定义 flyout 的显示样式
</span><span>--></span><span><</span><span>Flyout.FlyoutPresenterStyle</span><span>></span><span><</span><span>Style </span><span>TargetType</span><span>="FlyoutPresenter"</span><span>></span><span><</span><span>Setter </span><span>Property</span><span>="ScrollViewer.ZoomMode"</span><span> Value</span><span>="Enabled"</span><span>/></span><span><</span><span>Setter </span><span>Property</span><span>="Background"</span><span> Value</span><span>="Blue"</span><span>/></span><span><</span><span>Setter </span><span>Property</span><span>="BorderBrush"</span><span> Value</span><span>="Red"</span><span>/></span><span><</span><span>Setter </span><span>Property</span><span>="BorderThickness"</span><span> Value</span><span>="10"</span><span>/></span><span><</span><span>Setter </span><span>Property</span><span>="MinHeight"</span><span> Value</span><span>="300"</span><span>/></span><span><</span><span>Setter </span><span>Property</span><span>="MinWidth"</span><span> Value</span><span>="300"</span><span>/></span><span></</span><span>Style</span><span>></span><span></</span><span>Flyout.FlyoutPresenterStyle</span><span>></span><span></</span><span>Flyout</span><span>></span><span></</span><span>Page.Resources</span><span>></span><span><</span><span>Grid </span><span>Background</span><span>="Transparent"</span><span>></span><span><</span><span>StackPanel </span><span>Margin</span><span>="120 0 0 0"</span><span>></span><span><</span><span>TextBlock </span><span>Name</span><span>="lblMsg"</span><span> FontSize</span><span>="14.667"</span><span>/></span><span><!--</span><span>
Button 控件增加了一个 Flyout 属性（单击按钮后可以显示指定的 flyout）
</span><span>--></span><span><</span><span>Button </span><span>Name</span><span>="btnDemo"</span><span> Content</span><span>="按我弹出 Flyout"</span><span> Margin</span><span>="0 20 0 0"</span><span>></span><span><</span><span>Button.Flyout</span><span>></span><span><!--</span><span>
Flyout - flyout 控件
Placement - flyout 的显示位置（FlyoutPlacementMode 枚举：Top, Bottom, Left, Right, Full - 屏幕中央）
Opening - flyout 准备显示时触发的事件
Opened - flyout 显示之后触发的事件
Closed - flyout 隐藏之后触发的事件
</span><span>--></span><span><</span><span>Flyout </span><span>Placement</span><span>="Right"</span><span> Opening</span><span>="Flyout_Opening"</span><span> Opened</span><span>="Flyout_Opened"</span><span> Closed</span><span>="Flyout_Closed"</span><span>></span><span><</span><span>StackPanel</span><span>></span><span><</span><span>TextBlock</span><span>></span>我是 Flyout 中的内容<span></</span><span>TextBlock</span><span>></span><span><</span><span>Button </span><span>Click</span><span>="Button_Click"</span><span>></span>隐藏 Flyout<span></</span><span>Button</span><span>></span><span></</span><span>StackPanel</span><span>></span><span></</span><span>Flyout</span><span>></span><span></</span><span>Button.Flyout</span><span>></span><span></</span><span>Button</span><span>></span><span><!--</span><span>
让 FrameworkElement 弹出 flyout（通过 FlyoutBase.AttachedFlyout 来定义 FrameworkElement 对应的 flyout）
不会自动弹出，需要后台代码处理
</span><span>--></span><span><</span><span>TextBlock </span><span>Text</span><span>="按我弹出 Flyout"</span><span> Margin</span><span>="0 20 0 0"</span><span> Tapped</span><span>="TextBlock_Tapped"</span><span> FontSize</span><span>="18"</span><span>></span><span><</span><span>FlyoutBase.AttachedFlyout</span><span>></span><span><</span><span>Flyout</span><span>></span><span><</span><span>TextBlock </span><span>Text</span><span>="我是 Flyout 中的内容"</span><span>/></span><span></</span><span>Flyout</span><span>></span><span></</span><span>FlyoutBase.AttachedFlyout</span><span>></span><span></</span><span>TextBlock</span><span>></span><span><!--</span><span>
通过指定资源的方式，设置 flyout 的样式和内容
</span><span>--></span><span><</span><span>TextBlock </span><span>Text</span><span>="按我弹出 Flyout"</span><span> Margin</span><span>="0 20 0 0"</span><span> Tapped</span><span>="TextBlock_Tapped"</span><span> FontSize</span><span>="18"</span><span>
FlyoutBase.AttachedFlyout</span><span>="</span><span>{StaticResource SharedFlyout}</span><span>"</span><span>/></span><span></</span><span>StackPanel</span><span>></span><span></</span><span>Grid</span><span>></span><span></</span><span>Page</span><span>></span>FlyoutDemo.xaml.cs
<span>/*</span><span>
* Flyout - Flyout 控件（点击 Flyout 外部的话，Flyout 会自动关闭），继承自 FlyoutBase
</span><span>*/</span><span>using</span><span> Windows.UI.Xaml;
</span><span>using</span><span> Windows.UI.Xaml.Controls;
</span><span>using</span><span> Windows.UI.Xaml.Controls.Primitives;
</span><span>using</span><span> Windows.UI.Xaml.Input;
</span><span>namespace</span><span> Windows81.Controls
{
</span><span>public</span><span>sealed</span><span>partial</span><span>class</span><span> FlyoutDemo : Page
{
</span><span>public</span><span> FlyoutDemo()
{
</span><span>this</span><span>.InitializeComponent();
}
</span><span>private</span><span>void</span> Button_Click(<span>object</span><span> sender, RoutedEventArgs e)
{
</span><span>//</span><span> Flyout 继承自 FlyoutBase</span>
FlyoutBase flyout =<span> btnDemo.Flyout;
</span><span>//</span><span> FlyoutBase.Hide() - 隐藏 Flyout</span><span> flyout.Hide();
}
</span><span>private</span><span>void</span> TextBlock_Tapped(<span>object</span><span> sender, TappedRoutedEventArgs e)
{
FrameworkElement element </span>= sender <span>as</span><span> FrameworkElement;
</span><span>//</span><span> FlyoutBase.ShowAttachedFlyout(FrameworkElement flyoutOwner) - 在指定的 FrameworkElement 上显示 flyout</span><span> FlyoutBase.ShowAttachedFlyout(element);
</span><span>//</span><span> FlyoutBase.GetAttachedFlyout(FrameworkElement element) - 获取指定 FrameworkElement 上定义的 flyout</span>
FlyoutBase flyout =<span> FlyoutBase.GetAttachedFlyout(element);
</span><span>//</span><span> FlyoutBase.ShowAt(FrameworkElement placementTarget) - 在指定的 FrameworkElement 上显示指定的 flyout
</span><span>//</span><span> flyout.ShowAt(btnDemo);</span><span> }
</span><span>private</span><span>void</span> Flyout_Opening(<span>object</span> sender, <span>object</span><span> e)
{
lblMsg.Text </span>= <span>"</span><span>Flyout 打开中</span><span>"</span><span>;
}
</span><span>private</span><span>void</span> Flyout_Opened(<span>object</span> sender, <span>object</span><span> e)
{
lblMsg.Text </span>= <span>"</span><span>Flyout 已打开</span><span>"</span><span>;
}
</span><span>private</span><span>void</span> Flyout_Closed(<span>object</span> sender, <span>object</span><span> e)
{
lblMsg.Text </span>= <span>"</span><span>Flyout 已关闭</span><span>"</span><span>;
}
}
}</span>
2、演示 MenuFlyout 的应用
MenuFlyoutDemo.xaml
<span><</span><span>Page
</span><span>x:Class</span><span>="Windows81.Controls.MenuFlyoutDemo"</span><span>
xmlns</span><span>="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span><span>
xmlns:x</span><span>="http://schemas.microsoft.com/winfx/2006/xaml"</span><span>
xmlns:local</span><span>="using:Windows81.Controls"</span><span>
xmlns:d</span><span>="http://schemas.microsoft.com/expression/blend/2008"</span><span>
xmlns:mc</span><span>="http://schemas.openxmlformats.org/markup-compatibility/2006"</span><span>
mc:Ignorable</span><span>="d"</span><span>></span><span><</span><span>Grid </span><span>Background</span><span>="Transparent"</span><span>></span><span><</span><span>StackPanel </span><span>Margin</span><span>="120 0 0 0"</span><span>></span><span><</span><span>TextBlock </span><span>Name</span><span>="lblMsg"</span><span> FontSize</span><span>="14.667"</span><span>/></span><span><</span><span>Button </span><span>Content</span><span>="Options"</span><span> Margin</span><span>="0 20 0 0"</span><span>></span><span><</span><span>Button.Flyout</span><span>></span><span><!--</span><span>
MenuFlyout - MenuFlyout 控件
Items - MenuFlyout 中包含的 item（MenuFlyoutItem, ToggleMenuFlyoutItem, MenuFlyoutSeparator）
</span><span>--></span><span><</span><span>MenuFlyout</span><span>></span><span><!--</span><span>
MenuFlyoutItem - MenuFlyout 中的 item
ToggleMenuFlyoutItem - MenuFlyout 中的可以 toggle 的 item
MenuFlyoutSeparator - MenuFlyout 中的分隔符
</span><span>--></span><span><</span><span>MenuFlyoutItem </span><span>Text</span><span>="MenuFlyoutItem"</span><span> Click</span><span>="MenuFlyoutItem_Click"</span><span>/></span><span><</span><span>MenuFlyoutSeparator</span><span>/></span><span><</span><span>ToggleMenuFlyoutItem </span><span>Text</span><span>="ToggleMenuFlyoutItem1"</span><span> IsChecked</span><span>="True"</span><span>/></span><span><</span><span>ToggleMenuFlyoutItem </span><span>Text</span><span>="ToggleMenuFlyoutItem2"</span><span> IsChecked</span><span>="True"</span><span>/></span><span><!--</span><span>
MenuFlyout.MenuFlyoutPresenterStyle - 用于定义 MenuFlyout 的显示样式
</span><span>--></span><span><</span><span>MenuFlyout.MenuFlyoutPresenterStyle</span><span>></span><span><</span><span>Style </span><span>TargetType</span><span>="MenuFlyoutPresenter"</span><span>></span><span><</span><span>Setter </span><span>Property</span><span>="BorderBrush"</span><span> Value</span><span>="Red"</span><span>/></span><span><</span><span>Setter </span><span>Property</span><span>="BorderThickness"</span><span> Value</span><span>="5"</span><span>/></span><span></</span><span>Style</span><span>></span><span></</span><span>MenuFlyout.MenuFlyoutPresenterStyle</span><span>></span><span></</span><span>MenuFlyout</span><span>></span><span></</span><span>Button.Flyout</span><span>></span><span></</span><span>Button</span><span>></span><span></</span><span>StackPanel</span><span>></span><span></</span><span>Grid</span><span>></span><span></</span><span>Page</span><span>></span>MenuFlyoutDemo.xaml.cs
<span>/*</span><span>
* MenuFlyout - 菜单 Flyout 控件（点击 Flyout 外部的话，Flyout 会自动关闭），继承自 FlyoutBase
</span><span>*/</span><span>using</span><span> Windows.UI.Xaml.Controls;
</span><span>namespace</span><span> Windows81.Controls
{
</span><span>public</span><span>sealed</span><span>partial</span><span>class</span><span> MenuFlyoutDemo : Page
{
</span><span>public</span><span> MenuFlyoutDemo()
{
</span><span>this</span><span>.InitializeComponent();
}
</span><span>private</span><span>void</span> MenuFlyoutItem_Click(<span>object</span><span> sender, Windows.UI.Xaml.RoutedEventArgs e)
{
lblMsg.Text </span>= <span>"</span><span>MenuFlyoutItem 被 click 了</span><span>"</span><span>;
}
}
}</span>
3、演示 SettingsFlyout 的应用
SettingsFlyout/SettingsFlyout1.xaml
<span><</span><span>SettingsFlyout
</span><span>x:Class</span><span>="Windows81.Controls.SettingsFlyout.SettingsFlyout1"</span><span>
xmlns</span><span>="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span><span>
xmlns:x</span><span>="http://schemas.microsoft.com/winfx/2006/xaml"</span><span>
xmlns:local</span><span>="using:Windows81.Controls.SettingsFlyout"</span><span>
xmlns:d</span><span>="http://schemas.microsoft.com/expression/blend/2008"</span><span>
xmlns:mc</span><span>="http://schemas.openxmlformats.org/markup-compatibility/2006"</span><span>
mc:Ignorable</span><span>="d"</span><span>
Title</span><span>="SettingsFlyout 1"</span><span>
IconSource</span><span>="/Assets/SmallLogo.png"</span><span>
HeaderForeground</span><span>="White"</span><span>
HeaderBackground</span><span>="#00b2f0"</span><span>
Background</span><span>="White"</span><span>></span><span><!--</span><span>
SettingsFlyout - 设置面板（本例是通过 SettingsFlyout 模板创建的）
Title - 标题
IconSource - 图标（在标题右侧）
HeaderForeground - header 的前景色
HeaderBackground - header 的背景色
Background - 设置面板的背景
</span><span>--></span><span><!--</span><span> 此 StackPanel 充当内容部分的垂直布局的根面板</span><span>--></span><span><</span><span>StackPanel </span><span>VerticalAlignment</span><span>="Stretch"</span><span> HorizontalAlignment</span><span>="Stretch"</span><span>></span><span><!--</span><span> 下列 StackPanel 定义个别内容部分</span><span>--></span><span><!--</span><span> 第 1 部分内容</span><span>--></span><span><</span><span>StackPanel </span><span>Style</span><span>="</span><span>{StaticResource SettingsFlyoutSectionStyle}</span><span>"</span><span>></span><span><!--</span><span> 第 1 部分标题</span><span>--></span><span><</span><span>TextBlock </span><span>Style</span><span>="</span><span>{StaticResource TitleTextBlockStyle}</span><span>"</span><span> Text</span><span>="Lorem ipsum"</span><span>/></span><span><!--</span><span> 第 1 部分正文</span><span>--></span><span><</span><span>TextBlock </span><span>Style</span><span>="</span><span>{StaticResource BodyTextBlockStyle}</span><span>"</span><span> Margin</span><span>="0,0,0,25"</span><span> TextWrapping</span><span>="Wrap"</span><span>></span><span><</span><span>TextBlock.Text</span><span>></span><span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span><span></</span><span>TextBlock.Text</span><span>></span><span></</span><span>TextBlock</span><span>></span><span></</span><span>StackPanel</span><span>></span><span><!--</span><span> 根据需要在下面定义更多内容部分</span><span>--></span><span></</span><span>StackPanel</span><span>></span><span></</span><span>SettingsFlyout</span><span>></span>SettingsFlyout/Demo.xaml
<span><</span><span>Page
</span><span>x:Class</span><span>="Windows81.Controls.SettingsFlyout.Demo"</span><span>
xmlns</span><span>="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span><span>
xmlns:x</span><span>="http://schemas.microsoft.com/winfx/2006/xaml"</span><span>
xmlns:local</span><span>="using:Windows81.Controls.SettingsFlyout"</span><span>
xmlns:d</span><span>="http://schemas.microsoft.com/expression/blend/2008"</span><span>
xmlns:mc</span><span>="http://schemas.openxmlformats.org/markup-compatibility/2006"</span><span>
mc:Ignorable</span><span>="d"</span><span>></span><span><</span><span>Grid </span><span>Background</span><span>="Transparent"</span><span>></span><span><</span><span>StackPanel </span><span>Margin</span><span>="120 0 0 0"</span><span>></span><span><</span><span>Button </span><span>Name</span><span>="btnShowSettingsFlyout"</span><span> Content</span><span>="显示通过 SettingsFlyout 实现的自定义设置面板 "</span><span> Click</span><span>="btnShowSettingsFlyout_Click"</span><span>/></span><span></</span><span>StackPanel</span><span>></span><span></</span><span>Grid</span><span>></span><span></</span><span>Page</span><span>></span>SettingsFlyout/Demo.xaml.cs
<span>/*</span><span>
* SettingsFlyout - 设置面板 Flyout 控件
*
* 本例用于演示如何弹出 SettingsFlyout，实际的 SettingsFlyout 页面请参见：SettingsFlyout1.xaml
</span><span>*/</span><span>using</span><span> Windows.UI.ApplicationSettings;
</span><span>using</span><span> Windows.UI.Xaml;
</span><span>using</span><span> Windows.UI.Xaml.Controls;
</span><span>using</span><span> Windows.UI.Xaml.Navigation;
</span><span>namespace</span><span> Windows81.Controls.SettingsFlyout
{
</span><span>public</span><span>sealed</span><span>partial</span><span>class</span><span> Demo : Page
{
</span><span>public</span><span> Demo()
{
</span><span>this</span><span>.InitializeComponent();
}
</span><span>protected</span><span>override</span><span>void</span><span> OnNavigatedTo(NavigationEventArgs e)
{
SettingsPane.GetForCurrentView().CommandsRequested </span>+=<span> onCommandsRequested;
}
</span><span>protected</span><span>override</span><span>void</span><span> OnNavigatedFrom(NavigationEventArgs e)
{
SettingsPane.GetForCurrentView().CommandsRequested </span>-=<span> onCommandsRequested;
</span><span>base</span><span>.OnNavigatedFrom(e);
}
</span><span>void</span><span> onCommandsRequested(SettingsPane settingsPane, SettingsPaneCommandsRequestedEventArgs e)
{
</span><span>//</span><span> 关联到 charm 栏的设置按钮</span>
SettingsCommand myCommand = <span>new</span> SettingsCommand(<span>"</span><span>myCommand</span><span>"</span>, <span>"</span><span>SettingsFlyout 面板</span><span>"</span><span>,
(handler) </span>=><span>
{
SettingsFlyout1 sf </span>= <span>new</span><span> SettingsFlyout1();
</span><span>//</span><span> SettingsFlyout.Show() - 显示指定的 SettingsFlyout（Show - 通过 charm 栏的设置按钮弹出；ShowIndependent - 通过自己写代码的方式弹出）</span><span> sf.Show();
</span><span>//</span><span> SettingsFlyout.Hide() - 隐藏指定的 SettingsFlyout
</span><span>//</span><span> sf.Hide();</span><span> });
e.Request.ApplicationCommands.Add(myCommand);
}
</span><span>private</span><span>void</span> btnShowSettingsFlyout_Click(<span>object</span><span> sender, RoutedEventArgs e)
{
SettingsFlyout1 sf </span>= <span>new</span><span> SettingsFlyout1();
</span><span>//</span><span> 点击了 SettingsFlyout 的后退按钮时触发的事件
</span><span>//</span><span> sf.BackClick += xxx;
</span><span>//</span><span> SettingsFlyout.ShowIndependent() - 显示指定的 SettingsFlyout（ShowIndependent - 通过自己写代码的方式弹出；Show - 通过 charm 栏的设置按钮弹出）</span><span> sf.ShowIndependent();
</span><span>//</span><span> SettingsFlyout.Hide() - 隐藏指定的 SettingsFlyout
</span><span>//</span><span> sf.Hide();</span><span> }
}
}</span>
OK
[源码下载]
原文：http://www.cnblogs.com/lonelyxmas/p/3988178.html
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！