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

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

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

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

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>