03、ApplicationSettings Of win8
应用的 “设置” 功能是很重要的。首先当用户运行你的应用的时候，会在设置页面中看到你的应用都使用了
哪些系统的功能。另外，你需要把你应用的 “设置面板”中，添加 “隐私声明”，当用户点击 “隐私声明” 可以跳转
到网站的 “隐私声明页面”，否则你的应用在提交到商店时是会被打回来的。我就是个血淋淋的例子，因为没添加
隐私声明等问题，就被 win8 的商店打回来了。下面 1、 中有描述。
错误报告的 部分 描述：
B:: The app has declared access tonetwork capabilities and no privacy statement was provided
in the Description page. C:: The app has declaredaccess to network capabilities and no privacy
statement was provided in the Windows Settings Charm.
具体来说就是： 你的应用不符合要求 4.1。
Windows 8 应用认证要求 (Windows) ： http://msdn.microsoft.com/zh-CN/library/windows/apps/hh694083.aspx
//设置 API 类 namespace Windows.UI.ApplicationSettings { // 启动应用程序控制“设置魅力”窗格的静态类。在用户打开窗体或以编程方式打开窗体时，应用程序可以添加或移除命令，可以接收通知。 public sealed class SettingsPane { public static SettingsEdgeLocation Edge { get; } // 在用户打开设置窗格时发生。侦听此事件使该应用程序初始化设置命令和暂停其自己的 UI，直到用户关闭窗格。 public event TypedEventHandler<SettingsPane, SettingsPaneCommandsRequestedEventArgs> CommandsRequested; // 获取与当前应用程序视图相关联的 SettingsPane 对象。 // 返回结果: 设置窗格。 public static SettingsPane GetForCurrentView();
// 向用户显示“设置魅力”窗格。 public static void Show(); } }
注：为了确保你的应用随时响应 CommandsRequested 事件委托，你需要在 App.xaml.cs 文件中重写 OnWindowCreated 方法。
//在 App.xaml.cs 中
protected override void OnWindowCreated(WindowCreatedEventArgs args) { //把你的 CommandsRequested 事件委托放在这里，以便确保 //你的设置在应用的生命周期里面都可以响应 }
1、Default behavior with no settings integration（集成）：
显示当前应用的 Settings 窗口：
用右手在平板的右侧滑动，或者用移动鼠标到屏幕右侧上或下角，然后选择 Settings 按钮，或者快捷方式 win键 + i 。
隐藏该窗口：
轻扫屏幕其它部分，右键单击屏幕，或者启动它窗口或应用。
注意到设置面板中的内容，选择这个 “Permissions” 链接，看到从该应用包的清单文件中
提取到的清单信息中包含的应用的功能信息。注意，你只需要声明你的应用使用到的信息。
这个示例只包含描述信息，没有代码实例。
操作截图：
1）首先在你的应用的清单中，勾选需要的系统功能：
2）在本应用处于打开状态时，点击 “超级按钮” 上面的 “设置” 按钮，弹出来本应用的 “设置面板”：
3）点击 “权限”：
2、Add settings commands to the settings charm ：
本实例讲解向 “设置” 的命令中添加两个命令 “General” 和 “Help”。
操作截图：
点击按钮后，当打开设置面板， “General” 和 “Help” 已经添加进去了：
点击 “General” 命令“，显示执行结果：
点击 “Help” 命令，显示执行结果:
页面中的 XAML ：
<!--添加命令--> <Button x:Name="addSettingsScenarioAdd" Content="Add settings commands" Click="addSettingsScenarioAdd_Click"/> <!--显示结果--> <TextBlock x:Name="StatusBlock" />
对应的 C# ：
当导航到该页面时：
protected override void OnNavigatedFrom(NavigationEventArgs e) { base.OnNavigatedFrom(e); //首先清除 CommandsRequested 事件，避免在其他实例中已经注册的事件 if (this.isEventRegistered) { SettingsPane.GetForCurrentView().CommandsRequested -= onCommandsRequested; this.isEventRegistered = false; } }
按钮的单击事件：
//确保只注册一次 bool isEventRegistered; void addSettingsScenarioAdd_Click(object sender, RoutedEventArgs e) { Button b = sender as Button; if (b != null) { if (!this.isEventRegistered) { //侦听该事件，使应用初始化设置命令，并且暂停自己的 UI 响应用户 //直到用户关闭 “设置面板” //为了确保你的应用随时响应 CommandsRequested 事件委托，你 //需要在 App.xaml.cs 文件中重写 OnWindowCreated 方法。 SettingsPane.GetForCurrentView().CommandsRequested += onCommandsRequested; this.isEventRegistered = true; } } }
//使该应用程序初始化设置命令和暂停其自己的 UI，直到用户关闭窗格。 // eventArgs : 包含在 CommandsRequested 事件期间从事件对象可用的参数。 void onCommandsRequested(SettingsPane settingsPane, SettingsPaneCommandsRequestedEventArgs eventArgs) { //表示处理在用户调用上下文菜单命令时引发的事件的回调函数。 UICommandInvokedHandler handler = new UICommandInvokedHandler(onSettingsCommand); //创建表示设置项的设置命令对象。此设置命令可追加到 ApplicationCommands 矢量。 SettingsCommand generalCommand = new SettingsCommand("generalSettings", "General", handler); //追加 SettingsCommand 对象，使这些对象可供 SettingsPane UI 使用。 eventArgs.Request.ApplicationCommands.Add(generalCommand); //public SettingsCommand(object settingsCommandId, string label, UICommandInvokedHandler handler) : // 创建新的设置命令。 // settingsCommandId: 命令的 ID。 // label: 在设置窗格中显示的命令标签。 // handler: 用户在设置窗体中选择此命令时调用的事件处理程序。 SettingsCommand helpCommand = new SettingsCommand("helpPage", "Help", handler); eventArgs.Request.ApplicationCommands.Add(helpCommand); } //当命令调用时 void onSettingsCommand(IUICommand command) { SettingsCommand settingsCommand = (SettingsCommand)command; StatusBlock.Text = "You selected the " + settingsCommand.Label +
" settings command which originated from the " + SettingsPane.Edge.ToString(); }
3、Create a settings flyout linked to the settings charm ：
设置魅力提供了一个快速单一访问点,所有相关的设置显示在用户当前的上下文。从设置面板弹出一个
公开的应用程序设置面板（ flyout）可以提供一个完整、流畅的设置体验。
本实例添加一个 “Default” 设置命令，并且演示如何用 XAML 实现所需的设置面板的飞出。
操作截图：
点击按钮，添加 “Default” 命令，然后弹出设置面板：
点击 “Default” 命令，弹出自定义的设置面板：
触发添加 “Default” 命令的按钮页面：
相应的 xaml ：
<!--添加 “Default ” 命令--> <Button x:Name="addSettingsScenarioAdd" Content="Add settings commands" Click="addSettingsScenarioAdd_Click"/>
相应的 C# ：
// CodeBehind 页面 public sealed partial class SettingsFlyoutScenario : SDKTemplate.Common.LayoutAwarePage { //确保 “Default” 命令只注册一次 private bool isEventRegistered; //用来保存当前窗口的 高度，来保证用户自定义界面填满窗口 private Rect windowBounds;
//确定 “设置页面” 的高度。根据 UI 的指导，你可以根据需要 //设置为 346 或者 646 private double settingsWidth = 646; //使用一个 Popup 对象，来承载 我们的自定义内容 private Popup settingsPopup; public SettingsFlyoutScenario() { this.InitializeComponent(); windowBounds = Window.Current.Bounds; //侦听当前窗口尺寸更改事件 Window.Current.SizeChanged += OnWindowSizeChanged; } Windows.UI.Core.WindowSizeChangedEventArgs e) { windowBounds = Window.Current.Bounds; } //当 “当前页面” 在一个 Frame 中显示时调用 protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); } //当导航离开时，解注册事件 protected override void OnNavigatedFrom(NavigationEventArgs e) { base.OnNavigatedFrom(e); //清空在本示例中，为当前视图注册的 CommandsRequested 事件 if (this.isEventRegistered) { SettingsPane.GetForCurrentView().CommandsRequested -= onCommandsRequested; this.isEventRegistered = false; } //解注册窗口尺寸改变事件 Window.Current.SizeChanged -= OnWindowSizeChanged; } // 'addSettingsScenarioAdd' 按钮的单击事件，向 //SettignsPane.CommandsRequested 事件中注册侦听事件 void addSettingsScenarioAdd_Click(object sender, RoutedEventArgs e) { Button b = sender as Button; if (b != null) { if (!this.isEventRegistered) { SettingsPane.GetForCurrentView().CommandsRequested += onCommandsRequested; this.isEventRegistered = true; } } } // "Default" 命令的事件委托，用来添加 “设置”对话框。 //我们使用一个 Popup 对象来承载我们的设置内容， //因为使用 Popup ，当我们单击其它的 UI 元素时， //给我们一个 “light dismiss” 体验。 void onSettingsCommand(IUICommand command) { //初始化 Popup 对象 settingsPopup = new Popup(); settingsPopup.Closed += OnPopupClosed; Window.Current.Activated += OnWindowActivated; settingsPopup.IsLightDismissEnabled = true; settingsPopup.Width = settingsWidth; settingsPopup.Height = windowBounds.Height; //为这个面板添加一个想要的动画效果 settingsPopup.ChildTransitions = new TransitionCollection(); settingsPopup.ChildTransitions.Add(new PaneThemeTransition()
{ Edge = (SettingsPane.Edge == SettingsEdgeLocation.Right) ?
EdgeTransitionLocation.Right : EdgeTransitionLocation.Left}); //创建一个 SettingsFlyout 对象 SettingsFlyout mypane = new SettingsFlyout(); mypane.Width = settingsWidth; mypane.Height = windowBounds.Height; // 把我们的 mypane 添加到上面的 Popup 对象中 settingsPopup.Child = mypane; // 设置这个 Popup 对象 的位置 settingsPopup.SetValue(Canvas.LeftProperty, SettingsPane.Edge == SettingsEdgeLocation.Right
? (windowBounds.Width - settingsWidth) : 0); settingsPopup.SetValue(Canvas.TopProperty, 0); //打开面板 settingsPopup.IsOpen = true; } //当用户打开设置面板时触发，把 SettingsCommands 对象追加 //到 ApplicationCommands 向量中，确保对于 SettingsPage UI 可用 void onCommandsRequested(SettingsPane settingsPane, SettingsPaneCommandsRequestedEventArgs eventArgs) { UICommandInvokedHandler handler = new UICommandInvokedHandler(onSettingsCommand); SettingsCommand generalCommand = new SettingsCommand("DefaultsId", "Defaults", handler); eventArgs.Request.ApplicationCommands.Add(generalCommand); } //在 Windows 的 activated 事件中，强制关闭 Popup 对象，因为 //用户可能不经意间触发隐藏操作 private void OnWindowActivated(object sender, Windows.UI.Core.WindowActivatedEventArgs e) { if (e.WindowActivationState == Windows.UI.Core.CoreWindowActivationState.Deactivated) { settingsPopup.IsOpen = false; } } //当 Popup 对象关闭时，我们不需要侦听 activation 的更改事件 void OnPopupClosed(object sender, object e) { Window.Current.Activated -= OnWindowActivated; } }
自定义的 “设置页面” （SettingsFlyout），这部分代码比较容易看懂，不解释：
页面的 XAML ：
View Code
<common:LayoutAwarePage x:Class="ApplicationSettings.SettingsFlyout" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:ApplicationSettings" xmlns:common="using:SDKTemplate.Common" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="646"> <UserControl.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> </UserControl.Resources> <Border BorderBrush="#00b2f0" BorderThickness="1,0,0,0"> <Grid Background="White" VerticalAlignment="Stretch"> <!-- Root grid definition --> <Grid.RowDefinitions> <RowDefinition Height="80"/> <RowDefinition Height="*" /> </Grid.RowDefinitions> <!-- Header area for panel --> <Grid Background="#00b2f0" Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <StackPanel Orientation="Horizontal" Grid.Column="0" Margin="40, 32, 17, 13"> <Button Click="MySettingsBackClicked" 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"/> <Image Source="Assets/smalltile-sdk.png" Margin="400,0,6,0"/> </StackPanel> </Grid> <!-- Settings Panel Content --> <ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1"> <Grid Margin="40,33,40,39" VerticalAlignment="Top" Grid.RowSpan="3"> <StackPanel x:Name="FlyoutContent"> <TextBlock FontWeight="Bold" Text="Toggle Switch" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/> <TextBlock Text="Use toggle switches to let users set Boolean values." TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/> <ToggleSwitch Margin="-6,25, 0, 0" Header = "Download updates automatically" HorizontalAlignment="Left" HorizontalContentAlignment="Left"/> <ToggleSwitch Margin="-6, 0, 0, 0" Header = "Install updates automatically" HorizontalAlignment="Stretch"/> <StackPanel Margin="0, 39, 0, 0"> <TextBlock FontWeight="Bold" Text="Push button" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/> <TextBlock Text="With a push button, users initiate an immediate action." TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/> <TextBlock Margin="0, 25, 0, 0" Text="Button label" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/> <Button Margin="-3, 0, 0, 0" Content="Clear" Click="FlyoutButton_Click"/> </StackPanel> <StackPanel Margin="0, 39, 0, 0"> <TextBlock FontWeight="Bold" Text="Select control" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/> <TextBlock Text="Use the select control to allow users to select one item from a set of text-only items." TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/> <TextBlock Margin="0,25, 0, 0" Text="State:" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/> <ComboBox Margin="0,7, 0, 0" SelectedIndex="0" HorizontalAlignment="Left"> <ComboBoxItem Content="Washington"/> <ComboBoxItem Content="Oregon"/> <ComboBoxItem Content="California"/> </ComboBox> </StackPanel> <StackPanel Margin="0, 39, 0, 0"> <TextBlock FontWeight="Bold" Text="Hyperlink" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/> <TextBlock Text="Use a hyperlink when the associated action will take the user out of this flyout." TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/> <HyperlinkButton Padding="-5,0,0,0" Margin="0, 25, 0, 0" Content="View privacy statement" Tag="http://privacy.microsoft.com" HorizontalAlignment="Left"/> </StackPanel> <StackPanel Margin="0, 39, 0, 0"> <TextBlock FontWeight="Bold" Text="Text input box" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/> <TextBlock Text="Use a text input box to allow users to enter text. Set the type of the text input box according to the type of text you are capturing from the user (e.g. email or password)." TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/> <TextBlock Margin="0,25, 0, 0" Text="Email account" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/> <StackPanel Margin="0, 7, 0, 0" Orientation="Horizontal"> <TextBox HorizontalAlignment="Left" Width="300"/> <Button Margin="20,0, 0, 0" Content="Add" Click="FlyoutButton_Click"/> </StackPanel> </StackPanel> <StackPanel Margin="0, 39, 0, 0"> <TextBlock FontWeight="Bold" Text="Radio button group" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/> <TextBlock Text="Lets users choose one item from a small set of mutually exclusive, related options." TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/> <TextBlock Margin="0,25, 0, 0" Text="Video quality" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/> <RadioButton Margin="0, 7, 0, 0" Content="High"/> <RadioButton Margin="0, 17, 0, 0" Content="Medium"/> <RadioButton Margin="0, 17, 0, 0" Content="Low"/> </StackPanel> </StackPanel> </Grid> </ScrollViewer> </Grid> </Border> </common:LayoutAwarePage>
相应的 C# ：
View Code
namespace ApplicationSettings { /// <summary> /// An empty page that can be used on its own or navigated to within a Frame. /// </summary> public sealed partial class SettingsFlyout : SDKTemplate.Common.LayoutAwarePage { // The guidelines recommend using 100px offset for the content animation. const int ContentAnimationOffset = 100; // A pointer back to the main page. This is needed if you want to call methods in MainPage such // as NotifyUser() MainPage rootPage = MainPage.Current; public SettingsFlyout() { this.InitializeComponent(); FlyoutContent.Transitions = new TransitionCollection(); FlyoutContent.Transitions.Add(new EntranceThemeTransition() { FromHorizontalOffset = (SettingsPane.Edge == SettingsEdgeLocation.Right) ? ContentAnimationOffset : (ContentAnimationOffset * -1) }); } /// <summary> /// This is the click handler for the back button on the Flyout. /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void MySettingsBackClicked(object sender, RoutedEventArgs e) { // First close our Flyout. Popup parent = this.Parent as Popup; if (parent != null) { parent.IsOpen = false; } // If the app is not snapped, then the back button shows the Settings pane again. if (Windows.UI.ViewManagement.ApplicationView.Value != Windows.UI.ViewManagement.ApplicationViewState.Snapped) { SettingsPane.Show(); } } /// <summary> /// This is the a common click handler for the buttons on the Flyout. You would replace this with your own handler /// if you have a button or buttons on this page. /// </summary> /// <param name="sender"></param> /// <param name="e"></param> void FlyoutButton_Click(object sender, RoutedEventArgs e) { Button b = sender as Button; if (b != null) { rootPage.NotifyUser("You selected the " + b.Content + " button", NotifyType.StatusMessage); } } } }
