PG日誌

受託系 PG が C# の事を書いています

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

f:id:Takachan:20170626173523p:plain

関係するプロパティ

プロパティ 内容
IsLauncherVisible False(Default)、表示するときは True を指定します。
IsLauncherEnabled True(Default)、操作を無効にする場合 False を指定します。
LauncherClick クリックしたときのイベントハンドラ
LauncherCommand コマンドバインド用のプロパティ
<Fluent:RibbonGroupBox Header="ボタン"
                   KeyTip="B"
                   IsLauncherVisible="True"
                   LauncherClick="RibbonGroupBox_LauncherClick"
                   LauncherCommand="{Binding ButtonLauncherCommand}"> <!-- LauncherClick とどちらかを指定 -->

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

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

f:id:Takachan:20170626154626p:plain

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

f:id:Takachan:20170626162203p:plain

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

項目 内容
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” を指定した場合、小さいアイコンのみとなり、ヘッダーは無視されます。

f:id:Takachan:20170626155831p:plain

<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

f:id:Takachan:20170626160523p:plain

<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)コントロール

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

f:id:Takachan:20170626161153p:plain

<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 この要素がチェックされているかどうかを表します。

f:id:Takachan:20170626161747p:plain

<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:実際は、UI要素は何でも設定可能です