WPFのFluent.Ribbonでリボンプログラミング 第8回：アプリケーションメニュー、バックステージを表示する

今回は、前回作成済みのウインドウに対し、アプリケーションメニュー、バックステージを表示したいと思います。制御はさておきコントロールの説明になります。

アプリケーションメニューとは？

Windows8以降を使用している方はエクスプローラを立ち上げたときに右上に表示されるメニューを指します。Fluent.Ribbonでもサポートされています。参考までにこの記事を書いているWindows10のエクスプローラの画像を以下に張り付けておきます。メニューバーにメニューを配置した場合＋αの操作ができます。

バックステージとは？

Officeのスタートメニューをリボンから選ぶ時に表示される画面を指して、バックステージ(メニュー)と呼びます。全画面表示され、左側にタブ、右側にコンテンツを配置し、専らアプリケーション全体の操作を行う為に使用されます。こちらはメニューと違い、使いどころがやや難しいコントロールになります。こちらも当方開発環境のWin10のOffice2013のWordのバックステージを張り付けておきます。

アプリケーションメニューの表示と定義

始める前に注意点ですが、アプリケーションメニューとバックステージは同時には利用できません。両方定義しても、どちらか一方だけが右上のメニューへ表示されるため操作できません。ただし、定義自体は2種類できるので切り替えることはできます。

実装完了後の表示は以下のようになります。

ではまず、アプリケーションメニューの表示から始めたいと思います。ApplicationMenuクラスを使用しますが、子要素にFluent:MenuItemを入れ子で配置でますが、通常の System.Windows.Controls.MenuItemから派生しているため、Commandの配置やイベントはMenuItemと動揺の操作が行えることを表します。

<Fluent:Ribbon.Menu>
    <Fluent:ApplicationMenu Header="ファイル">
        <Fluent:MenuItem Header="メニュー1" Icon="...">
            <Fluent:MenuItem Header="メニュー1-1" Icon="..."/>
            <Fluent:MenuItem Header="メニュー1-2" Icon="..."/>
            <Fluent:MenuItem Header="メニュー1-3" Icon="..."/>
        </Fluent:MenuItem>
        <Fluent:MenuItem Header="メニュー2" Icon="..."/>
        <Fluent:MenuItem Header="メニュー3" Icon="..."/>
        <Fluent:MenuItem Header="メニュー4" Icon="..."/>
    </Fluent:ApplicationMenu>
</Fluent:Ribbon.Menu>

表示のみの定義ですが、Commandプロパティにコマンドを関連付けることもできます。

ApplicationMenu.Headerを定義しない場合、デフォルトのアイコンが以下のように表示されヘッダーテキストの代わりとして表示されます。

バックステージの表示と定義

次は、バックステージです。上記のコードとは共存できないため"Fluent:ApplicationMenu"を削除してから実装します。バックステージは縦配置のタブコントロールとほぼ同様なので基本構造は以下の通りになります。視認しやすいようにタブ内を黒で塗りつぶしたコントロールを配置した場合、見た目は以下のようになります。

上記表示のコード例は以下の通りです。

<Fluent:Ribbon.Menu>
    <Fluent:Backstage>
        <Fluent:BackstageTabControl>
            <Fluent:BackstageTabItem Header="タブ1">
                <DockPanel Background="Black">
                    <StackPanel DockPanel.Dock="Top" Margin="20">
                        <Button Content="aaaa" Width="120" Height="27"/>
                        <Button Content="bbbb" Width="120" Height="27" Margin="0 20"/>
                    </StackPanel>
                </DockPanel>
            </Fluent:BackstageTabItem>
            <Fluent:BackstageTabItem Header="タブ2"></Fluent:BackstageTabItem>
            <Fluent:BackstageTabItem Header="タブ3"></Fluent:BackstageTabItem>
        </Fluent:BackstageTabControl>
    </Fluent:Backstage>

タブ内には普通のコンテンツモデルでコントロールが配置できるので通常のWPFとして実装が可能です。

最後に

以上で、8回に渡り書いてきましたFluent.Ribbonの要素の紹介は終わりになります。標準的なコントロールを継承し各コントロールが実装されているため、普段WPFを使用していたら特に問題なく、わからなくても標準コントロールのリファレンスを見れば大体使い方が分かるので今まで紹介した要素があるんだなと頭の片隅にあればコーディングで引っかかることもほとんどないのかなと思います。ライブラリ自体が急成長中のため、もしかしたら使い方が変わってしまうかもしれませんが、本家のFluent.Ribbon.ShowcaseのTestContent.xamlに大体使い方が書いてあるので使用する際はリファレンスしながら自訴すすることになると思います。*1

また、今回ステータスバーなどいくつか紹介できていない要素もありますが、標準であるコントロールなので割愛しました。

簡単に実装できるので使用を検討の際はぜひこのライブラリの使用を検討してみてください。ありがとうございました。

各記事へのリンク

• 連載一覧ページ
• 第1回：構成要素の紹介
• 第2回：導入方法とウインドウ表示
• 第3回：タブ、グループ、ボタンの配置
• 第4回：ツールチップ、コンテキストタブを表示する
• 第5回：クイックアクセスバー、ツールバーメニューを表示する
• 第6回：コンボボックス、スピナーを表示する
• 第7回：ギャラリーを表示する
• 第8回：アプリケーションメニュー、バックステージを表示する（このページ）

*1:現状ドキュメントはまだまだといったところです。