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

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