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

2024-03-20 01:08
文章标签 设置 应用 开发 面板 19 程序定义 windows8 新时尚

本文主要是介绍新时尚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上方的后退按钮，设置面板再次出现。

 

 

 

 

这篇关于新时尚Windows8开发（19）：为应用程序定义“设置”面板的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/827799。

相关文章

Android开发中gradle下载缓慢的问题级解决方法

Android开发中gradle下载缓慢的问题级解决方法

《Android开发中gradle下载缓慢的问题级解决方法》本文介绍了解决Android开发中Gradle下载缓慢问题的几种方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、网络环境优化二、Gradle版本与配置优化三、其他优化措施针对android开发中Gradle下载缓慢的问
阅读更多...
前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

《前端CSS动态设置样式：:class、:style等技巧(推荐)》：本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法：对象语法和数组语法，通过对象语法，可以根据条件动态切换类名或样式；通过数组语法，可以同时绑定多个类名或样式，此外，还可以结合计算属性来生成复杂的类名或样式对象，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
MobaXterm远程登录工具功能与应用小结

MobaXterm远程登录工具功能与应用小结

《MobaXterm远程登录工具功能与应用小结》MobaXterm是一款功能强大的远程终端软件,主要支持SSH登录,拥有多种远程协议,实现跨平台访问,它包括多会话管理、本地命令行执行、图形化界面集成和... 目录1. 远程终端软件概述1.1 远程终端软件的定义与用途1.2 远程终端软件的关键特性2. 支持的
阅读更多...
使用Go语言开发一个命令行文件管理工具

使用Go语言开发一个命令行文件管理工具

《使用Go语言开发一个命令行文件管理工具》这篇文章主要为大家详细介绍了如何使用Go语言开发一款命令行文件管理工具,支持批量重命名,删除,创建,移动文件,需要的小伙伴可以了解下... 目录一、工具功能一览二、核心代码解析1. 主程序结构2. 批量重命名3. 批量删除4. 创建文件/目录5. 批量移动三、如何安
阅读更多...
MySQL8.0设置redo缓存大小的实现

MySQL8.0设置redo缓存大小的实现

《MySQL8.0设置redo缓存大小的实现》本文主要在MySQL8.0.30及之后版本中使用innodb_redo_log_capacity参数在线更改redo缓存文件大小,下面就来介绍一下,具有一... mysql 8.0.30及之后版本可以使用innodb_redo_log_capacity参数来更改
阅读更多...
Nginx设置连接超时并进行测试的方法步骤

Nginx设置连接超时并进行测试的方法步骤

《Nginx设置连接超时并进行测试的方法步骤》在高并发场景下,如果客户端与服务器的连接长时间未响应,会占用大量的系统资源,影响其他正常请求的处理效率,为了解决这个问题,可以通过设置Nginx的连接... 目录设置连接超时目的操作步骤测试连接超时测试方法：总结：设置连接超时目的设置客户端与服务器之间的连接
阅读更多...
mybatis和mybatis-plus设置值为null不起作用问题及解决

mybatis和mybatis-plus设置值为null不起作用问题及解决

《mybatis和mybatis-plus设置值为null不起作用问题及解决》Mybatis-Plus的FieldStrategy主要用于控制新增、更新和查询时对空值的处理策略,通过配置不同的策略类型... 目录MyBATis-plusFieldStrategy作用FieldStrategy类型每种策略的作
阅读更多...
Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
Windows设置nginx启动端口的方法

Windows设置nginx启动端口的方法

《Windows设置nginx启动端口的方法》在服务器配置与开发过程中,nginx作为一款高效的HTTP和反向代理服务器,被广泛应用,而在Windows系统中,合理设置nginx的启动端口,是确保其正... 目录一、为什么要设置 nginx 启动端口二、设置步骤三、常见问题及解决一、为什么要设置 nginx
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2