MSDN ライブラリ

方法: Windows Phone の XAML でアプリケーション バーを作成する

2012/02/09

XAML を使用して、ユーザーがアプリケーションでよく使用するタスクにすばやくアクセスできるようにするアプリケーション バーを作成できます。アプリケーション バーを XAML とコードのどちらで作成すべきか決定する際は、「Windows Phone のアプリケーション バーの概要」を参照してください。

ユーザーが拡張したアプリケーション バーの例を次の図に示します。

メニュー項目がある展開されたアプリケーション バー

Windows Phone SDK に付属するページ テンプレートには、コメントアウトされたサンプル アプリケーション バーの XAML が含まれています。XAML のコメントを外して、アプリケーション バーを作成します。この手順は、ページが含まれる Windows Phone アプリケーションがあることを前提としています。画像をアプリケーション バーのアイコン ボタンに使用するには、事前にそれらをアプリケーションに追加する必要があります。詳細については、「Windows Phone のアプリケーション バーのアイコン ボタン」を参照してください。

XAML を使用してアプリケーション バーを作成するには

  1. ページをデザイナーで開いて XAML を表示します。

  2. 既定でページに追加されるアプリケーション バー要素のサンプルを見つけます。以下のようなものです。

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        …
    </phone:PhoneApplicationPage.ApplicationBar>-->
    

    ページがパノラマ ページである場合、サンプル アプリケーション バーは含まれていません。アプリケーション バーを XAML の最後の行の前に追加します。以下のようなものです。

    </phone:PhoneApplicationPage>
    
    注注:

    アプリケーション バーには、パノラマ ページでスペースを節約するためにデザインされた新しいミニモードが用意されています。詳細については、「Windows Phone のアプリケーション バーの概要」を参照してください。

  3. 次の XAML のコメントを解除するか、この XAML を追加します。

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
    
  4. 必要に応じてアプリケーション バーのプロパティを設定します。プロパティの詳細については、「Windows Phone のアプリケーション バーの概要」を参照してください。

  5. 必要に応じて、アイコン ボタンを削除または追加します。アイコンの画像とボタンのテキストを設定します。

  6. メニュー項目は省略可能です。必要に応じて、メニュー項目を削除または追加します。テキストを設定します。

  7. 2 つのアイコン ボタンと 2 つのメニュー項目を持つアプリケーション バーの例を次に示します。クリックのイベントとハンドラーは次の手順で追加します。

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar Mode="Default" Opacity="1.0" IsMenuEnabled="True" IsVisible="True">
    
            <shell:ApplicationBarIconButton IconUri="/Images/save.png" Text="save"/>
            <shell:ApplicationBarIconButton IconUri="/Images/settings.png" Text="settings"/>
    
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="menu item 1" />
                <shell:ApplicationBarMenuItem Text="menu item 2" />
            </shell:ApplicationBar.MenuItems>
    
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
    

アイコン ボタンとメニュー項目は、コード内で処理できるクリック イベントを公開します。

クリック イベントを処理するには

  1. ページをデザイナーで開いて XAML を表示します。

  2. アイコン ボタンやメニュー項目ごとに、ユーザーがクリックしたときに呼び出すイベントを特定します。前の手順で作成したアプリケーション バーにクリック イベントを特定した例を示します。

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar Mode="Default" Opacity="1.0" IsMenuEnabled="True" IsVisible="True">
    
            <shell:ApplicationBarIconButton Click="Save_Click" IconUri="/Images/save.png" Text="save" />
            <shell:ApplicationBarIconButton Click="Settings_Click" IconUri="/Images/settings.png" Text="settings" />
    
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Click="MenuItem1_Click" Text="menu item 1" />
                <shell:ApplicationBarMenuItem Click="MenuItem2_Click" Text="menu item 2" />
            </shell:ApplicationBar.MenuItems>
    
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
    
  3. エディターでページの分離コード ファイルを開きます。

  4. アイコン ボタンやメニュー項目ごとに、ユーザーがクリックしたときに呼び出すイベントを追加します。ページ クラス内にコードを追加します。前の手順で作成したアプリケーション バーに追加したクリック イベントの例を示します。

    private void Save_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Save button works!");
        //Do work for your application here.
    }
    
    private void Settings_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Settings button works!");
        //Do work for your application here.
    }
    
    private void MenuItem1_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Menu item 1 works!");
        //Do work for your application here.
    }
    
    private void MenuItem2_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Menu item 2 works!");
        //Do work for your application here.
    }
    

表示:
© 2016 Microsoft