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

Article
02/21/2011

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

[ 前回までのサンプルアプリケーション ]
第9回の記事では、アプリケーションメニューのアイコンやツールチップ、メニューの追加方法を説明しました。
作成したアプリケーションは、このように3つのメニューが追加されています。

今回は上級編として、セパレーターの追加、サブメニューへのアイコンの追加、補助ペイン(Auxiliaryペイン)への情報の追加、フッターへの情報の追加を説明します。
前回作成したサンプルのアプリケーションに機能を追加していきます。

[ セパレーターの追加 ]
セパレーターの追加はとても簡単です。
RibbonSeparatorというタグがあるので、そのタグを使用します。
今回は、AppMenu2とAppMenu3の間にセパレーターを追加することにしますので、以下のコードの赤い字の部分を追加します。

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

<my:RibbonSeparator />

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

[ サブメニューへのアイコンの追加 ]
サブメニューにアイコンを追加するには、ImageSourceを使用します。
以下のコードの赤字の部分のように、RibbonApplicationMenuItemの部分に定義します。
ここでは、AppMenu3のサブメニューにアイコンを追加しました。

<my:RibbonApplicationSplitMenuItem Header="AppMenu3">
<my:RibbonApplicationMenuItem Header="AppMenu3のサブメニュー" ImageSource="c:\tmp\icon\test3.ico">
</my:RibbonApplicationMenuItem>
</my:RibbonApplicationSplitMenuItem>

セパレーターとサブメニューへのアイコンの追加で、このようなアプリケーションになりました。

[ 補助ペインへの情報の追加 ]
補助ペイン(Auxiliaryペイン)に情報を追加するには、AuxiliaryPaneContentを使用します。
その中に、RibbonGalleryと呼ばれるアイテムの集合体を用意します。
RibbonGalleryについての詳細は、後日説明する予定です。
RibbonGalleryの中にRibbonGalleryItemというものを複数用意することで、複数の情報を表示させることができます。
ここでは、補助ペインに「テキスト1」、「テキスト2」という文字列を表示させるようにするので、下記のコードの赤い字の部分を追加しましょう。

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

<my:RibbonApplicationMenu.AuxiliaryPaneContent>
<my:RibbonGallery>
<my:RibbonGalleryCategory Name="gallery1" Header="補助ペイン">

<my:RibbonGalleryItem Content="テキスト1"/>
<my:RibbonGalleryItem Content="テキスト2"/>

</my:RibbonGalleryCategory>
</my:RibbonGallery>
</my:RibbonApplicationMenu.AuxiliaryPaneContent>

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

ここまで実装して実行すると、補助ペインに文字が追加されたのが確認できます。

[ 補助ペインへの動的な情報の追加 ]
XAMLのコードにRibbonGalleryItemを用意して実行しただけでは、いつも同じ情報しか表示させません。
プログラムによって情報を追加する方法を紹介します。
XAMLのコードで、以下のRibbonApplicationMenuが書かれているところを見つけてクリックします。

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

プロパティウィンドウで、[イベント]タブをクリックして、[Loaded]と書かれた部分を探し出してダブルクリックします。
RibbonApplicationMenu_Loadedというイベントハンドラーが生成されたら、その中に以下の赤い字の部分を追加します。
ここでは、Cドライブのルートにあるファイル名を、補助ペインに表示させるという処理をしています。

private void RibbonApplicationMenu_Loaded(object sender, RoutedEventArgs e)
{
string[] rootFiles = System.IO.Directory.GetFiles("c:\\", "*.*");

for (int i = 0; i < rootFiles.Length; i++)
{
RibbonGalleryItem galleryItem = new RibbonGalleryItem();
galleryItem.Content = rootFiles[i];
galleryItem.Selected += new RoutedEventHandler(galleryItem_Selected);

gallery1.Items.Add(galleryItem);
}
}

void galleryItem_Selected(object sender, RoutedEventArgs e)
{
MessageBox.Show(((RibbonGalleryItem)sender).Content.ToString());
}

上の青い字の部分のgalleryItem_Selectedの部分も追加します。
このイベントハンドラーは、補助ペインに表示されている項目が選択されたときに呼び出されます。
ここでは単純に、選択された項目をメッセージボックスによって表示させています。
実行すると下図のようになります。

ここで表示されているファイル名をクリックすると、そのファイル名がメッセージボックスに表示されます。
なお、テキスト1、テキスト2と書かれたところをクリックしても、メッセージボックスは表示されません。
なぜなら、それらのRibbonGalleryItemに紐付いているイベントハンドラーがないためです。
イベントハンドラーを追加するには、XAMLのコードの該当するRibbonGalleryItemをクリックして、プロパティウィンドウの[イベント]タブの[Selected]をシングルクリック(ダブルではない)して、右側に表示されるコンボボックスの中から[galleryItem_Selected]を選択します。

[ フッターの追加 ]
フッターに情報を追加する方法も、補助ペインに情報を追加する方法と同じです。
下記の赤い字の部分を追加することで、フッターに「テキスト1」と「テキスト2」を追加できます。

<my:RibbonApplicationMenu.AuxiliaryPaneContent>
<my:RibbonGallery>
<my:RibbonGalleryCategory Name="gallery1" Header="補助ペイン">

<my:RibbonGalleryItem Content="テキスト1"/>
<my:RibbonGalleryItem Content="テキスト2"/>

</my:RibbonGalleryCategory>
</my:RibbonGallery>
</my:RibbonApplicationMenu.AuxiliaryPaneContent>

<my:RibbonApplicationMenu.FooterPaneContent>
<my:RibbonGallery>
<my:RibbonGalleryCategory Header="フッター" Background="LightBlue">

<my:RibbonGalleryItem Content="テキスト1"/>
<my:RibbonGalleryItem Content="テキスト2"/>

</my:RibbonGalleryCategory>
</my:RibbonGallery>
</my:RibbonApplicationMenu.FooterPaneContent>

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

[ 完成したコード ]
MainWindow.xamlのコードの全体は、以下のようになっています。
青い字の部分は、作成したプロジェクト名によって変わります。
作成しているプロジェクトにそのまま貼り付ける場合は、<Grid>から</Grid>までの間を置き換えるとうまくいきます。

<my:RibbonWindow x:Class="WpfApplication26.MainWindow"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" xmlns:my="https://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon">
<Grid>

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