典型的なシナリオ-記号付きのアイコン
AppBarButtonクラスはWindows 8.1の新しいクラスであり、主にCommandBarスクリプトを使用して、コントロールに必要なUI、動作、およびアクセシビリティを提供することを目的としています。
注 ：CommandBarはWindows 8.1の新しい機能であり、標準のコマンドボタンのみを制御するためのものです。 自動的にサイズを変更する組み込み機能（ウィンドウが小さくなるとコマンドが消えることを意味します）と、AppBar内のコマンドをナビゲートするためのキーボードサポートが強化されています。 AppBarを使用していて、標準UIボタンしか持っていない場合は、Windows 8.1アプリケーションで代わりにCommandBarを使用した方が良い
これにより、ラベルとアイコンの2つの属性だけでUIをすばやく作成できます。 たとえば、次のように：
<AppBarButton Label="Reply via Email" Icon="MailReply" />
結果は次のようになります。
そしてそれだけです！ 機能面では、ボタンは同じままで、APIはタイプをフレーム化します。 これにより、ボタンのテキストと視覚的な表示をすばやく設定できます。 押された/ホバーなどのすべての視覚的状態のケア あなたから取った。 また、LabelプロパティはAutomationProperties.Nameボタンの値になり、デフォルトのアクセシビリティを提供するという考えを促進しました。 このIconプロパティメソッドは、次のより詳細なメソッドの簡略版です。
<AppBarButton Label="Reply via Email"> <AppBarButton.Icon> <SymbolIcon Symbol="MailReply" /> </AppBarButton.Icon> </AppBarButton>
ご覧のとおり、ButtonBaseの組み込みプロパティは、Iconプロパティが「存在する」場所です。 このIconプロパティがあるため、他のメソッドを使用できます。 AppBarButtonsタイプのIsCompactプロパティも提供します。これにより、インデントが削減され、説明テキストが自動的に削除されるため、ボタンが占める領域が削減されます。 これは、ウィンドウサイズが要素に対して小さすぎる場合にCommandBarが設定するものです。
他のフォントをアイコンとして使用します。
含まれている190個のアイコンのいずれもニーズに合わない場合は、独自のアイコンでAppBarButtonを使用できます。 フォントアプローチを使用することを強くお勧めします。フォントアプローチはアイコンの優れたスケーラビリティを提供し、ほとんどのWebアプリケーションの主流でもあります。 独自のフォントを作成できることを考慮して、使用できる他の多くの機能もあります。
注 ：私は弁護士ではありません。ライセンスのフォント、アプリケーションに埋め込まれているフォントの使用に関する規則/権利/禁止のフォントを提供している関係者に相談してください。 各フォントがTTF / OTFであるという理由だけで使用できるとは思わないでください。完全に確実にするために、自分でフォントの作成者でない場合はライセンスについて相談してください。
ソーシャルメディアコマンドをアプリケーションに追加したいとします。 人気のあるModern UI Iconsライブラリを使用できます。このライブラリは、 ソーシャルアイコンを読み込むためのフォントも提供します 。 アーカイブを解凍した後、プロジェクトにTTFファイルを含めました（OTFを使用できましたが、TTFがあるのでそれを使用します-Visual Studioプロジェクトでファイルの名前を変更したことにも注意してください）。
<AppBarButton Label="Tweet This"> <AppBarButton.Icon> <FontIcon FontFamily="ms-appx:///modernuiicons.ttf#Modern-UI-Icons---Social" Margin="0,2,0,0" Glyph="&# xe045;" FontSize="37.333" /> </AppBarButton.Icon> </AppBarButton> <AppBarButton Label="Review on Yelp"> <AppBarButton.Icon> <FontIcon FontFamily="ms-appx:///modernuiicons.ttf#Modern-UI-Icons---Social" Margin="0,2,0,0" Glyph="&# xe04f;" FontSize="37.333" /> </AppBarButton.Icon> </AppBarButton>
結果：
かっこいい！ 現在、フォントを使用する場合、正しい値を決定するのが非常に困難な場合があります。これは、FontFamily値の＃記号の後にある必要があります。 私がWindowsで使用するトリックは、TTF / OTFファイルを開くことで、フォント名と同じようにフォントプレビューが表示されます。 これは、ファイルへのパスの後に指定する必要がある同じ値になります。 表示する文字の文字の意味は、使用しているフォントによって異なります。 ほとんどの著者は文字にUnicode値を使用しますが、「B」を単に入力して入力したものを見ました。 これが、比較のためにフォント作成者に相談することをお勧めする理由です（モダンなUIアイコンは、アイコンの横にあるすべてのシンボル値のプレビューを備えた素晴らしいWebページを提供します）。 また、異なるフォントの一部の情報は異なる場合があるため、調整が必要になることに注意してください。 私の場合、Modern UIアイコンを好みに合わせて2ピクセル下に移動しましたが、同時にサイズを2ピクセル増やしました。
その他のアイコンオプション
使用できるアイコンオプションがさらに2つあります。 ほとんどの場合、190個のアイコンのセットの中から必要なものを見つけることができるため、最初にデフォルトの文字モードを使用することをお勧めします。 第二に、フォント内のアイコンの検索を使用することをお勧めします。 他の2つの方法には特別な説明が必要です。これは「コントロールを選択してレイアウトにドラッグする」ほど単純ではなく、提供されるグラフィックによって異なります。
PathIconは、XAMLデータ形式を使用してベクターデータを提供する方法です。 これはベクトルデータです。つまり、適切にスケーリングされます。 ただし、サイズがテンプレートに適合するように、すでに40pxのサイズのデータを提供する必要があります。 これは一部の人にとっては難しいように見えるかもしれません。 InkscapeやSnycfusion Metro Studioなどのツールを使用すると役立ちます。
BitmapIcon -PNG画像を表示する必要がある場合に機能します。 この場合、自動スケーリングは行われないことに注意してください。 ここで提供される各画像には、異なるスケーリング係数の異なる画像（100,140,180）を提供する必要があります。 これは非常に退屈な作業になる可能性があり、実行されない場合、高解像度ディスプレイではあまり良く見えません。 さらに、BitmapIconは、四角形以外の要素に対して特に正確ではありません。
Visual Studioを使用する
Visual Studio 2013には、この領域向けの優れたツールがいくつか用意されており、AppBarボタンの外観を選択できます。 デザイナーのプロパティパネルで、設定可能なさまざまなプロパティを確認できます。
また、前述した他の種類のアイコンを変更するためのツールもあります。
まとめ
いくつかのことを簡単にし、テンプレートによって提供されるコードを減らし、アプリケーションの使いやすさ/アクセシビリティを高めたいと思いました。 これらはシンプルに見えますが、使いやすく、個々の要素ではなく、アプリケーションの中核に集中するのに役立ちます。 他のボタンスタイルといくつかの標準アイコンを使用する場合は、デフォルトフレームワークで提供されている種類のアイコンを使用してAppBarButtonに切り替えることをお勧めします。 この投稿で表明された概念を試すために、 AppBar Windows SDKサンプルの例を必ず確認してください。
これが誰かを助けることを願っています！