博客園客戶端(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