博客园客户端(Universal App)开发随笔 - Setting Page的实现方法与经验

前言

几乎全部的移动 App 都会为用户提供一个设置页面（Setting Page 或 Preference Page），来知足你们对于一个 App 众口难调的需求。虽然有一种说法表示，最好的 App 不须要设置，一切默认呈现给用户的就是最好的选择。可是对于大多数开发人员来讲，这样的境界不是能够简单达到的；并且对于部分“设置控”用户来讲，没有设置页面怎么看都以为少了些什么。因此对于大部分 App 来讲，设置页面仍是一个必备品。

本文将分别介绍 Windows 和 Windows Phone 的设置页面的界面设计，最后介绍他们后台的统一实现与数据保存。

 

Windows App 的Setting界面设计

在 Windows App 中，设置页面的入口被统一在了 charm bar 中，手指从触摸屏右侧滑入或鼠标从屏幕右下角向下滑动均可以调出 charm bar，而后进入默认的设置页面。

开发中的默认的设置页面只有 Permissions （权限）一项，发布在市场后会自动添加 Rate and Review （评分）这一项，因此没必要本身实现，可是在Windows Phone中须要本身实现。

对于一个通常的 App 来讲，能够在设置页面添加以下几项：

• 选项 / 偏好 (Option / Preference)
• 关于（About）
• 隐私声明（Privacy Statement）（若是 App 使用了网络权限，则这一项必选）

 

选项 / 偏好 (Option / Preference)

以博客园应用下一版即将加入的阅读模式为例。咱们但愿在选项中新增阅读模式的设置，具体实现方式为在 App 的设置中增长选项一栏，点击后跳转到选项页面，并进行相应设置。

首先咱们在 Universal App 中添加一个 Setting Flyout 页面：

在XAML部分，咱们加入简单的说明与一个 ToggleButton。

<StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
            <TextBlock Text="阅读设置" Style="{StaticResource TitleTextBlockStyle}"/>
            <TextBlock Margin="0,0,0,10" Text="在阅读设置部分，能够进行全部和阅读相关的设置" Style="{StaticResource BodyTextBlockStyle}"/>
            <ToggleSwitch Margin="-6,0,0,0" x:Name="ReadingModeToggle"
                          Header = "阅读模式" HorizontalAlignment="Left" HorizontalContentAlignment="Left" OffContent="日间模式" OnContent="夜间模式" Toggled="ReadingModeToggle_Toggled"/>
        </StackPanel>

这样就实现了一个最简单的 SettingFlyout 页面。那么如何在 App 中调出这个页面呢？咱们在App.xaml.cs文件中添加以下代码：

#if WINDOWS_APP
using Windows.UI.ApplicationSettings;
#endif

并在 OnLaunched 方法内添加：

#if WINDOWS_APP
            SettingsPane.GetForCurrentView().CommandsRequested += (s, args) =>
            {
                Add an About command to the settings pane
                var preference = new SettingsCommand("设置", "设置", (handler) =>
                new PreferenceSettingsFlyout().Show());
                args.Request.ApplicationCommands.Add(preference);
            };
#endif

这样，打开应用时，在右侧的 Setting Pane 中就增长了咱们的选项一栏，并能够打开进行设置。

具体设置的后台实现，能够经过 Toggled="ReadingModeToggle_Toggled" 调用后台的具体方法实现。这一部分的有关内容将在后文提到。

关于（About）

关于（About）页面能够放置 App 相关的介绍与做者联系方式等信息，具体的实现与选项 / 偏好 (Option / Preference) 页面类似，此处再也不赘述。

隐私声明（Privacy Statement）

这一项比较特殊，凡是申请了网络权限，包括 internetClient，internetClientServer 和 privateNetworkClientServer 权限的 App，都必须提供隐私声明。开发者能够在本身的网站或博客创建一个专门的页面用来放置应用的隐私声明，并在设置栏中提供一个转向的入口，这样才能确保 App 在提交时经过审核。

因为只须要跳转的连接，因此隐私声明的实现比较简单。首先在 App.xaml.cs 的 OnLaunched 方法内添加：

#if WINDOWS_APP
                var privacy = new SettingsCommand("隐私声明", "隐私声明", GetPrivacyPolicyAsync);
                args.Request.ApplicationCommands.Add(privacy);
#endif

提供隐私声明的入口，并在 App.xaml.cs 中添加如下方法：

#if WINDOWS_APP
        private async void GetPrivacyPolicyAsync(Windows.UI.Popups.IUICommand command)
        {
            await Windows.System.Launcher.LaunchUriAsync(new Uri("http://www.microsoft.com/privacystatement/zh-cn/core/default.aspx"));
        }
#endif

便可以实现。其中的 URL 请替换为适合 App 自己的隐私声明地址。

 

Windows Phone App的Setting界面设计

Windows Phone App 与 Windows App 在设置界面方面有两点不一样：

1. Windows Phone 没有提供统一的设置入口。

2. Windows Phone App 不须要强制提供隐私声明。

所以，开发者须要本身为设置界面提供入口和界面页面。以博客园 UAP 的 Windows Phone 版举例，首先咱们在项目中添加 SettingPage.xaml。

博客园的设置页面实现使用了 Pivot，好处是能够在一个页面同时实现“选项”与“关于”两项内容，而且未来能够很方便地添加新的子项。

<Pivot x:Name="pivot_Main" SelectionChanged="Pivot_SelectionChanged">
        <PivotItem Margin="0" Tag="setting">
            <PivotItem.Header>
                <TextBlock Style="{StaticResource PivotTitleFont}" Text="设置" />
            </PivotItem.Header>
            <StackPanel Orientation="Vertical" Margin="20">
                <ToggleSwitch Header="博客标题/摘要" OffContent="只显示标题" OnContent="显示标题和摘要" IsOn="{Binding DefaultDisplaySummary, Mode=TwoWay}"/>
                    <TextBlock Text="(刷新生效)" Foreground="{ThemeResource CNBlogsAttributionColor}" FontSize="14" Margin="0,-5,0,10"/>
                <ToggleSwitch Header="点击博客标题时" OffContent="阅读正文" OnContent="显示/隐藏摘要" IsOn="{Binding ClickTitleForSummary, Mode=TwoWay}"/>
                    <TextBlock Text="(刷新生效)" Foreground="{ThemeResource CNBlogsAttributionColor}" FontSize="14" Margin="0,-5,0,10"/>
            </StackPanel>
        </PivotItem>

        <PivotItem Margin="0" Tag="about">
            <PivotItem.Header>
                <TextBlock Style="{StaticResource PivotTitleFont}" Text="关于" />
            </PivotItem.Header>
            <StackPanel Margin="20" HorizontalAlignment="Center">
                    <Image x:Name="image_Logo" Height="100" Margin="0,20" Source="ms-appx:///Assets/Logo.100.Blue.png" Opacity="0">
                    <Image.Projection>
                        <PlaneProjection />
                    </Image.Projection>
                </Image>
                <StackPanel x:Name="sp_aboutContent" Opacity="0">
                        <TextBlock Margin="0,10" HorizontalAlignment="Center" Style="{StaticResource SettingPageTextHeader}" Text="博客园" />
                        <TextBlock Margin="0,10" HorizontalAlignment="Center" Style="{StaticResource SettingPageTextHeader}" Text="Windows Phone 客户端" />
                    <TextBlock HorizontalAlignment="Center" FontSize="14" Style="{StaticResource SettingPageTextHeader}" Text="Powered By Microsoft" />
                    <TextBlock x:Name="tbkVersion" Text="1.0" HorizontalAlignment="Center" FontSize="14" Style="{StaticResource SettingPageTextHeader}"/>
                    <HyperlinkButton x:Name="btn_RateMe" Margin="0,40,0,10" Content="给个好评" Style="{StaticResource SettingPageHyperlinkButtonText}" HorizontalAlignment="Center" Click="btn_RateMe_Click"/>

                        <TextBlock Margin="30" FontSize="14" FontFamily="Segoe WP" TextWrapping="Wrap" Foreground="{ThemeResource CNBlogsSummaryColor}">
                        <Run Text="本应用为Universal App的示例应用，使用WindowsRT SDK开发，支持Windows Phone 8.1。"/>
                        <Run Text="还有一个同名应用同时发布在Windows 8.1上，二者共用一套底层代码。"/>
                    </TextBlock>
                </StackPanel>
            </StackPanel>
        </PivotItem>
    </Pivot>

经过以上代码框架实现设置和关于页面的内容填充，便可实现简单的设置页面效果。

在“关于”页面中的那个“给个好评”，必须本身实现，两行代码搞定：

var uri = new Uri(string.Format("ms-windows-store:navigate?appid={0}", urrentApp.AppId));
await Windows.System.Launcher.LaunchUriAsync(uri);

 上面的那个版本号，也能够用code从Package.appxmanifest中的这里读取：

<Identity Name="36385XiaowuHu.100280B26F648" Publisher="CN=60BC9EB8-6EF8-44C4-817C-FCE25D428B9B" Version="1.0.0.18" />

 

在博客园 Universal App 中，Windows Phone 版的设置页面的入口是 BottomAppBar 中定义的

<AppBarButton x:Name="btn_Setting" Label="设置" Icon="Setting" Click="btn_Setting_Click"/>

按钮提供的。这也是大多数 Windows Phone App 的设置页面的入口。

 

除了 AppBarButton 之外，咱们还能够经过更快捷的方式直接进入设置的具体页面。例如咱们在 BottomAppBar 中添加

<CommandBar.SecondaryCommands>
                <AppBarButton x:Name="btnAbout" Label="关于本应用" Click="btnAbout_Click" />
</CommandBar.SecondaryCommands>

并在后台实现点击事件对应的方法：

private void btnLogon_Click(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(SettingsPage), new DataModel.SettingNavigationParameter() { targetPivot = TargetPivotItemName.About, targetCss = 0 });
        }

便可直接跳转到对应的关于页面。这样除了统一的设置入口之外，在不一样页面添加适应不一样页面的不一样快捷入口，使得用户能够根据当前页面快速找到对应设置选项。这是一个很是好的实践经验和用户体验，即，在不一样上下文时提供不一样的设置入口，好比在Reading Page，能够提供“设置字号”菜单进入Setting Page；在Write Comment Page能够提供“登陆”菜单进入Setting Page。

设置页面的后台实现与数据保存

全部设置页面的操做，例如对 ToggleButton 的拖动，对 Button 的点击等等，均可以经过填写控件自己提供的事件方法来进行相应的操做，此处就再也不赘述。那么当用户进行设置之后，如何保存用户的设置，使得用户每次打开 App 都应用上次保存的设置内容呢？

在 App 中经常使用的保存数据有 XML 序列化和保存 Setting 字段两种方式，前者主要适用于保存结构化的数据，对于简单的设置数据的保存，咱们在博客园应用中使用了后者。

咱们在 CNBlogs.DataHelper.DataModel 的命名空间下添加 Setting.cs 用于定义各设置数据。以夜间模式举例，在此类中添加以下定义：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.Storage;

namespace CNBlogs.DataHelper.DataModel
{
    public sealed class CNBlogSettings : DataModelBase
    {
        private ApplicationDataContainer settings = Windows.Storage.ApplicationData.Current.LocalSettings;

        const string SettingKey_NightModeTheme = "cnblog_night_mode_theme";

        public bool NightModeTheme
        {
            get
            {
                var obj = this.settings.Values[SettingKey_NightModeTheme];
                return obj == null ? false : (bool)obj;
            }
            set
            {
                this.settings.Values[SettingKey_NightModeTheme] = value;
                base.OnPropertyChanged("NightModeTheme");
            }
        }
    }
}

就实现了简单的 NightModeTheme 字段的本地保存。为了保持一致性，还能够将 Setting 类设计为单例模式。

这样，在 ToggleButton 提供的事件方法中，咱们能够对 NightModeTheme 字段进行修改，Setting 类会负责读取与保存该字段的内容。

固然，可不能够不经过 C# 代码也能实现对 Setting 字段的修改呢？固然能够。XAML 的数据绑定为此提供了更优雅的解决方案。咱们只须要在夜间模式对应的 ToggleButton 中的XAML定义中添加 IsOn="{Binding NightModeTheme, Mode=TwoWay}" 这么一个属性，就能够绑定 ToggleButton 的状态与 Setting 类中 NightModeTheme 的值了。固然，根据 NightModeTheme 的值来进行怎样的操做，如提供夜间模式变换主题状态等操做，仍是须要后台代码实现的。

总结

本文介绍对 Windows App 和 Windows Phone App 设置界面的简单设计，并给出了后台代码和数据保存的基本实现。经过这些，Universal App 就能够拥有一个看起来像模像样的设置页面了。至于如何设计更加人性化，更加“高大上”的设计界面，就须要开发者们努力实现了。好比在咱们的博客园客户端中的关于界面，实现了一个超出用户预期的小动画。欢迎交流。

 

你能够从这里下载咱们分享的源代码：

https://code.msdn.microsoft.com/CNBlogs-Client-Universal-477943ab

固然更能够直接下载两个App来看效果，可是因为designer介入较晚，因此UI上面还须要完善，咱们会持续更新App。

Windows Phone Store App link:

http://www.windowsphone.com/zh-cn/store/app/博客园-uap/500f08f0-5be8-4723-aff9-a397beee52fc

Windows Store App link:

http://apps.microsoft.com/windows/zh-cn/app/c76b99a0-9abd-4a4e-86f0-b29bfcc51059

纯粹干净的App, 里面绝无广告，请放心使用。

 分享代码，改变世界！

MSDN官方文档：

Quickstart: Add app settings (XAML)

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh872190.aspx

Guidelines for app settings

http://msdn.microsoft.com/en-us/library/windows/apps/hh770544.aspx

Adding app settings (XAML)

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh770543.aspx

App certification requirements for the Windows Store

http://msdn.microsoft.com/en-us/library/windows/apps/hh694083.aspx

Loading and saving settings

http://msdn.microsoft.com/en-us/library/windows/apps/dn263230.aspx