WPF の Fluent.Ribbon でリボンプログラミング 第4回：ツールチップ、コンテキストタブを表示する

C# WPF

前回までに作成したリボンウインドウへ、ツールチップ、コンテキストタブを追加します。

ツールチップの追加

カーソルをコントロールの上に移動し、しばらく静止した状態で表示されるガイドメッセージ（＝ツールチップ）の表示および設定方法です。

f:id:Takachan:20170626174501p:plain

ToolTip プロパティへ文字列を設定します。

<Fluent:Button Header="小ボタン"
               KeyTip="SM"
               ToolTip="小ボタンのツールチップです。"
               Size="Small"
               Icon="..."/>

また、ToolTip は標準のコンテンツモデルを踏襲しているので、自分で内容を作ることもできます。以下例では、ツールチップの画像を入れています。

f:id:Takachan:20170626175250p:plain

<Fluent:Button Header="中ボタン"
               KeyTip="MI"
               Size="Middle"
               Icon="...">
               
    <!-- 自作のツールチップの定義 -->
    <Fluent:Button.ToolTip>
        <StackPanel Orientation="Horizontal">
            <Image Source="/assets/icons8-SourceCode_x16.png"/>
            <TextBlock Margin="3 0 0 0" Text="中ボタンのツールチップです。"/>
        </StackPanel>
    </Fluent:Button.ToolTip>
</Fluent:Button>

両方指定している場合、意図しない動作になるためご注意ください。

コンテキストタブの追加

コンテキストタブを追加した場合、メニュー表示は以下のようになります。

f:id:Takachan:20170626175722p:plain

画像を注意深く確認するとコンテキストタブは、タブのグループ > タブというように分類されています。XAML の定義も同様にグループの定義、タブへ関連付けの手順で行います。コントロールで使用するプロパティは以下の通りです。

プロパティ 内容
Header タブグループの表示名
ForeGround 文字色
BorderBrush タブグループ上端の線の色
Background 背景色（勝手に薄い色にしてくれるため、BorderBrush と同値で問題ない)
Visibility 表示・非表示の指定 
<!-- コンテキストタブグループの定義 -->
<Fluent:Ribbon.ContextualGroups>
    <Fluent:RibbonContextualTabGroup x:Name="tabGroup1"
                                     BorderBrush="#FF9D00"
                                     Background="#FF9D00"
                                     Foreground="#D3691D"
                                     Header="描画ツール"
                                     Visibility="Visible" />
    
    <Fluent:RibbonContextualTabGroup x:Name="tabGroup2"
                                     BorderBrush="#F2CB1D"
                                     Background="#F2CB1D"
                                     Foreground="#987715"
                                     Header="表ツール"
                                     Visibility="Visible" />
</Fluent:Ribbon.ContextualGroups>

上記をタブに関連付けます。

<Fluent:RibbonTabItem Header="書式" Group="{Binding ElementName=tabGroup1, Mode=OneWay}"/>
<Fluent:RibbonTabItem Header="デザイン" Group="{Binding ElementName=tabGroup2, Mode=OneWay}"/>
<Fluent:RibbonTabItem Header="レイアウト" Group="{Binding ElementName=tabGroup2, Mode=OneWay}"/>

この状態で、最初の画像の通りに表示されるようになります。さらに、表示非表示を制御する場合

<Button Height="27" Width="150" Content="コンテキストタブ表示切替" Click="Button_Click"></Button>

としたうえで、コードビハインドにグループ表示を切り替えるコードを記述します。

// コンテキストタブの表示切替
private void Button_Click(object sender, RoutedEventArgs e)
{
    if (this.tabGroup1.Visibility == Visibility.Visible)
    {
        this.tabGroup1.Visibility = Visibility.Collapsed;
        this.tabGroup2.Visibility = Visibility.Collapsed;
    }
    else
    {
        this.tabGroup1.Visibility = Visibility.Visible;
        this.tabGroup2.Visibility = Visibility.Visible;
    }
}

次回は、クイックアクセスバー、ツールバーメニューを紹介します。

各記事へのリンク