新时尚Windows8开发(19):为应用程序定义“设置”面板

2024-03-20 01:08

本文主要是介绍新时尚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

相关文章

PyTorch核心方法之state_dict()、parameters()参数打印与应用案例

《PyTorch核心方法之state_dict()、parameters()参数打印与应用案例》PyTorch是一个流行的开源深度学习框架,提供了灵活且高效的方式来训练和部署神经网络,这篇文章主要介绍... 目录前言模型案例A. state_dict()方法验证B. parameters()C. 模型结构冻

JAVA Calendar设置上个月时,日期不存在或错误提示问题及解决

《JAVACalendar设置上个月时,日期不存在或错误提示问题及解决》在使用Java的Calendar类设置上个月的日期时,如果遇到不存在的日期(如4月31日),默认会自动调整到下个月的相应日期(... 目录Java Calendar设置上个月时,日期不存在或错误提示java进行日期计算时如果出现不存在的

线程池ThreadPoolExecutor应用过程

《线程池ThreadPoolExecutor应用过程》:本文主要介绍如何使用ThreadPoolExecutor创建线程池,包括其构造方法、常用方法、参数校验以及如何选择合适的拒绝策略,文章还讨论... 目录ThreadPoolExecutor构造说明及常用方法为什么强制要求使用ThreadPoolExec

Java利用Spire.XLS for Java自动化设置Excel的文档属性

《Java利用Spire.XLSforJava自动化设置Excel的文档属性》一个专业的Excel文件,其文档属性往往能大大提升文件的可管理性和可检索性,下面我们就来看看Java如何使用Spire... 目录Spire.XLS for Java 库介绍与安装Java 设置内置的 Excel 文档属性Java

mysql_mcp_server部署及应用实践案例

《mysql_mcp_server部署及应用实践案例》文章介绍了在CentOS7.5环境下部署MySQL_mcp_server的步骤,包括服务安装、配置和启动,还提供了一个基于Dify工作流的应用案例... 目录mysql_mcp_server部署及应用案例1. 服务安装1.1. 下载源码1.2. 创建独立

VSCode开发中有哪些好用的插件和快捷键

《VSCode开发中有哪些好用的插件和快捷键》作为全球最受欢迎的编程工具,VSCode的快捷键体系是提升开发效率的核心密码,:本文主要介绍VSCode开发中有哪些好用的插件和快捷键的相关资料,文中... 目录前言1、vscode插件1.1 Live-server1.2 Auto Rename Tag1.3

Agent开发核心技术解析以及现代Agent架构设计

《Agent开发核心技术解析以及现代Agent架构设计》在人工智能领域,Agent并非一个全新的概念,但在大模型时代,它被赋予了全新的生命力,简单来说,Agent是一个能够自主感知环境、理解任务、制定... 目录一、回归本源:到底什么是Agent?二、核心链路拆解:Agent的"大脑"与"四肢"1. 规划模

idea设置快捷键风格方式

《idea设置快捷键风格方式》在IntelliJIDEA中设置快捷键风格,打开IDEA,进入设置页面,选择Keymap,从Keymaps下拉列表中选择或复制想要的快捷键风格,点击Apply和OK即可使... 目录idea设www.chinasem.cn置快捷键风格按照以下步骤进行总结idea设置快捷键pyth

MyBatis配置文件中最常用的设置

《MyBatis配置文件中最常用的设置》文章主要介绍了MyBatis配置的优化方法,包括引用外部的properties配置文件、配置外置以实现环境解耦、配置文件中最常用的6个核心设置以及三种常用的Ma... 目录MyBATis配置优化mybatis的配置中引用外部的propertis配置文件⚠️ 注意事项X

Python+wxPython开发一个文件属性比对工具

《Python+wxPython开发一个文件属性比对工具》在日常的文件管理工作中,我们经常会遇到同一个文件存在多个版本,或者需要验证备份文件与源文件是否一致,下面我们就来看看如何使用wxPython模... 目录引言项目背景与需求应用场景核心需求运行结果技术选型程序设计界面布局核心功能模块关键代码解析文件大