酢ろぐ!

カレーが嫌いなスマートフォンアプリプログラマのブログ。

設定チャームからのカスタム項目を実装する

なんか文章が適当なので後でなおします。

設定チャーム ペインにカスタムの設定項目を表示する - 酢ろぐ!」の続き的なもの。フライアウト作るの面倒やねんってことで、ライブラリを使って実装します。

JohnMichaelHauck氏のCharmFlyoutというライブラリをNuGetでインストールします。NuGet超便利ですね。

[新しい項目]でユーザーコントロールを追加します。名前はSettingFlyouts.xamlにでもしておきましょう。

XAML

<UserControl
    x:Class="SettingsPaneSample2.SettingFlyouts"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SettingsPaneSample2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:cf="using:CharmFlyoutLibrary"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    
    <Grid>
        <!-- 設定チャームからまず遷移するフライアウト -->
        <cf:CharmFlyout x:Name="settingsSubFlyout" Heading="より詳細な設定横目"
                HeadingBackgroundBrush="#FF4E0000" ParentFlyout="{Binding ElementName=cfoSettings}">
            <StackPanel>
                <Button Click="clickViewPrivacyPolicy" Content="プライバシーポリシーを見る" />
            </StackPanel>
        </cf:CharmFlyout>
        
        <!-- プライバシーポリシーを表示するフライアウト -->
        <cf:CharmFlyout x:Name="privacyPolicyFlyout" Heading="Privacy Policy"
                HeadingBackgroundBrush="#FF4E0000" ParentFlyout="{Binding ElementName=settingsSubFlyout}">
            <StackPanel>
                <TextBlock FontSize="16">Sub-setting 1</TextBlock>
                <TextBlock FontSize="16">Sub-setting 2</TextBlock>
            </StackPanel>
        </cf:CharmFlyout>
    </Grid>
</UserControl>

コード

using Windows.UI.ApplicationSettings;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace SettingsPaneSample2
{
    public sealed partial class SettingFlyouts : UserControl
    {
        public SettingFlyouts()
        {
            this.InitializeComponent();
            SettingsPane.GetForCurrentView().CommandsRequested += CommandsRequested;
        }

        private void CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
        {
            if (args.Request.ApplicationCommands.Count != 0)
            {
                return;
            }

            args.Request.ApplicationCommands.Add(
                new SettingsCommand("ID", "より詳細な設定をおこなう", 
                    _ => { settingsSubFlyout.IsOpen = true; }));
        }

        private void clickViewPrivacyPolicy(object sender, RoutedEventArgs e)
        {
            privacyPolicyFlyout.IsOpen = true;
        }
    }
}

MainPage.xaml.csでの変更

アプリ全体で有効な設定コントラクトにしたいので、ルートのフレームを置き換えます。

        /// <summary>
        /// アプリケーションがエンド ユーザーによって正常に起動されたときに呼び出されます。他のエントリ ポイントは、
        /// アプリケーションが特定のファイルを開くために呼び出されたときに
        /// 検索結果やその他の情報を表示するために使用されます。
        /// </summary>
        /// <param name="args">起動要求とプロセスの詳細を表示します。</param>
        protected override void OnLaunched(LaunchActivatedEventArgs args)
        {
            Frame rootFrame = Window.Current.Content as Frame;

            // ウィンドウに既にコンテンツが表示されている場合は、アプリケーションの初期化を繰り返さずに、
            // ウィンドウがアクティブであることだけを確認してください
            if (rootFrame == null)
            {
                // ナビゲーション コンテキストとして動作するフレームを作成し、最初のページに移動します
                //rootFrame = new Frame();
                rootFrame = new CharmFlyoutLibrary.CharmFrame() { CharmContent = new SettingFlyouts() };

あとはプロジェクトを実行して、設定チャームを表示させればいい感じに、設定項目間を移動してくれるのが分かります。