Win10系列：UWP界面布局进阶3

Win10系列：UWP界面布局进阶3

与以往的Windows操作系统不同，Windows 10操作系统在正式版当中取消了任务栏中的"开始"按钮，将大部分的应用程序图标放置在开始屏中，同时将系统设置等常用功能整合到了Charms Bar中。移鼠标至屏幕的右上角或右下角，或同时按下"Windows+C"快捷键，可以看到在屏幕的右侧会出现一个功能栏，这就是Windows 10中的魔法栏。在魔法栏中共包含5个功能按钮：

• 搜索按钮，能搜索应用程序、系统设置、文件等等，还可以在已经安装的提供搜索功能的应用中进行搜索。
• 共享按钮，可以通过共享功能与好友轻松分享本地或网络中的文字、图片或文件等。
• 开始按钮，单击开始按钮可以在传统桌面或应用程序与开始屏之间进行切换。
• 设备按钮，单击设备按钮可以访问和管理与计算机连接的外部设备。
• 设置按钮，单击设置按钮可以看到在设置面板中包含了"控制面板"、"个性化"、"电源"等常用设置选项，其中"关机"按钮就在"电源"设置选项中。如果用户正在运行一个应用程序，在设置面板的顶部会显示与当前应用相关的设置选项。

下面通过一个示例介绍如何在开发Windows应用商店应用时向魔法栏中的设置面板里面添加与应用程序相关的设置选项，让用户可以通过魔法栏中的设置面板对应用程序的阅读模式进行设置。

启动Visual Studio，新建一个Windows应用商店的空白应用程序项目并将其命名为CharmsBarSetting，双击打开MainPage.xaml文件，在默认的Grid元素中添加一个Button按钮，设置其显示文本内容为"更改阅读模式"，并为其定义单击事件处理方法。再添加两个TextBlock文本块，一个用来显示静态文本标题"添加设置选项"，另一个用来显示当前的阅读模式，默认为日间阅读模式。对界面布局后的代码如下所示：

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

<TextBlock x:Name="PageTitle" HorizontalAlignment="Left" Margin="421,259,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="61" Width="248" FontSize="40" Text="添加设置选项"/>

<TextBlock x:Name="ShowSettings" HorizontalAlignment="Left" Margin="421,315,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="33" Width="396" FontSize="30" Text="当前阅读模式为日间阅读模式"/>

<Button x:Name="ReadingModeSetting" Content="更改阅读模式" HorizontalAlignment="Left" Margin="421,356,0,0" VerticalAlignment="Top" Height="65" Width="224" FontSize="28" Click="ReadingModeSetting_Click"/>

</Grid>

页面效果如图5-5所示。

图5-5 添加设置选项页面效果

在编写后台代码前先来了解一下需要用到的类和方法：

• SettingsPane类，位于Windows.UI.ApplicationSettings命名空间下，使应用程序可以编辑设置面板中的设置选项，例如添加、移除命令或接收通知。
• IUICommand类，位于Windows.UI.Popups命名空间下，表示上下文菜单或对话框中的命令。
• SettingsCommand类，位于Windows.UI.ApplicationSettings命名空间下，表示设置面板中的设置选项。在初始化一个SettingsCommand类的对象时需要在其构造方法中传入三个参数，分别是settingsCommandId（选项ID）、label（选项文本）以及在选择设置选项后的事件处理方法。

打开MainPage.xaml.cs文件，为"更改阅读模式"按钮添加单击事件处理方法，代码如下所示：

private void ReadingModeSetting_Click(object sender, RoutedEventArgs e)

{

SettingsPane.GetForCurrentView().CommandsRequested += SetReadingModeCommandsRequested;

SettingsPane.Show();

}

在上面的方法中为SettingsPane类的GetForCurrentView().CommandsRequested事件注册事件处理方法SetReadingModeCommandsRequested，在用户单击"更改阅读模式"按钮打开设置面板时会调用这个方法向设置面板中添加设置选项，此时间处理方法会在后面做详细介绍。最后调用SettingsPane类的Show方法，这样在用户单击页面中的按钮时就会自动弹出设置面板。

下面开始定义SetReadingModeCommandsRequested方法，用来新建设置选项以及将设置选项添加到设置面板中，方法代码如下所示：

void SetReadingModeCommandsRequested(SettingsPane settingsPane, SettingsPaneCommandsRequestedEventArgs eventArgs)

{

//清除上一次单击按钮时添加的设置选项

eventArgs.Request.ApplicationCommands.Clear();

//新建"日间阅读模式"设置选项并定义选择设置选项后要执行的操作

SettingsCommand daytimeModeCommand = new SettingsCommand("dayReadingModeSettings", "日间阅读模式", (IUICommand command) =>

{

ShowSettings.Text = "已切换为日间阅读模式";

});

//将"夜间阅读模式"设置选项添加至设置面板中

eventArgs.Request.ApplicationCommands.Add(daytimeModeCommand);

//新建"夜间阅读模式"设置选项并定义选择设置选项后要执行的操作

SettingsCommand nighttimeModeCommand = new SettingsCommand("nightReadingModeSettings", "夜间阅读模式", (IUICommand command) =>

{

ShowSettings.Text = "已切换为夜间阅读模式";

});

//将"夜间阅读模式"设置选项添加至设置面板中

eventArgs.Request.ApplicationCommands.Add(nighttimeModeCommand);

}

在上面的代码中，首先调用参数eventArgs的Request.ApplicationCommands.Clear方法清空设置面板中的设置选项，这样可以避免重复添加。接着实例化两个SettingsCommand类的对象用来定义设置面板中的设置选项。由于两个设置选项的添加方式相同，下面以添加"日间阅读模式"设置选项为例来介绍SettingsCommand类的使用，在实例化SettingsCommand类的对象时定义它的选项ID为"dayReadingModeSettings"、选项文本为"日间阅读模式"，并在用户选择该设置选项时执行事件处理方法，设置界面上的文本框内容为"已切换为日间阅读模式"，最后调用eventArgs对象的Request.ApplicationCommands.Add方法将"日间阅读模式"选项添加至设置面板中。按照相同的方式为设置面板添加"夜间阅读模式"设置选项。

运行程序，单击页面中的"更改阅读模式"按钮，会在屏幕的右侧弹出设置面板，效果如图5-6所示。

图5-6 设置面板效果

在设置面板中分别选择"日间阅读模式"选项和"夜间阅读模式"选项，会在页面中显示当前的阅读模式，效果如图5-7所示。

（1）切换为日间阅读模式 （2）切换为夜间阅读模式

图5-7 切换阅读模式

这样就实现了向设置面板中添加与当前应用相关的设置选项，并且在选择不同设置选项后执行对应的事件处理逻辑，完成所需要的功能设置。开发者可根据应用程序的需要将相关设置选项添加在设置面板当中。

posted on 2017-03-30 13:43 冯瑞涛 阅读( ...) 评论( ...) 编辑 收藏