WPF の Fluent.Ribbon でリボンプログラミング 第3回：タブ、グループ、ボタンの配置

作成済みのリボンウィンドウへタブ、グループ、ボタンを配置していきます。

Fluent名前空間以下に配置されている以下コントロールを使用します。

• リボンタブ：RibbonTabItem
• グループ：RibbonGroupBox
• ボタン
  • 普通のボタン：Button
  • ドロップダウンボタン：DropDownButton
  • トグルボタン：ToggleButton
  • ラジオボタン：RibbonGroupBox
  • スプリットボタン：SplitButton（ToggleButton とほぼ同じため今回は扱いません）

タブ（RibbonTabItem）の配置

まずはタブを配置します。RibbonTabItem を配置し、Header にタブの表示名、KeyTip に Alt キーを押したときのショートカットを設定していきます。リボンのコントロールは基本的に、RibbonTabItem の中に配置していきます。

<Fluent:RibbonWindow ...>
    <Grid>
        <Fluent:Ribbon>

            <Fluent:RibbonTabItem Header="タブ1" KeyTip="T1">
            </Fluent:RibbonTabItem>

            <Fluent:RibbonTabItem Header="タブ2" KeyTip="T2">
            </Fluent:RibbonTabItem>

            <Fluent:RibbonTabItem Header="タブ3" KeyTip="T3">
            </Fluent:RibbonTabItem>

グループ（RibbonGroupBox ）の配置

タブを配置したら、グループの配置を行います。コントロールの使用方法はタブ（RibbonTabItem）と同じです。

<Fluent:RibbonTabItem Header="タブ1" KeyTip="T1">
    <Fluent:RibbonGroupBox Header="ボタン" KeyTip="B">
      <!-- この中にコントロールを配置する -->
    </Fluent:RibbonGroupBox>
</Fluent:RibbonTabItem>

タブグループのランチャー機能

Officeの場合、グループの右下何か押せるボタンが付いています。ランチャーコマンドボタンといい、このライブラリでもサポートしているので表示および制御方法となります。

関係するプロパティ

プロパティ	内容
IsLauncherVisible	False(Default)、表示するときは True を指定します。
IsLauncherEnabled	True(Default)、操作を無効にする場合 False を指定します。
LauncherClick	クリックしたときのイベントハンドラ
LauncherCommand	コマンドバインド用のプロパティ

<Fluent:RibbonGroupBox Header="ボタン"
                   KeyTip="B"
                   IsLauncherVisible="True"
                   LauncherClick="RibbonGroupBox_LauncherClick"
                   LauncherCommand="{Binding ButtonLauncherCommand}"> <!-- LauncherClick とどちらかを指定 -->

ボタンコントロールの配置

グループを設定したら、今度はグループ内にボタンを配置していきます。今回のボタン配置後のイメージは以下になります。

Altキーを押すと以下表示になります。

また、これから紹介するボタンコントロールで使用される共通プロパティは以下の通りです。

項目	内容
Header	ボタンの表示名
KeyTip	Alt押下時のキーショートカット
Size	アイコンの大きさ Large(Default), Middle, Small の列挙子
LargeIcon	Size = Large の時に使用されるアイコン
Icon	Size = Middle, Small の時に使用されるアイコン

また注意事項として、デザイナにアイコンを表示させるために、LargeIcon, Icon プロパティには以下のように記述を行います。（こうしないとデザイナ上にアイコンが表示されません）

Icon=“pack://application:,,,/Ribbons.Sample;component/assets/icons8-KnightsShield_x32.png”

普通のボタン（Button）コントロール

項目	内容
Size = Large(Default)	Sizeプロパティに何も指定しない場合 “Large” が選択されます。大きいアイコンの下にテキストが表示されます。
Size = Middle	Sizeプロパティに “Middle” を指定した場合、小さいアイコンの右側にテキスト表示がされます。
Size = Small	“Small” を指定した場合、小さいアイコンのみとなり、ヘッダーは無視されます。

<Fluent:RibbonGroupBox Header="ボタン" KeyTip="B">

    <Fluent:Button Header="大ボタン"
                   KeyTip="BI"
                   LargeIcon="..."/>

    <Fluent:Button Header="中ボタン"
                   KeyTip="MI"
                   Size="Middle"
                   Icon="..."/>

    <Fluent:Button Header="小ボタン"
                   KeyTip="SM"
                   Size="Small"
                   Icon="..."/>
                   
</Fluent:RibbonGroupBox>

ドロップダウンボタン（DropDownButton）コントロール

ボタンを押した場合、メニューが展開されるドロップダウンボタンの配置方法です。

項目	内容
Size = Large(Default)	Sizeプロパティに何も指定しない場合 “Large” が選択されます。大きいアイコンの下にテキストが表示されます。
Size = Middle	Sizeプロパティに “Middle” を指定した場合、小さいアイコンの右側にテキスト表示がされます。
Size = Small	“Small” を指定した場合、小さいアイコンのみとなり、ヘッダーは無視されます。

基本的に普通のボタンとプロパティ設定は同じですが、メニュー要素を配置すると以下の動きとなります*1。

<Fluent:RibbonGroupBox Header="ドロップダウン"
                       KeyTip="DD">

    <Fluent:DropDownButton Header="大ボタン"
                           KeyTip="DB"
                           LargeIcon="...">
                           
        <!-- メニューの設定ができる -->
        <Fluent:MenuItem Header="子要素1" Icon="..."/>
        <Fluent:MenuItem Header="子要素2" Icon="..."/>
    </Fluent:DropDownButton>

    <Fluent:DropDownButton Header="中ボタン"
                           KeyTip="DM"
                           Size="Middle"
                           Icon="..."/>

    <Fluent:DropDownButton Header="小ボタン"
                           KeyTip="DS"
                           Size="Small"
                           Icon="..."/>
</Fluent:RibbonGroupBox>

トグルボタン（ToggleButton）コントロール

ボタンを押すと押しっぱなしの状態となり、もう一度押すと解除されるトグルボタンです。普通のボタンと同じです。“押された状態” を表す表現力にやや乏しいため、使用する際はやや注意が必要です。このコントロールの使用方法は普通のボタンと全く同じです。

<Fluent:RibbonGroupBox Header="トグル" KeyTip="TB">
    
    <Fluent:ToggleButton Header="大トグル"
                         KeyTip="TB"
                         LargeIcon="..."/>
    
    <Fluent:ToggleButton Header="中トグル"
                         KeyTip="TM"
                         Size="Middle"
                         Icon="..."/>
    
    <Fluent:ToggleButton Header="小トグル"
                         KeyTip="TS"
                         Size="Small"
                         Icon="..."/>

</Fluent:RibbonGroupBox>

ラジオボタン（RadioButton）コントロール

複数ある選択肢の中から、一つだけを選択できるラジオボタンコントロールになります。画像の設定とサイズの指定ができず、丸いアイコンとテキストのみで構成されます。

項目	内容
Header	選択肢の説明文を表す文字列の指定できます。
GroupName	グループを指定すると同じ識別子を共通するグループの中から1つ選択することができます。
IsChecked	この要素がチェックされているかどうかを表します。

<Fluent:RibbonGroupBox Header="ラジオボタン" KeyTip="RB">
    <Fluent:RadioButton Header="選択肢1" KeyTip="11" GroupName="Group1" IsChecked="True"/>
    <Fluent:RadioButton Header="選択肢2" KeyTip="12" GroupName="Group1"/>
    <Fluent:RadioButton Header="選択肢3" KeyTip="13" GroupName="Group1"/>
    
    <Fluent:RadioButton Header="選択肢4" KeyTip="21" GroupName="Group2" IsChecked="True"/>
    <Fluent:RadioButton Header="選択肢5" KeyTip="22" GroupName="Group2"/>
    <Fluent:RadioButton Header="選択肢6" KeyTip="23" GroupName="Group2"/>
</Fluent:RibbonGroupBox>

以上で、ボタンコントロールの説明は終了です。次回はツールチップ、コンテキストタブを実装していきます。

各記事へのリンク

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

*1:実際は、UI要素は何でも設定可能です