エクスポート (0) 印刷
すべて展開
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

XAML で Windows Phone のアプリ バーを作成する方法

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

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

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

App Bar expanded with menu items

このトピックは、次のセクションで構成されています。

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.
    }
    

表示:
© 2015 Microsoft