今回は作成済みウインドウに対し、クイックアクセスバーへのアイコン表示、ツールバーメニューへコントロールの配置を行います。
クイックアクセスバーの表示と定義
ウインドウのタイトルバーに表示されるアイコン類の定義および表示方法です。追加後のイメージはこんな感じになります。
追加方法ですが、Ribbon のルート要素に対して以下コードを追加します。
<Fluent:Ribbon> <!-- クイックアクセスツールバー --> <Fluent:Ribbon.QuickAccessItems> <Fluent:QuickAccessMenuItem IsChecked="True"> <Fluent:Button Header="FontExp" Icon="..."></Fluent:Button> </Fluent:QuickAccessMenuItem> <Fluent:QuickAccessMenuItem IsChecked="True"> <Fluent:Button Header="FontRedu" Icon="..."></Fluent:Button> </Fluent:QuickAccessMenuItem> <Fluent:QuickAccessMenuItem IsChecked="False"> <Fluent:Button Header="FontUD" Icon="..."></Fluent:Button> </Fluent:QuickAccessMenuItem> </Fluent:Ribbon.QuickAccessItems>
QuickAccessItems が QuickAccessMenuItem のコレクションとなっているため、直下の要素は MenuItem を宣言します。実際のボタンは、MenuItem の子要素として定義を行います。MenuItem の子要素は、標準のコンテンツモデルのため、自由にカスタイマイズが可能です。
IsChecked プロパティですが、True の場合、最初からアクセスバーに表示、Falseの場合、画像のように、クイックアクセスバー右端の「↓」メニュー内に配置され、チェックを入れるとツールバーに表示されるようになります。(ただ、ちょっと True にしてもいう事聞かないみたいですが…)
また、各コントロールはデフォルトでクイックアクセスバーへ追加するコマンドが搭載されています、以下画像の通り Ribbon 上のコントロールを右クリックして追加することができます。
画像は、大アイコンにはIconを設定していないので空白にヘッダーのみが表示されています(あれ?
また、クイックアクセスバーへ追加したくない要素は CanAddToQuickAccessToolBar=“False” を指定することにより追加を抑制できます。
<Fluent:Button Header="大ボタン" KeyTip="BI" CanAddToQuickAccessToolBar="False" LargeIcon="..."/>
該当するリボンコントロールのコンテキストメニューがグレーアウトして選択できなくなります。(ものすごいわかりにくいですが・・・)
ツールバーメニューの表示と定義
画面の右端のリボンを折りたたむボタンの列に表示されるコントロールをツールバーメニューと呼びます。追加すると以下表示になります。
追加方法ですが、リボンのルート要素直下に、Fluent:Ribbon.ToolBarItems 要素を追加し、その中にコントロールを配置していきます。
<Fluent:Ribbon> <!-- ツールバーメニュー--> <Fluent:Ribbon.ToolBarItems> <Fluent:Button Header="ツールバーボタン1" Size="Small" Icon="..."/> <Fluent:Button Header="ツールバーボタン2" Size="Small" Icon="..."/> </Fluent:Ribbon.ToolBarItems>
ToolBarItems 以下に配置できるコントロールは UI 要素であれば、なんでも追加できます。
以上で、クイックアクセスバー、ツールバーメニューの説明は終了です。次回はコンボボックス、スピナーを実装していきます。
各記事へのリンク
- 連載一覧ページ
- 第1回:構成要素の紹介
- 第2回:導入方法とウインドウ表示
- 第3回:タブ、グループ、ボタンの配置
- 第4回:ツールチップ、コンテキストタブを表示する
- 第5回:クイックアクセスバー、ツールバーメニューを表示する(このページ)
- 第6回:コンボボックス、スピナーを表示する
- 第7回:ギャラリーを表示する
- 第8回:アプリケーションメニュー、バックステージを表示する