[WPFリボン プログラミング] 第9回 ～アプリケーション メニュー～

  • Article

[WPFリボン プログラミング] 第9回 ～アプリケーション メニュー～

[ アプリケーションメニューとは ]
アプリケーション メニューは、リボンのタブの左端に表示されているタブをクリックしたときに表示されるメニューです。
Windows 7のペイントの場合は、赤い丸で囲ったタブをクリックすると表示されます。

下図は、ペイントのアプリケーション メニューです。

このように、アプリケーション メニューには、ファイルの保存や新規作成などのファイルに関連することや、印刷や終了などのアプリケーション全体にかかわるような内容を入れます。

[ アプリケーションメニューの実装 ]
アプリケーション メニューも、専用のタグを使用するだけで実装できます。
前回作成したサンプルプログラムに、アプリケーション メニューを追加してみましょう。
前回のサンプルプログラムは、コンテキストタブを使ったものでした。
そのアプリに、アプリケーション メニューを追加するには、XAMLのコードに以下の赤い字の部分のコードを追加します。

<my:Ribbon Name="Ribbon1" VerticalAlignment="Top">

<my:Ribbon.ApplicationMenu>
<my:RibbonApplicationMenu>
<my:RibbonApplicationMenuItem Header="AppMenu">
</my:RibbonApplicationMenuItem>
</my:RibbonApplicationMenu>
</my:Ribbon.ApplicationMenu>

<my:RibbonTab Header="普通のタブ">
<my:RibbonToggleButton Name="toggleButton1" Label="on/off" Click="toggleButton1_Click" />
</my:RibbonTab>

これで、左端の青いタブをクリックすると、アプリケーションメニューが表示されるようになりました。

次に、このメニューを選択したときのコードを実装します。
Visual StudioのXAMLエディターに表示されているXAMLのコードの、
<my:RibbonApplicationMenuItem Header="AppMenu">
と書かれている行をクリックして、プロパティウィンドウの[イベント]タブを選択し、[Click]と書かれている部分を探してダブルクリックします。

このメニューをクリックしたときのイベントハンドラーがVisual Studioによって作成され、ソースコード エディターが自動的に開きます。
RibbonApplicationMenuItem_Clickという名前のメソッドが、クリックされたときに呼ばれるイベントハンドラーですので、以下の赤い字の部分のコードを追加します。

private void RibbonApplicationMenuItem_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("AppMenuがクリックされました");
}

ここではテスト用として、メッセージボックスを表示させています。

[ アプリケーションメニューのタブの見た目 ]
アプリケーション メニューのタブには、アイコンを表示させることができます。
RibbonApplicationMenuタグを使用しているところに、以下のようにSmallImageSourceを使用してアイコンへのパスを指定すると、そのパスにあるアイコンを表示します。

<my:RibbonApplicationMenu
SmallImageSource="c:\tmp\icon\test1.ico">

下図は、実行したときのイメージです。1と書かれたアイコンが表示されています。

さらに、タブの上にカーソルを移動させたときに、ツールチップを表示させることができます。
ツールチップを表示させるには、以下の赤字の部分のようにRibbonApplicationMenuにToolTipTitleとToolTipDescriptionを追加します。

<my:RibbonApplicationMenu
    ToolTipTitle="アプリケーション メニュー"
ToolTipDescription="ここに説明を記述します“
SmallImageSource="c:\tmp\icon\test1.ico">

実行すると、以下のようになります。

さらにアプリケーション メニューに機能を追加しましょう。
以下のコードの赤い字の部分は、メニューにアイコンを表示している例です。
青い字の部分は、メニューの下にサブメニューを追加した例です。

<my:Ribbon.ApplicationMenu>
<my:RibbonApplicationMenu
ToolTipTitle="アプリケーション メニュー"
ToolTipDescription="ここに説明を記述します"
SmallImageSource="c:\tmp\icon\test1.ico">

<my:RibbonApplicationMenuItem Header="AppMenu" Click="RibbonApplicationMenuItem_Click">
</my:RibbonApplicationMenuItem>

<my:RibbonApplicationMenuItem Header="AppMenu2" ImageSource="c:\tmp\icon\test2.ico">
</my:RibbonApplicationMenuItem>

<my:RibbonApplicationSplitMenuItem Header="AppMenu3">
<my:RibbonApplicationMenuItem Header="AppMenu3のサブメニュー">
</my:RibbonApplicationMenuItem>
</my:RibbonApplicationSplitMenuItem>

</my:RibbonApplicationMenu>
</my:Ribbon.ApplicationMenu>

下図は、このアプリを実行して、マウスカーソルをAppMenu3の上に移動したときの図です。

[WPFリボンの開発用コンポーネントのダウンロード先]
WPFリボンの開発は、Visual Studio 2010またはExpression Blend 4に、Microsoft Ribbon for WPFというコンポーネントを追加することによって開発できます。
以下のサイトからダウンロードすることができます。
https://www.microsoft.com/downloads/en/details.aspx?FamilyID=2bfc3187-74aa-4154-a670-76ef8bc2a0b4&displaylang=en

[WPFリボン プログラミング]
第1回 : ～リボン インターフェイスとは～
第2回 : ～開発環境を揃える～
第3回 : ～リボンについて知っておくべきこと～
第4回 : ～リボン インターフェイスを作る2つの方法～
第5回 : ～タブとグループの作り方～
第6回 : ～グループへのコントロールの追加～
第7回 : ～ボタンをクリックしたときの処理と多彩なツールチップ～
第8回 : ～特定のときのみ表示させるコンテキスト タブ～
第9回 : ～アプリケーション メニュー～

マイクロソフト
田中達彦