Silverlight／WPFで使える逆引きTips集
――Ribbon機能（後編）

（15） Ribbonインターフェース後編

07.RibbonComboBoxコントロールを使用する

　Ribbonインターフェースで使用するコンボボックスはRibbonComboBoxコントロールです。

　RibbonComboBoxに表示する項目はギャラリーを利用します。ギャラリーは複数の項目を提示して選択させるコントロールで、RibbonGallery要素の中にRibbonGalleryItem要素を配置して作成します。また、ギャラリーに表示する項目はタイル上に配置することが可能で、その際はRibbonGallery要素のMinColumnCount属性に横方向に表示する項目数を設定します。

　下記はRibbonComboBoxコントロールを使用する例です。左側のコンボボックスにはテキスト項目を1列で表示させています。右側のコンボボックスはアイコンをタイル上に並べて表示させています。

RibbonComboBoxの使用例

XAMLの例

<ribbon:Ribbon x:Name="Ribbon">
    <ribbon:RibbonTab x:Name="HomeTab"
                      Header="Home">
        
        <ribbon:RibbonGroup x:Name="Group1"
                            Header="Group1">
            <ribbon:RibbonComboBox Name="RibbonComboBoxFruits">
                <ribbon:RibbonGallery>
                    <ribbon:RibbonGalleryCategory Header="フルーツ">
                        <ribbon:RibbonGalleryItem Content="リンゴ" />
                        <ribbon:RibbonGalleryItem Content="ミカン" />
                        <ribbon:RibbonGalleryItem Content="バナナ" />
                        <ribbon:RibbonGalleryItem Content="レモン" />
                        <ribbon:RibbonGalleryItem Content="メロン" />
                    </ribbon:RibbonGalleryCategory>
                </ribbon:RibbonGallery>
            </ribbon:RibbonComboBox>
        </ribbon:RibbonGroup>
        
        <ribbon:RibbonGroup x:Name="Group2"
                            Header="Group2">
            <ribbon:RibbonComboBox>
                <ribbon:RibbonGallery MinColumnCount="3">
                    <ribbon:RibbonGalleryCategory Header="描画">
                        <Image Source="Images/037_Colorize_32x42_72.png" Width="32" Height="32" />
                        <Image Source="Images/1415_Paintbrush_256x256.png" Width="32" Height="32" />
                        <Image Source="Images/126_Edit_48x48_72.png" Width="32" Height="32" />
                        <Image Source="Images/1460_PaintPalette_48x48.png" Width="32" Height="32" />
                        <Image Source="Images/base_charts.png" Width="32" Height="32" />
                        <Image Source="Images/base_triangle.png" Width="32" Height="32" />
                    </ribbon:RibbonGalleryCategory>
                </ribbon:RibbonGallery>
            </ribbon:RibbonComboBox>
        </ribbon:RibbonGroup>
    </ribbon:RibbonTab>
</ribbon:Ribbon>

ポイント

　Ribbonインターフェースでコンボボックスコントロールを使用する場合はRibbonComboBoxコントロールを使用する。

　表示する項目はRibbonGallery要素の中にRibbonGalleryItemを配置して作成する。

　項目をタイル上に表示するにはMinColumnCount属性を設定する。

08.RibbonRadioButtonコントロールを使用する

　Ribbonインターフェースで使用するラジオボタンはRibbonRadioButtonコントロールです。表示するテキストはLabel属性に設定します。もし、ラジオボタンをグループ化する場合には<RibbonControlGroup>要素の内側にRibbonRadioButtonコントロールを配置します。

　下記はRibbonRadioButtonコントロールを使用する例です。性別を表すラジオボタングループと色を表すラジオボタングループを作成しています。

RibbonRadioButtonコントロールを使用する例

XAMLの例

<ribbon:Ribbon x:Name="Ribbon">
    <ribbon:RibbonTab x:Name="HomeTab"
                      Header="Home">
        <ribbon:RibbonGroup x:Name="Group1"
                            Header="Group1">
            <ribbon:RibbonControlGroup>
                <ribbon:RibbonRadioButton Label="男" />
                <ribbon:RibbonRadioButton Label="女" />
            </ribbon:RibbonControlGroup>

            <ribbon:RibbonControlGroup>
                <ribbon:RibbonRadioButton Label="赤" />
                <ribbon:RibbonRadioButton Label="青" />
                <ribbon:RibbonRadioButton Label="黄" />
            </ribbon:RibbonControlGroup>
        </ribbon:RibbonGroup>
    </ribbon:RibbonTab>
</ribbon:Ribbon>

ポイント

　Ribbonインターフェースでラジオボタンコントロールを使用する場合はRibbonRadioButtonコントロールを使用する。

　表示するテキストはLabel属性に設定する。