MetroStyleApp入門 vol53.複数ページでCharmFlyoutを利用する

日曜日 , 26, 8月 2012 mac WinRT(UWP), C# Leave a comment

　以前、MetroStyleApp入門 vol45.setting flyoutをC#で実装するでsetting flyoutコントロールがC#ではデフォルトで存在しないことを書きました。

　その時はRTMのWindows 8では追加されているだろうと期待したのですが、残念ながら追加されませんでした。

　というわけで、実装方法。

Popupゴリゴリは面倒なのでライブラリで

　ゴリゴリ書くかライブラリか迷いましたがRTMに対応したライブラリがあるのでこれを使うことにします。

　以前紹介したCharmFlyoutがNuGetからDL可能になりました。

　複数のPageから設定チャームを利用する方法はCharmFrame – Adding CharmFlyout to Grid Appsを参考にします。

　「プロジェクト」→「NuGetパッケージの管理」でダイアログを起動。

　「Charm」で検索。

　CharmFlyoutをインストール。

　参照に追加されました。

どこからでも呼び出せるようにUserControlを作成。

　Flyout用のUserControlを作成します。

　ソリューションエクスプローラーから右クリックで「追加」→「新しい項目」

　ユーザーコントロールを追加します。

　今回はSettingFlayoutというコントロール名で作成しました。

　ユーザーコントロールにチャーム用の設定を記載。

　SettingFlayout.xaml.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.ApplicationSettings;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// ユーザー コントロールのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=234236 を参照してください

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

        private void CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
        {
            args.Request.ApplicationCommands.Add(new SettingsCommand("id", "どこからでも設定", (p) => { settingFlyout.IsOpen = true; }));
        }
    }
}

　SettingFlayout.xamlに記載

<UserControl
    x:Class="CharmSample.SettingFlyout"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CharmSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:flyout="using:CharmFlyoutLibrary"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    
    <Grid>
        <flyout:CharmFlyout
           x:Name="settingFlyout"
           Heading="どこからでも設定" HeadingBackgroundBrush="#FF7676E2">
            <StackPanel>
                <Button Height="36" Width="200" Content="設定"/>
            </StackPanel>
        </flyout:CharmFlyout>
    </Grid>
</UserControl>

　これで呼び出される側のFlayoutは完成です。

　では呼び出す側の仕組みはどうなっているか？

　これ色々な処理の参考になる気がするんですが、Frameクラスを拡張しています。

　(ライブラリがみんなこれやると困るか・・・)

　App.xaml.csのrootFrame = new Frame();行を以下のように修正。

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

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