Windows Store apps开发[20]添加应用设置(SettingsPane)

注：本系列学习帖子我在DevDiv.com移动开发社区原创首发

转载请注明出处：BeyondVincent(破船)@DevDiv.com

如果你有什么问题也可以前往交流

下面是首发地址：

[DevDiv原创]Windows 8 Metro App开发Step by Step

自引：

前段时间，为了帮助大家熟悉并入门Windows 8 Metro开发，我写了一些帖子。想必大家在看了之后，已经对Windows 8 Metro开发有了一个初步的印象。

随着Windows 8 RTM的发布 ， 以及微软Windows 8最终发布的临近，大家对Windows 8 Metro开发的学习会进一步深入,在这里我会时刻关注Windows 8的动向，并时刻为大家分享Windows 8 Metro开发心得.欢迎大家前来学习。

今天我就带领大家学习一下设置合约(SettingsPane)的使用另:之前有介绍过搜索合约,大家可以从下面的链接去学习

[DevDiv原创]Windows 8 Metro App开发[12]Windows 8 中搜索合约的使用
首先来看看程序运行效果



本文章目录结构：
设置合约介绍创建项目
定义设置弹出窗口XAML文件定义设置弹出窗口.cs文件弹出设置面板主界面编写编译运行+代码附件

更多内容请查看下面的帖子

[DevDiv原创]Windows 8 Metro App开发Step by Step

设置合约介绍概述

“设置”超级按钮为所有与用户的当前上下文相关的设置提供一个访问点。“设置”超级按钮始终可用。不管上下文如何，设置包括始终可用的系统设置、让用户可以控制应用对系统设备和功能的访问的系统代理的设置，以及当前应用指定的设置。本主题介绍如何使用“设置”合约向“设置”超级按钮中添加应用设置。

用户体验

从屏幕的一个边缘轻扫可显示多个超级按钮。按“设置”超级按钮可显示设置窗口。设置窗口中既包括应用设置又包括系统设置。

应用中可以提供 SettingsCommand 入口点，这些入口点显示在设置窗口的顶部。“权限”和“评论和打分”这两个入口点由系统提供。设置窗口的底部包括由系统提供的电脑设置，如音量、亮度和电源。

注意 只有通过 Windows 应用商店安装的应用才有“评论和打分”入口点。侧向加载的企业应用没有这个入口点。

入口点会打开设置弹出窗口，弹出窗口中包含应用的设置、帮助、“关于”信息以及任何不经常由用户访问的次要命令或信息。一个应用中可以有多个设置入口点，每个设置弹出窗口都可以有多个选项。

SkyDrive 应用的设置弹出窗口

用户体验指南

一般原则

• “设置”超级按钮是保存应用的所有设置的一个地方。 使用“设置”超级按钮作为你的应用设置的单个入口点。
• 你可以编程方式链接到顶部的“设置”超级按钮体验，或者你可以在必要时深层链接到你的设置体验，例如在应用商店中购买应用需要链接到应用设置以更新信用卡信息。
• 设置越少越好。定义智能默认值，并尽可能减少设置数。
• 可以调用和解除“设置”超级按钮，无需用户切换上下文。确保你从“设置”超级按钮显示的设置 UI 遵循相同的原则。当用户与控件交互时，立即提供适用的设置。为你的 UI 使用弱解除界面，以便用户可以通过在界面外触摸或通过从应用中移动焦点来解除。

  选择在应用设置中访问哪些应用功能

  • 提供对影响应用的整体行为而且不经常调整的配置选项的访问，例如，在天气应用中在摄氏度和华氏度之间选择默认的温度单位，或者更改邮件应用的帐户设置。
  • 使用“设置”超级按钮可以提供对不经常需要的应用信息（如隐私声明、帮助、应用版本或版权信息）的访问。
  • 不要包括属于典型应用工作流的功能（例如，在艺术应用中更改画笔颜色）。这些功能位于应用栏或画布上。有关详细信息，请参阅应用栏指南和清单。

    向设置窗口中添加应用设置的入口点。

    • 将相似或相关的设置一起组合到每个入口点下面。避免添加四个以上的入口点。
    • 将不太常用的设置组合到一个入口点中，以便每个更常见的设置都有其各自的入口点。
    • 无论应用的上下文如何，都呈现相同的入口点。如果某些设置与某个上下文不相关，请在应用设置的弹出窗口中处理这些设置，而不是通过更改设置窗口中显示的入口点。
    • 入口点应打开一个设置弹出窗口。如果直接进入 Web，请在进入 Web 的标签后添加“（联机）”，例如“帮助（联机）”。另外，你可以在入口点字符串中使用“Web”或“联机”，例如“Web 论坛”。
    • 通过使用一个设置弹出窗口对指向详细信息的链接进行分组，最大程度地减少链接到 Web 的入口点数。例如，如果你需要提供“关于”、使用条款、隐私声明和支持信息链接，请将它们放在“关于”入口点下的一个通用设置弹出窗口中，而不是为每个设置都提供一个入口点。
    • 所有应用自动在顶层获得“权限”入口。权限窗格是系统控制的界面，应用无法更改。在此窗格中将为需要用户同意的每个系统功能显示一个切换开关。不要在用户所有的设置 UI 中复制此信息。
    • 在你命名入口点时尽可能具有描述性。名称应反映在选择入口点时要呈现给用户的信息或设置。例如，如果设置与帐户相关，则调用入口“帐户”。避免重复使用术语“设置”或使用同义词。而是改用设置的限定符，如“默认设置”。当只有一个设置入口点涵盖多个类别，并且一个通用类别不可避免时，请使用“选项”。尽可能为你的入口点使用一个词的标签。

      定义设置 UI

      • 从设置窗口中指定的所有设置入口点，使用设置弹出窗口启动一致的 UI 图面。
      • 使用覆盖应用内容的弱解除界面，当用户触摸应用时、当应用取消激活时（例如，当打开超级按钮时）以及当用户贴靠应用时可解除该界面。这让用户可以快速更改设置并返回到应用中。
      • 将你的设置弹出窗口置于和超级按钮相同的屏幕一侧，以便形成完整的 UI 流。请注意，如果系统的文本方向是从右到左，则超级按钮和设置窗口可能会在屏幕的左侧。使用 SettingsEdgeLocation 属性来确定设置超级按钮显示屏幕的哪一侧。
      • SettingsFlyout 控件实现了本部分中的所有 UI 要求。

        向设置弹出窗口中添加设置

        • 旨在实现简化。
          • 为你的功能提供经过深思熟虑的默认设置并尽可能少地添加设置。
          • 避免设置层次结构大于两层。
          • 在单列中按照从上到下的顺序显示内容，必要时使内容可滚动，但要将最大滚动长度限制在屏幕高度的两倍。
          • 当用户更改设置时，你的应用应当立即反映所做的更改。用户一停止与特定设置控件交互，将立即应用新设置值。建议所有光取消图面都采用此值。如果你的应用在设置弹出窗口关闭时没有向设置存储应用新值，则新值可能会丢失，这是由于设置弹出窗口不应当有提交按钮。处理 beforeshow 和 afterhide 事件以执行控件初始化和状态序列化。
          • 使用其他层次的 UI 或展开/折叠模型重复 UI 中列出的多个对象下提供的设置。例如，提供每个城市设置的天气应用提供可以在第一个设置级别配置的城市列表，并允许用户点击城市来访问下一个级别，从而配置其中的选项。支持多个帐户的邮件应用应当显示帐户列表，而且应当允许用户通过点击帐户来打开相应的二级设置 UI。
          • 如果加载控件或 Web 内容需要时间，请使用不确定进度控件。有关详细信息，请参阅进度控件指南和清单。
          • 你经常需要将用户发送到 Web 以获取更多设置或信息。以你对待应用中链接的相同方式对待打开 Web 浏览器的链接，或者提醒用户他们将进入 Web。不要为浏览器导航事件使用按钮。
          • 为相同类型的设置统一使用控件。 如果禁用其中一个控件，则添加描述性消息。将此消息置于禁用的控件上。

          • 下面列出了你可以用于设置的控件：

            • 切换开关：使用切换开关可让用户将值设置为打开或关闭。
            • 按钮：使用按钮可让用户立即启动操作，不会消除当前的设置 UI。
            • 超链接：当操作将用户带到其他 UI 界面并消除当前的设置 UI 时，使用超链接。
            • 文本输入框：使用输入框可让用户输入文本。使用与要从用户那里捕获的文本类型（如电子邮件或密码）相对应的文本输入框类型。
            • 单选按钮组：使用单选按钮组可让用户从多达 5 个互相排斥的一组相关选项中选择一个选项。
            • 选择控件：使用选择控件可让用户从一组 6 个或更多个仅文本项中选择一项。

              创建设置弹出窗口

              对于使用 JavaScript 的 Metro 风格应用，请使用 SettingsFlyout 控件，该控件实现此部分中的所有 UI 要求，并支持预定义的 CSS 类以实现推荐的样式。

              对于使用 C++、C# 或 Visual Basic 的 Metro 风格应用，你必须创建自定义设置 UI。使用以下指南可确保你的 UI 与 UX 设计要求一致。有关详细信息，请参阅应用程序设置示例。

              • 不管方向如何，设置弹出窗口都必须采用全屏高度，并且应该采用窄（346 像素）或宽（646 像素）格式。
              • 设置弹出窗口应当有一个标头，其中包括一个后退按钮、用来打开该弹出窗口的入口点的名称以及应用的图标。该标头的背景颜色和边框颜色应反映清单中指定的应用程序颜色。
              • 使用 showPanel 和 hidePanel 动画，以便设置弹出窗口从屏幕上距离它们最近的一侧滑入并从同一侧滑出。
              • 在为设置弹出窗口（包括标头）设置动画后，包括作为单个块进行动画处理的设置内容和控件。使用左偏移 100px 的EntranceThemeTransition 动画为内容设置动画。

                设置弹出窗口的样式设置

                • 设置弹出窗口应该采用窄 (346px) 或宽 (646px) 格式。选择适用于内容的大小。不要创建自定义大小。在同一个应用中使用这两个大小都可以。
                • 标头的背景颜色应该与应用的颜色相同，即应用的“开始”磁贴的背景颜色。
                • 边框颜色应采用相同的颜色，但是应该暗 20%。 通过获取每个组件 80% 的 RGB 值来找到此颜色。
                • 在白色背景上显示设置内容。
                • 使用章节标头、段落和标签，以便它们帮助划分和明确层次结构。这些元素在设置弹出窗口中是可选元素。
                • 为控件使用简单的说明标签。

                  不适当的使用设置

                  • 不要向设置区域中添加与公用应用工作流相关联的任何命令。这些命令应放在应用栏或应用画布上。
                  • 不要使用设置窗口中的入口点在不启动另一个 UI 图面的情况下直接执行操作。
                  • 不要使用设置窗口导航到应用的另一个部分。当设置窗口关闭时，用户在应用中的位置应当与他们输入设置时的位置相同。应用栏之类的控件是更适合的导航位置。有关详细信息，请参阅定义布局、导航和命令。
                  • 不要使用 SettingsFlyout 类作为通用控件。该类仅适用于从“设置”超级按钮启动的设置 UI。创建项目
                    
                    • 打开 Microsoft Visual Studio 2012。在“文件”菜单上，选择“新建项目”。将出现“新建项目”对话框。
                    • 在“模板”窗格中，打开“Visual C#”，然后单击“Windows Metro 风格”。
                    • 在中心窗格中，选择“空白应用程序”。
                    • 在“名称”文本框中，键入“DevDiv_SettingPaneDemo”。
                    • 单击“确定”。即会创建 DevDiv_SettingPaneDemo工程。
                      
                      
                      定义设置弹出窗口XAML文件
                      按快捷键Ctrl+Shift+A弹出添加新项窗口,如下图,根据下图提示,创建一个名称为SimpleSettingsNarrow的用户控件(UserControl)
                      
                      
                      昨天 21:51 上传下载附件 (145.66 KB)
                      
                      打开SimpleSettingsNarrow.xaml文件，用下面的内容进行替换之
                      
                      

                       
                      
                      弹出设置面板定义设置弹出窗口cs文件
                      将如下代码添加到SimpleSettingsNarrow.xaml.cs文件下面代码的主要作用是当本控件隐藏时,弹出设置面板
                      
                      
                      
                      
                      编译运行+代码附件
                      下面来运行起来看看效果如何
                      
                      
                      
                      
                      
                      
                      
                      最后送上代码
                      下载代码