言語: HTML | XAML

クイック スタート: アプリ バーの追加 (XAML)

アプリ バーを使って、ナビゲーション機能、コマンド、ツールを表示します。これらは、不要なときには隠すことができます。 アプリ バーは、ページの上部と下部のどちらか、またはその両方に置くことができます。アプリ バーは既定で非表示になっています。ユーザーが右クリックするか、Windows キー + Z キーを押すか、画面の上端または下端をスワイプすると、開いたり閉じたりします。また、ユーザーが選んだりアプリを操作したときにプログラムを使って表示することもできます。

この機能の実際の使い方については「アプリの機能の概要」シリーズの次のトピックをご覧ください:  Windows ストア アプリ UI の概要

必要条件

AppBar と CommandBar の使い分け

XAML フレームワークに用意されている CommandBar コントロールと AppBar コントロールを使うと、画面の端がスワイプされたときにその上端や下端に UI を表示することができます。CommandBar は AppBar と比べて、組み込まれている機能は多いですが、配置できるコンテンツの種類は限られます。AppBar は、あらゆる XAML (Extensible Application Markup Language) コンテンツを追加できますが、レイアウトとサイズ変更は自分で行う必要があります。

重要  CommandBarAppBarButtonAppBarToggleButtonAppBarSeparator の各コントロールは、Windows 8.1 をターゲットとするアプリでのみ利用できます。Windows 8 をターゲットとするアプリでは、AppBar コントロールを使う必要があります。
  1. AppBarButton コントロール、AppBarToggleButton コントロール、AppBarSeparator コントロールだけが含まれるアプリ バーが必要な場合は、CommandBar を使ってください。CommandBar には、次の機能が備わっているため基本的なアプリ バーを簡単に作成できます。

    • 右側のプライマリ コマンドと左側のセカンダリ コマンドを使ったコマンドの自動レイアウト
    • アプリのサイズが変化したときのアプリ バー コマンドの自動サイズ変更
  2. より複雑なコンテンツ (画像、進行状況バー、検索ボックス、テキスト ブロック、独自のスタイルを適用したボタンなど) が必要な場合は、AppBar コントロールを使います。AppBar にカスタム コンテンツを組み合わせて、ツールやナビゲーション UI が並んだバーを作成できます。AppBar コントロールにコマンドを配置するときは、画面サイズの変更に合わせて、AppBar に表示されるコンテンツのサイズや位置を調整する必要があります。詳しくは、「さまざまなビューでアプリ バーを使う方法」をご覧ください。

アプリ バーの追加

  • アプリ バーを追加するには、CommandBar コントロールまたは AppBar コントロールを PageTopAppBar プロパティまたは BottomAppBar プロパティに割り当てます。

    アプリにナビゲーションを表示するには、ナビゲーション (上部のアプリ) バーを使います。一般に、独自のスタイルを適用したナビゲーション用のボタンには、AppBar を使います。詳しくは、「Windows ストア アプリのナビゲーション デザイン」をご覧ください。

    コマンドとツールを表示するには、下部のアプリ バーを使います。詳しくは、「Windows ストア アプリのコマンド実行の設計」をご覧ください。

    次の例では、上部のアプリ バーとして AppBar コントロールを、下部のアプリ バーとして CommandBar コントロールを追加しています。

    
    
    <Page.TopAppBar>
        <AppBar>
            <!-- AppBar content -->
        </AppBar>
    </Page.TopAppBar>
    
    <Page.BottomAppBar>
        <CommandBar>
            <!-- CommandBar content -->
        </CommandBar>
    </Page.BottomAppBar>
    
    

複数ページ アプリでは、共通のコマンドがあるアプリ バーを複数のページで共有できます。詳しくは、「複数のページでアプリ バーを共有する方法」をご覧ください。

CommandBar へのコンテンツの追加

  • CommandBar にコンテンツを追加するには、CommandBarPrimaryCommands コレクションと SecondaryCommands コレクションに対し、AppBarButtonAppBarToggleButtonAppBarSeparator の各コントロールを追加します。XAML で CommandBar に直接追加されたコントロールは、自動的に PrimaryCommands コレクションに追加されます。

    PrimaryCommandsSecondaryCommands から成る CommandBar の例を次に示します。

    
    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Label="Refresh" Icon="Refresh" Click="AppBarButton_Click"/>
            <AppBarButton Label="Help" Icon="Help" Click="AppBarButton_Click"/>
    
            <CommandBar.SecondaryCommands>
                <AppBarButton Label="Edit" Icon="Edit" Click="AppBarButton_Click"/>
                <AppBarButton Label="Remove" Icon="Remove" Click="AppBarButton_Click"/>
                <AppBarButton Label="Add" Icon="Add" Click="AppBarButton_Click"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
    
    

    下部のアプリ バー コントロール

AppBar へのコンテンツの追加

  • AppBar に子として追加できるコンテンツは 1 つだけであるため、通常は、レイアウト パネルを追加します。その他のコントロールはレイアウト パネルに追加することができます。

    ナビゲーション ボタンと検索ボックスから成る AppBar の例を次に示します。

    
    <Page.TopAppBar>
        <AppBar>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal">
                    <Button Content="Home" Width="140" Height="80" Click="AppBarButton_Click"/>
                    <Button Content="Page 1" Width="140" Height="80" Click="AppBarButton_Click"/>
                    <Button Content="Page 2" Width="140" Height="80" Click="AppBarButton_Click"/>
                </StackPanel>
                <SearchBox Grid.Column="1" Width="300" Height="50" HorizontalAlignment="Right"/>
            </Grid>
        </AppBar>
    </Page.TopAppBar>
    
    

    下部のアプリ バー コントロール

プログラムを使ってアプリ バーを開く

既定では、アプリ バーはユーザーが右クリックするか、Windows キー + Z キーを押すか、画面の上端または下端をスワイプすると表示されます。ユーザーがこれらのアクションのどれか 1 つを実行すると、ページの上部と下部にアプリ バーがある場合、両方が表示されます。IsOpen プロパティを true に設定して、プログラムを使ってアプリ バーを開くこともできます。 これを行う場合、プロパティの値を (上部または下部) に設定した特定のアプリ バーだけが開きます。

  1. ページが読み込まれたときに最初にアプリ バーが開かれるようにするには、XAML で IsOpen プロパティを true に設定します。
    
    <Page.BottomAppBar>
        <CommandBar IsOpen="True">
            <AppBarButton Label="Refresh" Icon="Refresh" Click="AppBarButton_Click"/>
            <AppBarButton Label="Help" Icon="Help" Click="AppBarButton_Click"/>
        </CommandBar>
    </Page.BottomAppBar>
    
    
  2. プログラムを使ってアプリ バーを開くには、コード内で、IsOpen プロパティを true に設定します。アプリ バーをコード内で参照するには、アプリ バーに名前を付けて参照するか、TopAppBar プロパティまたは BottomAppBar プロパティを参照します。
    
    private void OpenButton_Click(object sender, RoutedEventArgs e)
    {
        if (this.BottomAppBar != null)
        {
            this.BottomAppBar.IsOpen = true;
        }
    }
    
    

    ユーザーがアプリ内の項目を操作する場合、通常は状況依存のコマンドを表示するためにプログラムを使ってアプリ バーを開きます。たとえば、ユーザーがアプリ内でテキストを選んだ場合、書式設定コマンドのあるアプリ バーを表示するようにします。状況依存のコマンドを表示する場合は、コンテキストがコマンドを表示したままになるまで、アプリ バーの解除モードを固定に設定します。

アプリ バーを固定にする

既定では、アプリ バーはユーザーがアプリ バーの外側のどこかでアプリを操作するときには閉じています。コマンドを表示させたままにするには、IsSticky プロパティを true に設定して解除モードを変更できます。アプリ バーが固定のときは、ユーザーが右クリックするか、Windows キー + Z キーを押すか、画面の上端または下端をスワイプした場合にのみ閉じます。

  1. ユーザーがアプリを操作しているときにもアプリ バーを表示したままにするには、XAML で IsSticky プロパティを true に設定します。
    
    <Page.TopAppBar>
        <AppBar IsSticky="True">
            <StackPanel Orientation="Horizontal">
                <Button Content="Home" Width="140" Height="80" Click="AppBarButton_Click"/>
                <Button Content="Page 1" Width="140" Height="80" Click="AppBarButton_Click"/>
                <Button Content="Page 2" Width="140" Height="80" Click="AppBarButton_Click"/>
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>
    
    
  2. プログラムを使ってアプリ バーの解除モードを変更するには、コード内で、IsSticky プロパティを true に設定します。アプリ バーをコード内で参照するには、アプリ バーに名前を付けて参照するか、TopAppBar プロパティまたは BottomAppBar プロパティを参照します。
    
    private void OpenButton_Click(object sender, RoutedEventArgs e)
    {
        if (this.TopAppBar != null)
        {
            this.TopAppBar.IsSticky = true;
        }
    }
    
    

要約と次のステップ

このクイック スタートでは、C++、C#、または Visual Basic で開発された Windows ストア アプリに、アプリ バーを追加する方法を説明しました。

一貫性のあるユーザー エクスペリエンスを実現するため、「アプリ バーのガイドライン」を確認してください。

AppBarButton コントロールについて詳しくは、「クイック スタート: アプリ バー ボタンの追加」をご覧ください。

関連トピック

XAML AppBar コントロールのサンプルに関するページ
クイック スタート: アプリ バー ボタンの追加
Windows ストア アプリのコマンド実行の設計
AppBar
リバーシのサンプル機能のシナリオ: アプリ バー

 

 

表示:
© 2015 Microsoft