原文:
重新想象 Windows 8 Store Apps (37) - 契约: Settings Contract
重新想象 Windows 8 Store Apps (37) - 契约: Settings Contract
作者：webabcd
介绍
重新想象 Windows 8 Store Apps 之 契约
- Settings Contract - 右侧边栏称之为 Charm，其中的“设置”称之为 Settings Contract
示例
演示 Settings Contract 的应用
Contracts/SettingsContract/Demo.xaml
<Page x:Class="XamlDemo.Contracts.SettingsContract.Demo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 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="btnAddSettings" Content="注册 SettingsPane 的 CommandsRequested 事件" Click="btnAddSettings_Click_1" /> <Button Name="btnShowSettings" Content="打开 SettingsPane" Click="btnShowSettings_Click_1" Margin="0 10 0 0" /> <TextBlock Name="lblMsg" FontSize="14.667" TextWrapping="Wrap" Margin="0 10 0 0" /> </StackPanel> </Grid> </Page>
Contracts/SettingsContract/Demo.xaml.cs
/* * Settings Contract - 右侧边栏称之为 Charm，其中的“设置”称之为 Settings Contract * * SettingsPane - 设置面板 * GetForCurrentView() - 获取当前的 SettingsPane * Show() - 打开 SettingsPane * CommandsRequested - 每次打开 SettingsPane 时所触发的事件（两个类型为 SettingsPane 和 SettingsPaneCommandsRequestedEventArgs 的参数） * * UICommandInvokedHandler - 单击设置面板中的设置项时引发的事件的回调函数，是一个委托（一个类型为 IUICommand 的参数，SettingsCommand 实现了此接口） * * SettingsCommand - 设置面板中的设置项 * Id - 设置项的 ID，标识用 * Label - 设置项的名称，显示用 * Invoked - 指定单机设置项后，引发的事件的处理程序 * * SettingsPaneCommandsRequestedEventArgs - CommandsRequested 事件中的事件参数 * Request - 返回 SettingsPaneCommandsRequest 类型的数据 * * SettingsPaneCommandsRequest - 包含了 CommandsRequested 事件中的可用属性 * ApplicationCommands - SettingsCommand 集合 */ using System; using Windows.UI.ApplicationSettings; using Windows.UI.Popups; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Media.Animation; using Windows.UI.Xaml.Navigation; namespace XamlDemo.Contracts.SettingsContract { public sealed partial class Demo : Page { // 弹出自定义的详细设置页时，所用到的弹出框 private Popup _settingsPopup = new Popup(); // 是否注册了 SettingsPane 的 CommandsRequested 事件 private bool _commandsRequestedRegistered = false; public Demo() { this.InitializeComponent(); } protected override void OnNavigatedFrom(NavigationEventArgs e) { base.OnNavigatedFrom(e); // 离开此页则去掉 CommandsRequested 监听 if (this._commandsRequestedRegistered) { SettingsPane.GetForCurrentView().CommandsRequested -= onCommandsRequested; _commandsRequestedRegistered = false; } } // 添加设置项，即初始化自定义的设置项 private void btnAddSettings_Click_1(object sender, RoutedEventArgs e) { if (!_commandsRequestedRegistered) { // 注册 SettingsPane 的 CommandsRequested 事件 SettingsPane.GetForCurrentView().CommandsRequested += onCommandsRequested; _commandsRequestedRegistered = true; } else { lblMsg.Text += "已经为 SettingsPane 注册了 CommandsRequested 事件"; lblMsg.Text += Environment.NewLine; } } // 显示 SettingsPane private void btnShowSettings_Click_1(object sender, RoutedEventArgs e) { SettingsPane.Show(); } void onCommandsRequested(SettingsPane settingsPane, SettingsPaneCommandsRequestedEventArgs eventArgs) { // 初始化 SettingsPane 中的设置项 UICommandInvokedHandler handler = new UICommandInvokedHandler(onSettingsCommand); SettingsCommand aboutCommand = new SettingsCommand("about", "关于", handler); eventArgs.Request.ApplicationCommands.Add(aboutCommand); SettingsCommand contactCommand = new SettingsCommand("contactUs", "联系我们", handler); eventArgs.Request.ApplicationCommands.Add(contactCommand); SettingsCommand flyoutCommand = new SettingsCommand("flyout", "弹出一个类“设置”风格的详细设置页", handler); eventArgs.Request.ApplicationCommands.Add(flyoutCommand); } // 响应 SettingsPane 中的各个自定义设置项的命令 void onSettingsCommand(IUICommand command) { SettingsCommand settingsCommand = (SettingsCommand)command; lblMsg.Text += string.Format("commandId:{0} - label:{1}", settingsCommand.Id.ToString(), settingsCommand.Label); lblMsg.Text += Environment.NewLine; // 通过 SettingsCommand.Id 来判断用户单机了哪个设置项 if (settingsCommand.Id.ToString() == "flyout") { // 详细设置页的宽度 double settingsPageWidth = 600; // 设置用于携带详细设置页的 Popup 的基本属性 _settingsPopup.IsLightDismissEnabled = true; _settingsPopup.Width = settingsPageWidth; _settingsPopup.Height = Window.Current.Bounds.Height; // 为弹出框增加 PaneThemeTransition 的效果 _settingsPopup.ChildTransitions = new TransitionCollection(); _settingsPopup.ChildTransitions.Add(new PaneThemeTransition() { Edge = EdgeTransitionLocation.Right }); // 实例化自定义的详细设置页，并将其放到 Popup 内 CustomSettingsPage mySettingsPage = new CustomSettingsPage(); mySettingsPage.Width = settingsPageWidth; mySettingsPage.Height = Window.Current.Bounds.Height; _settingsPopup.Child = mySettingsPage; // 指定 Popup 的显示位置 _settingsPopup.HorizontalOffset = Window.Current.Bounds.Width - settingsPageWidth; _settingsPopup.VerticalOffset = 0; _settingsPopup.IsOpen = true; } } } }
自定义的详细设置页
Contracts/SettingsContract/CustomSettingsPage.xaml
<Page x:Class="XamlDemo.Contracts.SettingsContract.CustomSettingsPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Contracts.SettingsContract" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources> <!-- 详细设置页的左上角的返回按钮的样式 --> <Style x:Key="SettingsBackButtonStyle" TargetType="Button"> <Setter Property="MinWidth" Value="0"/> <Setter Property="FontFamily" Value="Segoe UI Symbol"/> <Setter Property="FontWeight" Value="Normal"/> <Setter Property="FontSize" Value="26.66667"/> <Setter Property="AutomationProperties.AutomationId" Value="BackButton"/> <Setter Property="AutomationProperties.Name" Value="Back"/> <Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid x:Name="RootGrid" Width="30" Height="30"> <Grid Margin="-6,-6,0,0"> <TextBlock x:Name="BackgroundGlyph" Text="" Foreground="Transparent"/> <TextBlock x:Name="NormalGlyph" Text="{StaticResource BackButtonSnappedGlyph}" Foreground="White"/> <TextBlock x:Name="ArrowGlyph" Text="" Foreground="#00b2f0" Opacity="0"/> </Grid> <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeEndLineCap="Square" StrokeDashArray="1,1" Opacity="0" StrokeDashOffset="1.5" /> <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeEndLineCap="Square" StrokeDashArray="1,1" Opacity="0" StrokeDashOffset="0.5" /> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="PointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BackButtonPointerOverBackgroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="White"/> </ObjectAnimationUsingKeyFrames> <DoubleAnimation Storyboard.TargetName="ArrowGlyph" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/> <DoubleAnimation Storyboard.TargetName="NormalGlyph" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"> <Storyboard> <DoubleAnimation Storyboard.TargetName="FocusVisualWhite" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/> <DoubleAnimation Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/> </Storyboard> </VisualState> <VisualState x:Name="Unfocused" /> <VisualState x:Name="PointerFocused" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Page.Resources> <Grid Background="Transparent" Name="root"> <Border BorderBrush="Red" BorderThickness="1,0,0,0"> <Grid Background="White"> <Grid.RowDefinitions> <RowDefinition Height="80"/> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid Background="#00b2f0" Grid.Row="0"> <StackPanel Orientation="Horizontal" Margin="40, 32, 17, 13"> <!--返回按钮--> <Button Name="btnBack" Click="btnBack_Click_1" Margin="0,3,0,0" Style="{StaticResource SettingsBackButtonStyle}"/> <!--详细设置页的标题--> <TextBlock Margin="10,0,0,0" FontFamily="Segoe UI" FontWeight="SemiLight" FontSize="24.6667" Text="Defaults" Foreground="White"/> </StackPanel> </Grid> <ScrollViewer Grid.Row="1"> <!--详细设置页内的全部内容--> <StackPanel> <!--为详细设置页内的内容增加 EntranceThemeTransition 效果--> <StackPanel.ChildrenTransitions> <TransitionCollection> <PaneThemeTransition Edge="Right" /> </TransitionCollection> </StackPanel.ChildrenTransitions> <TextBlock FontSize="56" Foreground="Black" LineHeight="100"> <Run>设置1</Run> <LineBreak /> <Run>设置2</Run> <LineBreak /> <Run>设置3</Run> <LineBreak /> <Run>设置4</Run> <LineBreak /> <Run>设置5</Run> <LineBreak /> <Run>设置6</Run> <LineBreak /> <Run>设置7</Run> <LineBreak /> <Run>设置8</Run> <LineBreak /> <Run>设置9</Run> </TextBlock> </StackPanel> </ScrollViewer> </Grid> </Border> </Grid> </Page>
Contracts/SettingsContract/CustomSettingsPage.xaml.cs
/* * 自定义的详细设置页 */ using Windows.UI.ApplicationSettings; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Media.Animation; using Windows.UI.Xaml.Navigation; namespace XamlDemo.Contracts.SettingsContract { public sealed partial class CustomSettingsPage : Page { public CustomSettingsPage() { this.InitializeComponent(); } private void btnBack_Click_1(object sender, RoutedEventArgs e) { // 详细设置页的容器是 Popup，找到这个 Popup 并关闭它，从而关闭详细设置页 Popup parent = this.Parent as Popup; if (parent != null) { parent.IsOpen = false; } // 显示设置面板 if (Windows.UI.ViewManagement.ApplicationView.Value != Windows.UI.ViewManagement.ApplicationViewState.Snapped) { SettingsPane.Show(); } } } }
OK
[源码下载]
