新时尚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上方的后退按钮,设置面板再次出现。