[WPFリボン プログラミング] 第6回 ～グループへのコントロールの追加～

  • Article

[WPFリボン プログラミング ] 第6回 ～グループへのコントロールの追加～

[ コントロールの種類 ]
リボン インターフェイスに機能を追加するには、各タブやグループにコントロールを追加します。
主なコントロールには、以下のものがあります。

ボタン系
RibbonButton : ボタン型のコントロールです。
RibbonSplitButton : トグルボタンやドロップダウンメニューと組み合わせたボタンです。
RibbonMenuButton : クリックするとメニューを表示させるボタンです。
RibbonToggleButton : ボタンをクリックすると押しっぱなしになり、押しっぱなしの状態のボタンをクリックすると元に戻ります。

選択系
RibbonComboBox : 複数のリストの中から1つの項目を選択し、選択した項目を表示します。
RibbonCheckBox : チェックをつけているか、つけていないかで状態を判別します。
RibbonRadioButton : 複数の選択肢の中から1つの項目を選択します。選択肢は常時表示されています。

リボン インターフェイスの上で、アイコンに見えるものはRibbonButton、アイコンの右に▼がついているものはRibbonSplitButtonです。
下図の例だと、メイリオと書かれている部分の下にあるBとIのアイコンがRibbonButtonで、UのアイコンがRibbonSplitButtonです。

RibbonButtonなどのコントロールは、以下のようなXAMLで書くことができます。
Visual Studioのツールボックスから、直接XAML上にドラッグ アンド ドロップすることもできます。

<my:RibbonButton Label="ボタン">
</my:RibbonButton>

[ アイコンとラベル ]
コントロールの種類にもよりますが、コントロールには大きいアイコン、小さいアイコン、ラベルをそれぞれ設定することができます。
大きいアイコンを設定したときは、大きいアイコンで表示されます。
ラベルを設定したときは、ラベルも表示されます。
大きいアイコン、小さいアイコン、ラベルを設定したときのXAMLは、以下のようになります。

<my:RibbonButton Label="ボタン1"
SmallImageSource="c:\tmp\icon\test1.ico"
LargeImageSource="c:\tmp\icon\test1.ico">
</my:RibbonButton>

リボン インターフェイスを使用しているとき、ウィンドウの横幅によって表示させるアイコンの大きさやラベルの有無を指定することができます。
以下の例は、Outlookの[返信]グループの例です。

左の3つのアイコンは大きいアイコン、右の3つのアイコンは小さいアイコンで表示されています。全て、ラベルがついています。

ウィンドウの幅を小さくすると、右の3つのアイコンについていたラベルが表示されなくなります。

さらにウィンドウの幅を小さくすると、左の3つのアイコンが小さいアイコンに変わります。

ウィンドウの横幅の変化に伴い、アイコンやラベルをどのように変化させるかは、GroupSizeDefinitionsを使用して定義します。
以下のXAMLの例は、最初はラベル付きの大きなアイコンで表示し、横幅を小さくするとラベルなしの小さなアイコンで表示します。
このXAMLは、先ほどのRibbonButtonの定義の直後に記述します。

<my:RibbonGroup.GroupSizeDefinitions>
<my:RibbonGroupSizeDefinitionBaseCollection>
<my:RibbonGroupSizeDefinition>
<my:RibbonControlSizeDefinition
ImageSize="Large"
IsLabelVisible="True"/>
</my:RibbonGroupSizeDefinition>

<my:RibbonGroupSizeDefinition>
<my:RibbonControlSizeDefinition
ImageSize="Small"
IsLabelVisible="False"/>
</my:RibbonGroupSizeDefinition>
</my:RibbonGroupSizeDefinitionBaseCollection>
</my:RibbonGroup.GroupSizeDefinitions>

上のXAMLの3行めと9行めにmy:RibbonGroupSizeDefinitionと書かれています。
3行めから7行めにかけての部分が、デフォルトの表示に使うアイコンとラベルの状態を表しています。
ここでは、大きなアイコンを表示させるので、
ImageSize="Large"
と定義し、さらにラベルも表示させるので
IsLabelVisible="True"
と定義しています。

9行めから13行めにかけての部分が、横幅が小さくなった時のアイコンとラベルの状態です。
ここでは、小さなアイコンを表示させていて、ラベルは表示させていません。

ボタンが複数ある場合は、my:RibbonControlSizeDefinitionの定義を複数用意します。
例えばボタンが3つある場合は、my:RibbonGroupSizeDefinitionの中に、my:RibbonControlSizeDefinitionの定義を3つ用意します。

[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回 : ～グループへのコントロールの追加～

マイクロソフト
田中達彦