アプリバーとフライアウト (3/5)

■メニューのフライアウト

アプリバーでは、表示できるアイコンの数には限りがあります。横幅に並びきれるだけですから、何十個ものアイコンを並べるわけにはいきませんね。まぁ、複数行に並べることもできますが、あまりたくさん並べてしまうと、「アイコンでシンプルにわかりやすく」まとめる意味がなくなってしまうでしょう。

多数の機能を実装したい場合には、アプリバーをクリックしたらメニューが現れ、そこで必要な処理を選択する、というようにするのが一般的です。

必要に応じてポップアップして現れるUIを、Windows 8では「フライアウト」といいます。まずはフライアウトの基本ともいえる「メニューフライアウト」を使ってみましょう。

メニューフライアウトは、<MenuFlyout>というタグを使って作成します。これは、<AppBarButton>タグの中に<AppBarButton.Flyout>というタグを用意し、その中に記述します。整理するとこんな感じです。

<AppBarButton Label="ラベル">
    <AppBarButton.Icon>
        <SymbolIcon Symbol="アイコン" />
    </AppBarButton.Icon>

    <AppBarButton.Flyout>
        <MenuFlyout>
            ……ここにメニュー項目を用意する……
        </MenuFlyout>
    </AppBarButton.Flyout>

</AppBarButton>

これで、アプリバーのそのボタンをクリックすると自動的にメニューがポップアップして現れるフライアウトが作成できます。

■メニュー項目について

<MenuFlyout>タグ内に記述するメニュー項目にはいくつかの種類があります。以下に主なものを整理しておきましょう。

<MenuFlyoutItem Text="メニュー名" />――これが通常のメニュー項目です。Textにメニューの名前を指定するだけです。

<ToggleMenuFlyoutItem Text="メニュー名" />――これは、選択するとチェックをON/OFFするメニュー項目です。

<MenuFlyoutSeparator />――これはメニューのセパレータです。区切りを表示するのに使います。

これらを記述することでメニュー項目を作成できます。メニュー選択時の処理は、Buttonなどと同様、Click属性にメソッド名を指定することで用意できます。

では、先ほどのサンプルを書き換え、１つ目のボタンをクリックしたらメニューをフライアウトするようにしてみましょう。下のリスト欄にコードを掲載しておきました。アプリバーの「Button 1」をクリックすると、「menu 1」「menu 2」という項目を持つメニューがその下に表示されます。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

<AppBar Background="#33ff00ff" >
            <Grid>
                
                <StackPanel Orientation="Horizontal">
                    
                    <AppBarButton Label="Button1">
                        <AppBarButton.Icon>
                            <SymbolIcon Symbol="Emoji" />
                        </AppBarButton.Icon>

                        <AppBarButton.Flyout>
                            <MenuFlyout>
                                <MenuFlyoutItem Text="menu 1" />
                                <ToggleMenuFlyoutItem Text="menu 2" />
                            </MenuFlyout>
                        </AppBarButton.Flyout>
                        
                    </AppBarButton>
                    <AppBarButton Label="Button2">
                        <AppBarButton.Icon>
                            <SymbolIcon Symbol="Help" />
                        </AppBarButton.Icon>
                    </AppBarButton>

                </StackPanel>
                
            </Grid>
        </AppBar>

<< 前へ　

　次へ >>

記事のリストに戻る

PC Site G+ mail