あっという間にチャームを作れる"CharmFlyout"を使ってみる

Metroスタイルアプリ（最近はModernスタイルというらしいですね）を作っていて、「よく使う機能なのに実装が超面倒！」と思う機能がいくつかあります。
「設定」チャームを呼び出したときに出てくるメニューに項目を追加し、項目が選択されたらフライアウトを表示する
なんてのも、その一つです。

これまで面倒だったそういった機能の実装を楽にしよう！　という働きは実はあちこちでありまして。そのうちの一つにこういったものがあるのを見つけました。

NuGet Gallery | CharmFlyout 1.0.12

上で書いた作業を簡単にしてくれそうな感じのパッケージです。
さっそく使って見ましょう。

まずはインストールから。
このパッケージはNuGetのGUIからだとなぜかインストールできないので、コマンドラインのパッケージマネージャーからインストールします。
そしてこのパッケージは、VisualStudioにインストールするタイプのものではなく、ソリューションにインストールするタイプのもののようです。

なので、まずはCharmFlyoutを導入したいソリューションを開きます。

f:id:kikuchy:20121018213949p:plain
↑ソリューションを開いたら、「ツール」→「ライブラリパッケージマネージャー」→「パッケージマネージャーコンソール」をクリック。

f:id:kikuchy:20121018214017p:plain
↑パッケージマネージャーコンソールが出るので、

Install-Package CharmFlyout

と入力してEnter。

f:id:kikuchy:20121018214030p:plain
↑これでインストールは完了です。
では早速アプリで使えるようにしていきましょう。

フライアウトを出したいページのXAMLを開き、適当なxmlnsを宣言して、CharmFlyoutが使えるようにします。

xmlns:cfo="using:CharmFlyoutLibrary"

全体像は後で出します。

それからページの中の適当な場所にCharmFlyoutクラスのインスタンスを作成します。

<cfo:CharmFlyout
   x:Name="cfoSettings"
   Heading="フライアウトテスト"
   HeadingBackgroundBrush="#FF4E0000">
    <StackPanel>
        <TextBlock
         FontSize="16">ちゃんと出てるかな？</TextBlock>
    </StackPanel>
</cfo:CharmFlyout>

全体像はこんな感じ。

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

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <cfo:CharmFlyout
           x:Name="cfoSettings"
           Heading="フライアウトテスト"
           HeadingBackgroundBrush="#FF4E0000">
            <StackPanel>
                <TextBlock
                   FontSize="16">ちゃんと出てるかな？</TextBlock>
            </StackPanel>
        </cfo:CharmFlyout>
        <TextBlock Text="CharmFlyoutのテスト！" FontSize="72" FontWeight="Bold" />
    </Grid>
</Page>

XAMLの編集が終わったら、今度はロジックの方を編集します。
「設定」チャームが開かれたときに、このフライアウトを出すためのメニュー項目を作る必要があるからです。
メニュー項目を追加するには、以下のようにします。

public MainPage()
{
    this.InitializeComponent();
    // 「設定」チャームが呼ばれたときに"OnCommandsRequested"メソッドが実行されるようにする
    SettingsPane.GetForCurrentView().CommandsRequested += OnCommandsRequested;
}

// 「設定」チャームが呼ばれたときに、このメソッドが呼ばれる
protected void OnCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs e)
{
    e.Request.ApplicationCommands.Add(new SettingsCommand("コマンドのID", "フライアウト表示", (p) => { cfoSettings.IsOpen = true; }));
}

SettingCommandクラスのコンストラクタ第3引数はラムダ式です。先ほどのXAMLで作ったCharmFlyoutを表示するように仕向けています。

さて、これで準備は完了しました。どうなるか見てみましょう。

f:id:kikuchy:20121018220311p:plain
↑「設定」チャームを選んだ後の画面です。ちゃんと項目が出ていますね。さて、これをクリックすると…