[WPFリボン プログラミング] 第13回 ～ギャラリー～
[WPFリボン プログラミング ]
第13回 ～ギャラリー～
[ ギャラリーとは ]
ギャラリーは、メニューのように複数の項目を提示して選択する場面で使用できるコントロールです。
単に選択肢を表示させるだけでなく、色を変えたり文字の形式を変えるなど、多彩な表現を使えます。
下図はWordでフォントを変えるときの図です。
コンボボックスの内容を表示させると、このようにフォントの名前がそのフォントを使用して表示されます。この部分にギャラリーを使用しています。
下図はペイントの例です。
ブラシの選択もギャラリーを指定しています。
このように画像を表示させることもできます。
[ ギャラリーの実装 ]
それでは、ギャラリーを実装してみましょう。
プロジェクトは、前回 ( 第12回 ) で作成したプロジェクトを使用します。
第5回で作成したシンプルなプロジェクトを元にしても構いません。その場合は、画面のイメージが説明するものと少し異なります。
最初に、コンボボックスを使用してフォントを選択するコードを実装します。
プロジェクトを開いたら、MainPage.xamlのXAMLコードを表示し、下記の赤い字の部分のXAMLコードを追加します。
</my:RibbonGroup>
<my:RibbonGroup Header="グループ2">
<my:RibbonComboBox
Label="フォントの選択">
<my:RibbonGallery>
<my:RibbonGalleryCategory Header="フォント">
<my:RibbonGalleryItem Content="MSゴシック" FontFamily="MS Gothic" FontSize="32"/>
<my:RibbonGalleryItem Content="MS明朝" FontFamily="MS Mincho" FontSize="32"/>
<my:RibbonGalleryItem Content="メイリオ" FontFamily="Meiryo" FontSize="32"/>
</my:RibbonGalleryCategory>
</my:RibbonGallery>
</my:RibbonComboBox>
</my:RibbonGroup>
</my:RibbonTab>
ここでは、RibbonComboBoxの中でギャラリーを使用し、その中に3種類のフォントを表示させています。
このプログラムを実行して、コンボボックスの右にある▼ボタンをクリックすると、以下のようになります。
RibbonGalleryを使用するときは、その中にRibbonGalleryCategoryを定義し、その中に表示させる項目として、RibbonGalleryItemを定義します。
選択肢をいくつかのカテゴリーにまとめるときは、RibbonGalleryCategoryを複数定義します。
[ ギャラリーにコントロールを登録するには ]
ペイントでブラシを選択するときのように、ギャラリーの中に画像や図形を表示させたいときがあります。
そのときは、RibbonGalleryCategoryの中に、表示させたいコントロールを定義します。
以下の例は、Rectangleを使用して、ギャラリーの中に四角を表示させるコードです。
赤い字の部分をXAMLのコードに追加しましょう。
ここでは、新たにグループ3というRibbonGroupを作成し、その中にコンボボックスではなく、RibbonMenuButtonというボタンを使用しています。
</my:RibbonGroup>
<my:RibbonGroup Header="グループ3">
<my:RibbonMenuButton Label="色">
<my:RibbonGallery>
<my:RibbonGalleryCategory>
<Rectangle Width="16" Height="16" Fill="Orange" />
<Rectangle Width="16" Height="16" Fill="Red" />
<Rectangle Width="16" Height="16" Fill="Pink" />
<Rectangle Width="16" Height="16" Fill="Blue" />
<Rectangle Width="16" Height="16" Fill="Green" />
<Rectangle Width="16" Height="16" Fill="Yellow" />
</my:RibbonGalleryCategory>
</my:RibbonGallery>
</my:RibbonMenuButton>
</my:RibbonGroup>
</my:RibbonTab>
このプログラムを実行して、色と書かれたボタンの右にある▼ボタンをクリックすると、下図のようになります。
この例では、6つの四角が縦一列に並んでいます。
これではちょっと選択しにくいので、横に並べてみましょう。
RibbonGalleryを定義している部分に以下のようにMinColumnCountの情報を追加します。
<my:RibbonGallery MinColumnCount="3">
ここでは、MinColumnCountに3を設定しました。
これで以下の図のように、四角を横方向に3つ並べることができるようになりました。
[ 選択した項目の連携(データ バインド )]
コンボボックスの中にギャラリーを使用して、色を選択できるようにしました。
せっかく色を選択したので、選択した色を活用しましょう。
ここでは、ボタンに表示されている「色」という文字の色を、選択した色に変更します。
XAMLのコードのRibbonMenuButtonを定義している部分に、以下の赤い字の部分を追加します。
<my:RibbonMenuButton Label="色" Foreground="{Binding ElementName=ribbonGallery1, Path=SelectedValue}">
<my:RibbonGallery MinColumnCount="3" Name="ribbonGallery1" SelectedValuePath="Fill" SelectedValue="Orange">
<my:RibbonGalleryCategory>
<Rectangle Width="16" Height="16" Fill="Orange" />
<Rectangle Width="16" Height="16" Fill="Red" />
<Rectangle Width="16" Height="16" Fill="Pink" />
<Rectangle Width="16" Height="16" Fill="Blue" />
<Rectangle Width="16" Height="16" Fill="Green" />
<Rectangle Width="16" Height="16" Fill="Yellow" />
</my:RibbonGalleryCategory>
</my:RibbonGallery>
</my:RibbonMenuButton>
このプログラムを実行すると、ボタンに書かれている「色」という文字が、選択した色に変わります。
ここでは、選択した項目と、表示している項目のデータを連携させています。
このように、ある項目のデータとある項目のデータを連携させることを、データバインドと呼びます。
Rectangleを定義している部分では、四角を塗りつぶす色としてFillというプロパティに色の名前を入れています。
このFillのデータを使用して、ボタンの文字の色を変えています。
RibbonGalleryを定義している部分には、以下のように記述しました。
Name="ribbonGallery1" SelectedValuePath="Fill" SelectedValue="Orange">
ここで、SelectedValuePathというものを指定しています。
ギャラリーに表示されている項目のデータのうち、色のデータを使用したいので、色を指定しているFillプロパティをSelectedValuePathに指定しています。
SelectedValuePathとして指定したプロパティの値が、データ バインド先のプロパティに渡されます。
RibbonMenuBottonを定義している部分に、
Foreground="{Binding ElementName=ribbonGallery1, Path=SelectedValue}"
と書かれたところがあります。
Foregroundは文字の色のことなので、文字の色として"{Binding で始まるデータを適用しています。
Bindingの中では、ElementNameとしてribbonGallery1を指定しています。
ribbonGallery1は、RibbonGalleryの部分でNameとして定義した、四角を6つ表示させているギャラリーの名前です。
Pathという部分では、SelectedValueを指定しています。
ギャラリーで選択された値、すなわちFillの値が入るということです。
[ プロパティ ウィンドウを使用したデータバインド ]
RibbonMenuButtonの部分に記述した"{Binding で始まる部分に書く内容を、Visual Studioのプロパティ ウィンドウを使用して簡単に用意することができます。
ここでは、その方法を紹介します。
最初に、
Foreground="{Binding ElementName=ribbonGallery1, Path=SelectedValue}"
の部分を削除しましょう。
これで、データ バインドしている部分がなくなりました。
あらためて、プロパティ ウィンドウを使ってデータバインドの部分を実装します。
まず、XAMLのコードのRibbonMenuButtonと書かれている部分をクリックします。
プロパティ ウィンドウにはRibbonMenuButtonのプロパティが表示されているので、その中からForegroundと書かれた部分を見つけ、行の中央付近にある下図の赤い丸で囲った部分をクリックします。
なお、下図はクリックした後の図です。
メニューが表示されますので、[データ バインドの適用]を選択します。
下図のようなウィンドウが表示されたら[ソース]と書かれた部分をクリックし、左のペインからElementNameを選択し、次に中央のペインからribbonGallery1を選択します。
そして下図のように、[パス]と書かれた部分をクリックし、SelectedValueを選択します。
XAMLのコードを見ると、RibbonMenuButtonの部分に最初に書いたデータ バインドのコードと同じものが追加されています。
このように、プロパティ ウィンドウを使用すると、データバインドの部分をマウスのクリックだけで作成できます。
次回はいよいよ最終回です。
最終回では、キーチップとタブの優先順位を説明します。
[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回 : ～アプリケーション メニュー～
第10回 : ～アプリケーション メニュー 上級編～
第11回 : ～コマンド ～
第12回 : ～クイック アクセス ツールバー～
第13回 : ～ギャラリー～
マイクロソフト
田中達彦