导出 (0) 打印
全部展开

如何创建 Windows Phone 设置页面

2012/2/9

本主题向您介绍为您的 Windows Phone 应用程序创建“设置”页面所需的步骤。您可以在 Windows Phone 的代码示例主题中查找这一完整“设置”示例。

为 Windows Phone 应用程序创建“设置”页面的第一步是创建类,以存放设置以及将设置保存到独立存储和从其加载设置。有关如何在独立存储的键值对中存储设置的更多信息,请参阅 IsolatedStorageSettings Class。有关常规独立存储的更多信息,请参阅 Windows Phone 本地数据存储

该类包含一个将值添加或更新到独立存储的方法。在以下代码中,它称为 AddOrUpdateValue。如果从未设置过,则还有一个方法可以读取值或分配默认值。在以下代码中,它称为 GetValueOrDefault

所有的设置或属性都有访问器函数。以下代码包含多个函数,称为 CheckBoxSettingListBoxSettingPasswordSetting。您可以通过添加自己的访问器函数来添加自己的属性。每项设置都有一个定义独立存储键名称的字符串常量和一个定义默认值的常量。

using System;
using System.IO.IsolatedStorage;
using System.Diagnostics;
using System.Collections.Generic;

namespace SettingsSample
{
    public class AppSettings
    {
        // Our isolated storage settings
        IsolatedStorageSettings settings;

        // The isolated storage key names of our settings
        const string CheckBoxSettingKeyName = "CheckBoxSetting";
        const string ListBoxSettingKeyName = "ListBoxSetting";
        const string RadioButton1SettingKeyName = "RadioButton1Setting";
        const string RadioButton2SettingKeyName = "RadioButton2Setting";
        const string RadioButton3SettingKeyName = "RadioButton3Setting";
        const string UsernameSettingKeyName = "UsernameSetting";
        const string PasswordSettingKeyName = "PasswordSetting";

        // The default value of our settings
        const bool CheckBoxSettingDefault = true;
        const int ListBoxSettingDefault = 0;
        const bool RadioButton1SettingDefault = true;
        const bool RadioButton2SettingDefault = false;
        const bool RadioButton3SettingDefault = false;
        const string UsernameSettingDefault = "";
        const string PasswordSettingDefault = "";

        /// <summary>
        /// Constructor that gets the application settings.
        /// </summary>
        public AppSettings()
        {
            // Get the settings for this application.
            settings = IsolatedStorageSettings.ApplicationSettings;
        }

        /// <summary>
        /// Update a setting value for our application. If the setting does not
        /// exist, then add the setting.
        /// </summary>
        /// <param name="Key"></param>
        /// <param name="value"></param>
        /// <returns></returns>
        public bool AddOrUpdateValue(string Key, Object value)
        {
            bool valueChanged = false;

            // If the key exists
            if (settings.Contains(Key))
            {
                // If the value has changed
                if (settings[Key] != value)
                {
                    // Store the new value
                    settings[Key] = value;
                    valueChanged = true;
                }
            }
            // Otherwise create the key.
            else
            {
                settings.Add(Key, value);
                valueChanged = true;
            }
           return valueChanged;
        }

        /// <summary>
        /// Get the current value of the setting, or if it is not found, set the 
        /// setting to the default setting.
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="Key"></param>
        /// <param name="defaultValue"></param>
        /// <returns></returns>
        public T GetValueOrDefault<T>(string Key, T defaultValue)
        {
            T value;

            // If the key exists, retrieve the value.
            if (settings.Contains(Key))
            {
                value = (T)settings[Key];
            }
            // Otherwise, use the default value.
            else
            {
                value = defaultValue;
            }
            return value;
        }

        /// <summary>
        /// Save the settings.
        /// </summary>
        public void Save()
        {
            settings.Save();
        }


        /// <summary>
        /// Property to get and set a CheckBox Setting Key.
        /// </summary>
        public bool CheckBoxSetting
        {
            get
            {
                return GetValueOrDefault<bool>(CheckBoxSettingKeyName, CheckBoxSettingDefault);
            }
            set
            {
                if (AddOrUpdateValue(CheckBoxSettingKeyName, value))
                {
                    Save();
                }
            }
        }


        /// <summary>
        /// Property to get and set a ListBox Setting Key.
        /// </summary>
        public int ListBoxSetting
        {
            get
            {
                return GetValueOrDefault<int>(ListBoxSettingKeyName, ListBoxSettingDefault);
            }
            set
            {
                if (AddOrUpdateValue(ListBoxSettingKeyName, value))
                {
                   Save();
                }
            }
        }


        /// <summary>
        /// Property to get and set a RadioButton Setting Key.
        /// </summary>
        public bool RadioButton1Setting
        {
            get
            {
                return GetValueOrDefault<bool>(RadioButton1SettingKeyName, RadioButton1SettingDefault);
            }
            set
            {
                if (AddOrUpdateValue(RadioButton1SettingKeyName, value))
                {    
                    Save();
                }
            }
        }


        /// <summary>
        /// Property to get and set a RadioButton Setting Key.
        /// </summary>
        public bool RadioButton2Setting
        {
            get
            {
                return GetValueOrDefault<bool>(RadioButton2SettingKeyName, RadioButton2SettingDefault);
            }
            set
            {
                if (AddOrUpdateValue(RadioButton2SettingKeyName, value))
                {
                    Save();
                }
            }
        }

        /// <summary>
        /// Property to get and set a RadioButton Setting Key.
        /// </summary>
        public bool RadioButton3Setting
        {
            get
            {
                return GetValueOrDefault<bool>(RadioButton3SettingKeyName, RadioButton3SettingDefault);
            }
            set
            {
                if (AddOrUpdateValue(RadioButton3SettingKeyName, value))
                {
                    Save();
                }
            }
        }

        /// <summary>
        /// Property to get and set a Username Setting Key.
        /// </summary>
        public string UsernameSetting
        {
            get
            {
                return GetValueOrDefault<string>(UsernameSettingKeyName, UsernameSettingDefault);
            }
            set
            {
                if (AddOrUpdateValue(UsernameSettingKeyName, value))
                {
                    Save();
                }
            }
        }

        /// <summary>
        /// Property to get and set a Password Setting Key.
        /// </summary>
        public string PasswordSetting
        {
            get
            {
                return GetValueOrDefault<string>(PasswordSettingKeyName, PasswordSettingDefault);
            }
            set
            {
                if (AddOrUpdateValue(PasswordSettingKeyName, value))
                {
                    Save();
                }
            }
        }
    }
}

对于不需要用户按下确认按钮的页面,您可以使用数据绑定来使设置更改立即生效并将值保存到独立存储。在设置页面的 XAML 中进行所有更改请注意,TwoWay 的数据绑定模式使更改立即生效。

注意注意:

关于为“设置”页面设计 UI 的准则,请参阅 Windows Phone 用户体验设计准则

通过添加 xmlns:local="clr-namespace:SettingsSample" 命名空间声明来启动。

x:Class="SettingsSample.SettingsWithoutConfirmation"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local="clr-namespace:SettingsSample"

FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True">

然后,添加 <local:AppSettings x:Key="appSettings"></local:AppSettings> 本地资源。

<phone:PhoneApplicationPage.Resources>
    <local:AppSettings x:Key="appSettings"></local:AppSettings>
</phone:PhoneApplicationPage.Resources>

对于页面上的所有设置,为其从属性到控件设置数据绑定。

<Grid x:Name="ContentGrid" Grid.Row="1">
    <CheckBox Content="CheckBox Setting" Height="Auto" HorizontalAlignment="Left" Margin="60,20,0,0" Name="checkBoxSetting" VerticalAlignment="Top"
            IsChecked="{Binding Source={StaticResource appSettings}, Path=CheckBoxSetting, Mode=TwoWay}"  />

    <ListBox Height="140" HorizontalAlignment="Left" Margin="70,150,0,0" Name="listBoxSetting" 
        VerticalAlignment="Top" Width="360"  SelectedIndex="{Binding Source={StaticResource appSettings}, Path=ListBoxSetting, Mode=TwoWay}">

        <ListBoxItem Content="Times New Roman" FontSize="24" FontFamily="Times New Roman" />
        <ListBoxItem Content="Arial" FontSize="24" FontFamily="Arial" />
        <ListBoxItem Content="Comic Sans MS" FontSize="24" FontFamily="Comic Sans MS" />
    </ListBox>

    <RadioButton Content="Choice One" Height="Auto" HorizontalAlignment="Left" Margin="60,0,0,235" Name="radioButton1" VerticalAlignment="Bottom" GroupName="GroupOne" IsChecked="{Binding Source={StaticResource appSettings}, Path=RadioButton1Setting, Mode=TwoWay}" />
    <RadioButton Content="Choice Two" Height="Auto" HorizontalAlignment="Left" Margin="60,350,0,0" Name="radioButton2" VerticalAlignment="Top" GroupName="GroupOne" IsChecked="{Binding Source={StaticResource appSettings}, Path=RadioButton2Setting, Mode=TwoWay}"/>
    <RadioButton Content="Choice Three" Height="Auto" HorizontalAlignment="Left" Margin="60,400,0,0" Name="radioButton3" VerticalAlignment="Top" GroupName="GroupOne" IsChecked="{Binding Source={StaticResource appSettings}, Path=RadioButton3Setting, Mode=TwoWay}"/>
</Grid>

不需要其他的代码或操作。完成“设置”页面。

对于需要输入文本(如用户名或密码)的设置,用户在完成输入后可能需要按确认按钮。像这样的“设置”页面,您可以将“应用程序栏”添加到构造函数中以将“确定”“取消”按钮添加到页面中。

对于需要用户按下确认按钮的页面,您可以使用单向数据绑定来加载当前值,但是用户做出的所有更改操作不会立即生效。

通过添加 xmlns:local="clr-namespace:SettingsSample" 命名空间声明来启动。

x:Class="SettingsSample.SettingsWithConfirmation"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local="clr-namespace:SettingsSample"

FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True">

然后,添加 <local:AppSettings x:Key="appSettings"></local:AppSettings> 本地资源。

<phone:PhoneApplicationPage.Resources>
    <local:AppSettings x:Key="appSettings"></local:AppSettings>
</phone:PhoneApplicationPage.Resources>

对于页面上的所有设置,为其从属性到控件设置单向数据绑定。

<Grid x:Name="ContentGrid" Grid.Row="1">
    <TextBlock Height="60" HorizontalAlignment="Left" Margin="65,12,0,0" Name="textBlock1" Text="Username" VerticalAlignment="Top" Width="169" />
    <TextBox Height="78" HorizontalAlignment="Left" Margin="60,60,0,0" Name="textBoxUsername" 
        Text="{Binding Path=UsernameSetting, Mode=OneWay, Source={StaticResource appSettings}}" VerticalAlignment="Top" Width="274"  />

    <TextBlock Height="60" HorizontalAlignment="Left" Margin="65,160,0,0" Name="textBlock2" Text="Password" VerticalAlignment="Top" Width="169" />
    <PasswordBox Height="78" HorizontalAlignment="Left" Margin="60,208,0,0" Name="passwordBoxPassword" 
        Password="{Binding Path=PasswordSetting, Mode=OneWay, Source={StaticResource appSettings}}" VerticalAlignment="Top" Width="274" />
</Grid>

在页面的构造函数中,添加具有“确定”“取消”按钮的“应用程序栏”。

public SettingsWithConfirmation()
{

    InitializeComponent();

    // Add an Application Bar that has a 'done' confirmation button and 
    // a 'cancel' button
    ApplicationBar = new ApplicationBar();
    ApplicationBar.IsMenuEnabled = true;
    ApplicationBar.IsVisible = true;
    ApplicationBar.Opacity = 1.0;

    ApplicationBarIconButton doneButton = new ApplicationBarIconButton(new Uri("/Images/appbar.check.rest.png", UriKind.Relative));
    doneButton.Text = "done";
    doneButton.Click += new EventHandler(doneButton_Click);

    ApplicationBarIconButton cancelButton = new ApplicationBarIconButton(new Uri("/Images/appbar.cancel.rest.png", UriKind.Relative));
    cancelButton.Text = "cancel";
    cancelButton.Click += new EventHandler(cancelButton_Click);

    ApplicationBar.Buttons.Add(doneButton);
    ApplicationBar.Buttons.Add(cancelButton);
}

如果用户确认更改,则保存值。

void doneButton_Click(object sender, EventArgs e)
{
    settings.UsernameSetting = textBoxUsername.Text;
    settings.PasswordSetting = passwordBoxPassword.Password;
    NavigationService.GoBack();
}

但是,如果用户取消更改,则仅导航至页面外。

void cancelButton_Click(object sender, EventArgs e)
{
    NavigationService.GoBack();
}

显示:
© 2014 Microsoft