読者です 読者をやめる 読者になる 読者になる

Kikuchy's Second Memory

つくる楽しさをもっと伝えたい。プログラムを書いていて、わからなかったこと・気付いた事を書き留めています。

あっという間にチャームを作れる"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
↑「設定」チャームを選んだ後の画面です。ちゃんと項目が出ていますね。さて、これをクリックすると…

f:id:kikuchy:20121018220406p:plain
↑キター! ちゃんと動いてますね!



さて、いかがでしたでしょうか。
これまでは、

  • ウィンドウの高さを取って
  • ポップアップを生成して
  • あらかじめ別に用意しておいたフライアウトの中身のページを開いて

とかやらなきゃいけなかったのが阿呆らしいくらいに簡単にできてしまいました。
単なる設定画面を出すだけならばこれで十分ですね。