次の方法で共有


カスタム コンテンツを持つアプリ バーの追加 (HTML)

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

JavaScript を使って Windows ストア アプリにカスタム コンテンツを含む AppBar を追加できます。AppBar コントロール、およびそこに含まれる AppBarCommand コントロールは、カスタム HTML コンテンツの追加、ポップアップの作成、トグル コマンドの挿入など、さまざまな方法でカスタマイズできます。

  アプリの永続的なナビゲーション バーを作成する場合は、代わりに NavBar コントロールを使います。ナビゲーション バーを作成する方法について詳しくは、「クイックスタート: ナビゲーション バーおよび戻るボタンの追加」をご覧ください。

 

必要条件

手順

空のアプリ テンプレートを使って新しいプロジェクトを作る

  1. Microsoft Visual Studio を起動します。

  2. [スタート ページ] タブで、[新しいプロジェクト] をクリックします。[新しいプロジェクト] ダイアログ ボックスが表示されます。

  3. [インストール済み] ウィンドウで、[テンプレート][JavaScript] の順に展開し、テンプレートの種類として [Windows ストア アプリ] を選びます。JavaScript で使うことができるプロジェクト テンプレートがダイアログの中央のウィンドウに表示されます。

  4. 中央のウィンドウで、[空のアプリケーション] プロジェクト テンプレートを選びます。

  5. [名前] ボックスに「Custom AppBar デモ」と入力します。

  6. [OK] をクリックしてプロジェクトを作ります。

2. バー コントロールの追加とコマンドのカスタマイズ

カスタマイズ可能な AppBar コマンドにより AppBar をカスタマイズできます。type プロパティを使うことにより、AppBarCommand コントロールの種類を変更できます。特定の HTML 要素のみがホストできる AppBar コマンドの種類があります。

AppBarCommand.type プロパティには、次の 5 つの値のいずれかを設定できます。

  • button—type の既定値です。標準のボタンを定義するもので、<button> 要素にのみ適用できます。
  • flyout—隣接する HTML フラグメントを表示するボタンを作成します (ポップアップ)。ポップアップの AppBarCommand を作成するには、種類として "flyout" を指定し、flyout プロパティを設定します。flyout プロパティでは、定義された Flyout コントロールを参照する必要があります。<button> 要素のみがポップアップの AppBarCommand をホストできます。
  • toggle—選択またはクリアできるボタンを作成します。ボタンが選択されると、AppBarCommand のアイコンの色が反転します (たとえば、黒から白、白から黒など)<button> 要素のみがトグルの AppBarCommand をホストできます。
  • separator—他の AppBarCommand コントロールとの間で視覚的に分離するために AppBar に水平線を描きます。<hr/> 要素のみが分離線の AppBarCommand をホストできます。
  • content—内部で他の HTML マークアップをホストできる AppBarCommand を作成します。ホストされるマークアップには、テキスト、<input> タグ、さらには JavaScript 用 Windows ライブラリ (WinJS) コントロールのサブセットですら含まれます。 <div> 要素のみがコンテンツの AppBarCommand をホストできます。

HTML で AppBar コントロールと AppBarCommand コントロールを宣言により作成することも、JavaScript を使って実行時に作成することもできます。この例では、default.html の HTML マークアップ内で宣言を使って AppBar を作ります。この例には、7 つの AppBarCommand コントロールが含まれます。

Hh780658.wedge(ja-jp,WIN.10).gifAppBar にカスタム コンテンツを追加するには

  1. ソリューション エクスプローラーで、ソリューションのルートから default.html ファイルを開きます。

  2. <body> タグ内のマークアップを、次のマークアップを含むタグに置き換えます。

    <div data-win-control="WinJS.UI.AppBar"
        data-win-options="{
            placement: 'bottom'
        }">
        <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{
                id: 'default'
                icon: 'placeholder',
                label: 'Button',
                type: 'button'
        }">
        </button>
        <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{
                id: 'flyout', 
                icon: 'volume', 
                label: 'Volume', 
                type: 'flyout',
                flyout: select('#volumeFlyout')}">
        </button>
        <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{
                id: 'toggle', 
                icon: 'filter', 
                label: 'Filter', 
                type: 'toggle'}">
        </button>
        <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'separator' }"/>
        <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'content' }">
            <p>You can include a wide variety of HTML inside of a 'content' AppBarCommand, <br/>
            including HTML and some WinJS controls.</p>
        </div>
        <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'content' }">
            <div id="itemContainer"
                 data-win-control="WinJS.UI.ItemContainer">
                <h3>Item Container</h3>
            </div>
        </div>
    </div>
    <div id="volumeFlyout"
         data-win-control="WinJS.UI.Flyout">
        <h3>Volume</h3> <input type="range" />
    </div>
    

要約

このクイックスタートでは、カスタム ボタンを含む AppBar をアプリに追加しました。

この記事では、ナビゲーション バーを作成する方法については説明しません。ナビゲーション バーを作成する方法については、「クイックスタート: ナビゲーション バーおよび戻るボタンの追加」をご覧ください。

関連トピック

WinJS.UI.AppBar

WinJS.UI.AppBarCommand.type

WinJS.UI.AppBarCommand.flyout

クイック スタート: ポップアップの追加