WPF の Fluent.Ribbon でリボンプログラミング第5回：クイックアクセスバー、ツールバーメニューを表示する

今回は作成済みウインドウに対し、クイックアクセスバーへのアイコン表示、ツールバーメニューへコントロールの配置を行います。

クイックアクセスバーの表示と定義

ウインドウのタイトルバーに表示されるアイコン類の定義および表示方法です。追加後のイメージはこんな感じになります。

f:id:Takachan:20170626183051p:plain

追加方法ですが、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 上のコントロールを右クリックして追加することができます。

f:id:Takachan:20170626183857p:plain

画像は、大アイコンにはIconを設定していないので空白にヘッダーのみが表示されています（あれ？

また、クイックアクセスバーへ追加したくない要素は CanAddToQuickAccessToolBar=“False” を指定することにより追加を抑制できます。

<Fluent:Button Header="大ボタン"
               KeyTip="BI"
               CanAddToQuickAccessToolBar="False"
               LargeIcon="..."/>

該当するリボンコントロールのコンテキストメニューがグレーアウトして選択できなくなります。（ものすごいわかりにくいですが・・・）

f:id:Takachan:20170626184518p:plain

ツールバーメニューの表示と定義

画面の右端のリボンを折りたたむボタンの列に表示されるコントロールをツールバーメニューと呼びます。追加すると以下表示になります。

f:id:Takachan:20170626185713p:plain

追加方法ですが、リボンのルート要素直下に、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 要素であれば、なんでも追加できます。

以上で、クイックアクセスバー、ツールバーメニューの説明は終了です。次回はコンボボックス、スピナーを実装していきます。

PG日誌

WPF の Fluent.Ribbon でリボンプログラミング第5回：クイックアクセスバー、ツールバーメニューを表示する

クイックアクセスバーの表示と定義

ツールバーメニューの表示と定義

各記事へのリンク