エクスポート (0) 印刷
すべて展開
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

Windows Phone 8 の設定ページを作成する方法

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

このトピックでは、Windows Phone アプリの設定ページを作成するのに必要な手順について説明します。

このトピックは、次のセクションで構成されています。

Windows Phone アプリの設定ページを作成する最初の手順では、設定を保持するクラスを作成し、ローカル フォルダーからの設定の保存および読み込みを行います。 ローカル フォルダーにキーと値のペアの設定を格納する方法の詳細については、「IsolatedStorageSettings」を参照してください。データの保存一般についての詳細は、「Windows Phone 8 のデータ」を参照してください。

このクラスには、ローカル フォルダーに値を追加したり値を更新するメソッドが含まれます。次のコードでは、このメソッドの名前は AddOrUpdateValue です。また、値を読み取るか、または設定が行われていない場合に既定値を割り当てるメソッドも存在します。次のコードでは、このメソッドの名前は GetValueOrDefault です。

設定またはプロパティごとにアクセサー関数が存在します。次のコードには、CheckBoxSettingListBoxSetting、および PasswordSetting という複数のアクセサー関数が含まれています。独自のプロパティを追加するには、独自のアクセサー関数を追加します。設定ごとに、キー名を定義する文字列定数、および既定値を定義する定数が存在します。

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

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

        // The 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 のデザイン ライブラリ」を参照してください。

最初に、ページの phone:PhoneApplicationPage 要素に xmlns:local="clr-namespace:SettingsSample" 名前空間の宣言を追加します。SettingsWithoutConfirmation.xaml ページからの名前空間の宣言を次のコードに示します。

<phone:PhoneApplicationPage 
  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>

追加のコードまたは操作は必要ありません。設定ページが完成しました。

ユーザー名やパスワードなど、テキスト入力を必要とする設定では、入力が完了したらユーザーが確認ボタンを押す必要がある場合があります。このような設定ページについては、コンストラクターにアプリ バーを追加して、ページに [OK] ボタンと [キャンセル] ボタンを追加することができます。

ユーザーが確認ボタンを押す必要があるページについては、一方向のデータ バインディングを使用して現在の値を読み込むことができますが、ユーザーが行った変更は直ちに有効にはなりません。

最初に、ページの phone:PhoneApplicationPage 要素に xmlns:local="clr-namespace:SettingsSample" 名前空間の宣言を追加します。SettingsWithConfirmation.xaml ページからの名前空間の宣言を次のコードに示します。

<phone:PhoneApplicationPage 
  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>

ページのコンストラクターで、[OK] ボタンと [Cancel] ボタンを含むアプリ バーを追加します。

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