Windows Phoneのアプリケーション バー アイコン ボタン

2013/12/05

対象: Windows Phone 8 | Windows Phone OS 7.1

既定のアプリ バーは一連のアイコン ボタンと省略記号で、電話の画面の下部に示されます。アプリでよく使用する主要な操作に対してアイコン ボタンを使用します。操作によっては、アイコンで意味を明確に伝達するのが難しいことがあります。このような場合には、代わりにメニュー項目を使用することを検討してください。詳細については、「Windows Phone のアプリ バー」を参照してください。

アプリ バーの例を次の図に示します。

App Bar in default size

アプリで直接使用したり、独自のアイコンを作成するためのガイドとして使用したりできるアプリ バー アイコンのセットが、Windows Phone SDK と共にインストールされます。暗い背景と明るい背景両方のサンプル アイコンは次の場所にあります。

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons

メモメモ:

使用する必要があるのは、dark フォルダーにあるアイコン ファイルだけです。Windows Phone では、選択したテーマ (白または黒) に従って、自動的にアイコンの色が設定されます。

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

アプリ バーに表示されるアイコン ボタンのベスト プラクティスを以下に示します。

  • アイコン画像のサイズは、48 x 48 ピクセルとします。ボタン用の前景グラフィックは、円と重ならないように、画像の中心の 26 x 26 領域に合わせる必要があります。

  • 各ボタンに表示される円はアプリ バーによって描画されるので、ソース画像には含めないでください。

  • アイコン画像では、アルファ チャネルを使用して白の前景色と透明の背景を使用する必要があります。Windows Phone では、選択したテーマ (白または黒) に従ってアイコンの色が自動的に設定され、色付きのアイコンを使用した場合、この効果の表示が予期しない結果となる可能性があります。

  • ページ スタック内では前に戻るボタンを作成しないでください。すべての Windows Phone には、前に戻る操作で使用される専用の [戻る] ハードウェア ボタンがあります。

  • アイコン ボタンのラベルは可能な限り短くしてください。デバイスの言語が英語である場合、ラベルは 1 行のみで表示され、必要に応じて切り詰められます。

  • 電話を回転させたときに、意味が明確に伝わるアイコンを選択します。電話を横向きにすると、アプリ バーは画面の端に垂直に表示されます。アイコン ボタンは、ユーザーに対してまっすぐに表示されるように回転します。回転する際、特に、2 つのアイコンが <<>> のように互いに鏡像である場合は、アイコンの意味がわかりにくくなる可能性があります。

画像をアプリ バーのアイコン ボタンに使用するには、事前にそれらをアプリに追加する必要があります。この手順では、Images という名前のフォルダーを作成し、このフォルダーにアイコン ファイルを追加します。フォルダーには任意の名前を付けることができますが、Images は既定の XAML アプリ バーでの名前と一致しています。

Windows Phone アプリにアイコン ボタンの画像を追加するには

  1. [ソリューション エクスプローラー] でプロジェクト名を右クリックし、[追加] をポイントして、[新しいフォルダー] をクリックします。

  2. フォルダーに Images という名前を付けます。

  3. [ソリューション エクスプローラー] で、Images フォルダーを右クリックし、[追加] をポイントして、[既存の項目] をクリックします。

  4. アイコン ファイルがある場所を参照し、1 つまたは複数のファイルを選択して、[追加] をクリックします。

  5. [ソリューション エクスプローラー] で、新しいファイルをすべて選択します。

  6. [プロパティ] ウィンドウで、新しいファイルに次のプロパティを設定します。

    プロパティ

    ビルド アクション

    コンテンツ

    出力ディレクトリにコピー

    [コピーしない]

    注意注意:

    アイコンをボタン画像として使用するには、[ビルド アクション] を [コンテンツ] に設定する必要があります。

  7. (省略可能) プロジェクト内のアイコン ファイルの名前を変更します。

表示:
© 2014 Microsoft