設定チャーム ペインにカスタムの設定項目を表示する

Windows ストア アプリでは設定項目を設定チャームにまとめる必要があります。何もしなければ設定ペインには、「アクセス許可」のみが表示されています。

設定ペインの内容はページ毎に指定する必要があります。簡単に項目を増やすことはできるのですが、各ページで対応しないといけないと考えると少し冗長な気もしますね。

MainPage.xaml.cs

画面突入時に実行されるOnNavigatedToメソッド内にて、SettingsPane.GetForCurrentView()メソッドをコールし、Windows.UI.ApplicationSettings名前空間のSettingsPaneオブジェクトを取得します。

設定ペインを表示する度に発生するCommandsRequestedイベントのイベントハンドラを設定します。このCommandsRequestedイベントは、チャームの[設定]ボタンをタップした直後、設定ペインが表示される直前に発生します。

using System;
using Windows.UI.ApplicationSettings;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace SettingSample
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        // ページ遷移時に実行される
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // Windows.UI.ApplicationSettings名前空間の設定ペインのオブジェクトを取得
            var settings = SettingsPane.GetForCurrentView();
            // ユーザーが設定ペインを表示するときに呼び出される設定項目の初期化処理
            settings.CommandsRequested += settings_CommandsRequested;
        }

CommandsRequestedイベントハンドラでは、引数argsのRequest.ApplicationCommandsプロパティにSettingsCommandオブジェクトを追加します。SettingsCommandのコントラクタ引数には、ID、設定項目、設定項目が選択された場合に発生する処理を書きます。

ここでは適当にメッセージダイアログを表示させるだけにしています。

        // 設定ペインが表示された
        void settings_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
        {
            // 設定コメントを作成します
            var command = new SettingsCommand("ID1", "ほげほげ", 
                new UICommandInvokedHandler(async (target) => {

                // メッセージダイアログで表示する
                var dialog = new MessageDialog("ほげほげですよー");
                await dialog.ShowAsync();
            }));
            args.Request.ApplicationCommands.Add(command);
        }
    }
}

設定チャームを開く際に設定ペインのCommandsRequestedイベントによって表示項目が初期化されます。先ほど登録した「ほげほげ」が表示されるのが確認できます。

毎回設定チャームが開く度に呼び出されるので、ページの選択状態等で表示させる設定項目を変更するのもアリかもしれませんね。

アプリケーション側から設定チャームを表示する

個人的には、設定チャームペインはユーザー操作によってチャームから起動すべしと考えているので、適切な使用方法が思いつきませんが、プログラムから設定チャームを表示させることができます。

MainPage.xamlには大きめの設定をボタンを配置しておきます。ボタンをクリックすると設定チャームを表示させるようにします。

<Page
    x:Class="SettingSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SettingSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="btnSettings" Content="設定" HorizontalAlignment="Center" 
                VerticalAlignment="Center" Height="230" Width="545" FontSize="48" 
                Click="btnSettings_Click"/>
    </Grid>
</Page>

設定ボタンがクリックされると、Windows.UI.ApplicationSettings名前空間のSettingsPaneクラスのShowメソッドを使用して、設定チャームを表示させます。

private void btnSettings_Click(object sender, RoutedEventArgs e)
{
    // 設定チャームを表示する
    SettingsPane.Show();
}