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

日曜日 , 26, 8月 2012 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() };

 

 

 

 ページに依存しない形で呼び出すことができました。


Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です