WPF の Fluent.Ribbon でリボンプログラミング 第6回：コンボボックス、スピナーを表示する

C# WPF

今回は作成済みウインドウに対し、コンボボックスの配置、スピナーの配置を行います。

コンボボックスの表示と定義

このコントロールは標準であるコンボボックスとほぼ同じです。プロパティの挙動もほぼ同じ複数選択肢の中から一つを選ぶためのコントロールです。設置すると以下画像のようになります。今回は書式タブ内にコントロールを配置していきます。Size プロパティは設定できますが無視されます。

f:id:Takachan:20170626215844p:plain

<Fluent:RibbonTabItem x:Name="contextualTabA" 
                      Header="書式"
                      KeyTip="TF"
                      Group="{Binding ElementName=tabGroup1, Mode=OneWay}">
    <Fluent:RibbonGroupBox Header="コンボボックス"
                           KeyTip="CO">
        <Fluent:ComboBox MinWidth="130"
                         KeyTip="C1"
                         DisplayMemberPath="Text"
                         SelectedIndex="0">
            <TextBlock Text="子要素1"/>
            <TextBlock Text="子要素2"/>
            <TextBlock Text="子要素3"/>
        </Fluent:ComboBox>
        <Fluent:ComboBox Margin="0 3 0 0"
                         MinWidth="130"
                         KeyTip="C2"
                         DisplayMemberPath="Text"
                         IsEditable="False"
                         SelectedIndex="0">
            <TextBlock Text="子要素1"/>
            <TextBlock Text="子要素2"/>
            <TextBlock Text="子要素3"/>
        </Fluent:ComboBox>
    </Fluent:RibbonGroupBox>
</Fluent:RibbonTabItem>

設定項目が標準の ComboBox とほぼ同じため以上となります。

スピナーの表示と定義

スピナーは、WinForm 時代の NumericUpDown コントロールと同じです。数値をアップ、ダウンボタンで変更できるコントロールになります。標準にないので Fluent.Ribbonを導入していたら、別の個所でも使用できます。(その場合でも、普通に使い勝手が良いのです (汗

設置すると以下の表示となります。

f:id:Takachan:20170626224352p:plain

標準にないため、プロパティのおおよその説明です。

プロパティ 説明
Icon 一番左側に表示されるアイコンを表します。
Header アイコンの隣に表示される文字列を表します。
Value このコントロールに設定されている値を表します。
Increment ボタンを押すごとに増減する量を指定します。
Maximum このコントロールで取れる最大値を指定します。
Minimum このコントロールで撮れる最小値を指定します。
Format 表示文字列の書式を指定します。（以下例では適当に使用していますが使い方がよくわからないです。おおよそ Format に似てると思います)

画像の表示の XAML は以下の通りです。

<!-- グループ用のタブ定義 -->
<Fluent:RibbonTabItem x:Name="contextualTabA" 
                      Header="書式"
                      KeyTip="TF"
                      Group="{Binding ElementName=tabGroup1, Mode=OneWay}">
    <Fluent:RibbonGroupBox Header="スピナー"
                           KeyTip="SP">

        <Fluent:Spinner KeyTip="P1"
                        InputWidth="90"
                        Format="0 万人"
                        Increment="100"
                        Header="利用者数:"
                        Icon="..."/>

        <Fluent:Spinner KeyTip="P1"
                        InputWidth="90"
                        Format="0.0 人"
                        Header="利用者数:"
                        Increment="0.1"
                        Maximum="100"
                        Minimum="5"
                        Icon="..."/>
    </Fluent:RibbonGroupBox>

以上で、コンボボックス、スピナーの説明は終了です。次回はギャラリーを実装していきます。

各記事へのリンク