新时尚Windows8开发（19）：为应用程序定义“设置”面板

我们随便打开一个应用，只要应用的开发者为其应用定义了“设置”的内容，我们就会看到类似下面截图的UI。

 

这说明了什么呢？说明了在Win8中，你的应用程序设置可以集成到系统的侧边栏中。既然可以实现这样的整合，那么SDK中可定提供了相应的API的，对滴，很好找，而且，要用一的东西基本上都在同一个命名空间下。

类不是很多，至少可以说明，一来实现这个功能并不难，二来它们之间的关系也比较好找。

这些类之间是啥关系呢，我大概画了一个示意图。

 

很显然，都是以SettingsPane为核心的。首先，如果要通过代码显示设置面板，就可以调用静态的Show方法。

下面，我们通实例来验证一下。

1、启动可爱的VS，新建一个空白页面项目。

2、打开MainPage.xaml，我们需要一个按钮，当点击按钮时，显示设置面板。

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">        <StackPanel Orientation="Vertical">            <Button Margin="13,27,0,12" Content="显示设置面板" Click="onShowSettings"/>        </StackPanel>    </Grid>

代码很简单，你可能会问，为啥要弄个StackPanel？呵呵，先放着，后文我们要对这个布局进行扩展。

3、进入到代码视图，我们还要完成onShowSettings事件处理程序。

        private void onShowSettings(object sender, RoutedEventArgs e)        {            // 显示设置面板            Windows.UI.ApplicationSettings.SettingsPane.Show();        }

接着，在MainPage类的构造函数中加入以下代码，

        public MainPage()        {            this.InitializeComponent();            // 我们将为设置面板添加三个命令            // 分别为 首选项，用户反馈，关于            Windows.UI.ApplicationSettings.SettingsCommand cmd1 = new Windows.UI.ApplicationSettings.SettingsCommand("1", "首选项", c => { });            Windows.UI.ApplicationSettings.SettingsCommand cmd2 = new Windows.UI.ApplicationSettings.SettingsCommand("2", "用户反馈", c => { });            Windows.UI.ApplicationSettings.SettingsCommand cmd3 = new Windows.UI.ApplicationSettings.SettingsCommand("3", "关于本应用", c => { });            // 命令是在CommandsRequested事件中添加的            Windows.UI.ApplicationSettings.SettingsPane.GetForCurrentView().CommandsRequested += (sp, arg) =>            {                arg.Request.ApplicationCommands.Add(cmd1);                arg.Request.ApplicationCommands.Add(cmd2);                arg.Request.ApplicationCommands.Add(cmd3);            };        }

上面代码中，我们加入了三个命令，命令对象就是SettingsCommand实例，我们调用了它的构造函数。

public SettingsCommand(object settingsCommandId, string label, UICommandInvokedHandler handler);

第一个参数是命令的唯一ID，这个东西要记住是唯一的，就像我们的身份证号码一样，是什么样的唯一法呢？就是在当前应用程序的设置面板中是唯一的；

参数二是一个字符串，就是我们要在命令上显示的文本；第三个参数你能猜到了，当估是回调的委托了，只要我们的命令绑定一个委托，那么当用户选择了哪个命令，我们的程序可以作出相应的反馈。

 

这时候，我们把程序运行一下，运行后，点击那个按钮，你就能看到如下图所示的东西。

 

那么，如果不是代码显示，而是用户自己操作呢？那更简单，直接把那页面中的按钮和onShowSettings方法直接删掉，再运行。

把鼠标移到屏幕的右上角或右下角，出现侧边栏，接着选“设置”，你依然能看到神奇的一幕。

 

 

好的，我们继续，现在，又回到MainPage.xaml，把刚才的XAML改一下。

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">        <StackPanel Orientation="Vertical">            <Rectangle x:Name="rectA" Width="200" Height="80" Fill="Blue" Visibility="Collapsed"/>            <Rectangle x:Name="rectB" Width="200" Height="80" Fill="Yellow" Visibility="Collapsed"/>            <Rectangle x:Name="rectC" Width="200" Height="80" Fill="Pink" Visibility="Collapsed"/>        </StackPanel>    </Grid>

然后，在MainPage类的构造函数中，为刚才那三个命令实现回调委托，这样当用户选择了不同的命令，就会对应显示不同颜色的矩形。

        public MainPage()        {            this.InitializeComponent();            // 我们将为设置面板添加三个命令            // 分别为 首选项，用户反馈，关于            Windows.UI.ApplicationSettings.SettingsCommand cmd1 = new Windows.UI.ApplicationSettings.SettingsCommand("1", "首选项", c =>            {                this.rectA.Visibility = Windows.UI.Xaml.Visibility.Visible;                this.rectB.Visibility = Windows.UI.Xaml.Visibility.Collapsed;                this.rectC.Visibility = Windows.UI.Xaml.Visibility.Collapsed;            });            Windows.UI.ApplicationSettings.SettingsCommand cmd2 = new Windows.UI.ApplicationSettings.SettingsCommand("2", "用户反馈", c =>            {                this.rectA.Visibility = Windows.UI.Xaml.Visibility.Collapsed;                this.rectB.Visibility = Windows.UI.Xaml.Visibility.Visible;                this.rectC.Visibility = Windows.UI.Xaml.Visibility.Collapsed;            });            Windows.UI.ApplicationSettings.SettingsCommand cmd3 = new Windows.UI.ApplicationSettings.SettingsCommand("3", "关于本应用", c =>            {                this.rectA.Visibility = Windows.UI.Xaml.Visibility.Collapsed;                this.rectB.Visibility = Windows.UI.Xaml.Visibility.Collapsed;                this.rectC.Visibility = Windows.UI.Xaml.Visibility.Visible;            });            // 命令是在CommandsRequested事件中添加的            Windows.UI.ApplicationSettings.SettingsPane.GetForCurrentView().CommandsRequested += (sp, arg) =>            {                arg.Request.ApplicationCommands.Add(cmd1);                arg.Request.ApplicationCommands.Add(cmd2);                arg.Request.ApplicationCommands.Add(cmd3);            };        }

现在运行程序，应该可以达到以下效果。

 

 

上面的料还不够猛，下面我们来弄点更猛的。

看看下面的自定义面板，在设置选项中，当用户选择了“首选项”时，就会弹出自定义的面板，如果点击面板上的后退按钮，则又回到设置面板，就像“邮件”应用的帐号设置面板一样。

 

实现方法如下。

1、在刚才的项目中新建一个用户控件，命名嘛，你自己决定。

2、XAML如下所示。

<UserControl    x:Class="设置面板.MyUC"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:设置面板"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d"    d:DesignHeight="900"    d:DesignWidth="400">        <Grid Background="#FF066A06">        <Grid.RowDefinitions>            <RowDefinition Height="auto"/>            <RowDefinition Height="*"/>        </Grid.RowDefinitions>        <Border Grid.Row="0" Background="#FF4F0330">            <StackPanel Orientation="Horizontal">                <Button Style="{StaticResource BackButtonStyle}" Margin="16,10,14,8" Click="onBack"/>                <TextBlock Text="首选项" VerticalAlignment="Bottom" FontSize="32" FontWeight="Black" Margin="-1,0,0,9"/>            </StackPanel>        </Border>        <Grid Margin="10" Grid.Row="1">            <ScrollViewer Margin="6,13,8,4" VerticalScrollBarVisibility="Auto">                <StackPanel>                    <ToggleSwitch Header="是否启用推送" OnContent="开" OffContent="关"/>                    <ToggleSwitch Margin="0,18,0,0" Header="是否开启自动更新" OnContent="是" OffContent="否" IsOn="True"/>                    <StackPanel Orientation="Horizontal" Margin="2,40,1,3">                        <TextBlock Text="每次获取多少条消息" FontSize="18" VerticalAlignment="Center"/>                        <ComboBox Margin="23,0,5,0" Width="80">                            <ComboBoxItem IsSelected="True">3</ComboBoxItem>                            <ComboBoxItem>5</ComboBoxItem>                            <ComboBoxItem>12</ComboBoxItem>                        </ComboBox>                    </StackPanel>                    <StackPanel Margin="7,50,5,6">                        <CheckBox Content="包含联系人资料"/>                        <CheckBox Content="包含发送记录"/>                        <CheckBox Content="显示最新动态"/>                        <CheckBox Content="显示客户来源"/>                        <CheckBox Content="自动回复"/>                    </StackPanel>                </StackPanel>            </ScrollViewer>        </Grid>    </Grid></UserControl>

3、切换到代码视图，然后参考以下代码完成（C#）。

using System;using System.Collections.Generic;using System.IO;using System.Linq;using Windows.Foundation;using Windows.Foundation.Collections;using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;using Windows.UI.Xaml.Controls.Primitives;using Windows.UI.Xaml.Data;using Windows.UI.Xaml.Input;using Windows.UI.Xaml.Media;using Windows.UI.Xaml.Navigation;// “用户控件”项模板在 http://go.microsoft.com/fwlink/?LinkId=234236 上提供namespace 设置面板{    public sealed partial class MyUC : UserControl    {        Popup pop = null;        public MyUC()        {            this.InitializeComponent();            this.Width = 360d;            this.Height = Window.Current.Bounds.Height;//与当前窗口等高            this.pop = new Popup();            this.pop.Child = this;            this.pop.IsLightDismissEnabled = true;            // 将Popup定位在屏幕的右侧            pop.HorizontalOffset = Window.Current.Bounds.Width - this.Width;            pop.VerticalOffset = 0d;            // 为控件设置呈现动画            this.Transitions = new Windows.UI.Xaml.Media.Animation.TransitionCollection();            Windows.UI.Xaml.Media.Animation.EdgeUIThemeTransition et = new Windows.UI.Xaml.Media.Animation.EdgeUIThemeTransition();            et.Edge = EdgeTransitionLocation.Right;            this.Transitions.Add(et);        }        /// <summary>        /// 显示控件        /// </summary>        public void Show()        {            if (pop != null)            {                pop.IsOpen = true;            }        }        /// <summary>        /// 隐藏控件        /// </summary>        public void Hide()        {            if (pop != null)            {                pop.IsOpen = false;            }        }        private void onBack(object sender, RoutedEventArgs e)        {            this.Hide();            Windows.UI.ApplicationSettings.SettingsPane.Show();        }    }}

4、再次打开MainPage.xaml.cs，把刚才的第一个命令的回调委托的代码改掉。

            // 我们将为设置面板添加三个命令            // 分别为 首选项，用户反馈，关于            Windows.UI.ApplicationSettings.SettingsCommand cmd1 = new Windows.UI.ApplicationSettings.SettingsCommand("1", "首选项", c =>            {                MyUC uc = new MyUC();                uc.Show();            });

5、运行程序，调出设置面板，然后点击“首选项”，这时候，你的自定义控件（其实是Popup）就会弹出来，再单击Popup上方的后退按钮，设置面板再次出现。