WPFのFluent.Ribbonでリボンプログラミング 第7回:ギャラリーを表示する

今回は、前回作成済みのウインドウに対し、ギャラリーを表示したいと思います。今回、ちょっと理解が及んでないところがありますがご容赦ください。

ギャラリーとは?

標準コントロールにはない概念なので、どういう概念なのか先ずは紹介したいと思います。ギャラリーは複数の要素を視覚的に表示しそのうちから一つを選ぶコントロールです。リボン内に表示できる単一選択のListBoxがイメージに近いと思います。

Office製品では以下の見た目になります。

f:id:Takachan:20170702173846p:plain

色を選択するパレットもギャリーに分類されます。

f:id:Takachan:20170702173924p:plain

エクスプローラにもついてます。

f:id:Takachan:20170702174244p:plain

エクスプローラにギャラリー必要だったかよく分からないのですが、使いどころが結構難しいので、安易に使ってUIが意味不明にならないようにしましょう。

ギャラリーの表示と定義

Office製品と同等の見た目にするためには、XAMLをそこそこ定義しないといけないため、テキスト表示のみになります。

f:id:Takachan:20170702174709p:plain

▼ボタンを押したときに展開した画像

f:id:Takachan:20170702174734p:plain

使用するコントロールは、InRibbonGalleryで主なプロパティは以下の通りです。

名前 説明
GroupBy 子要素をグループ化する際のプロパティの名前
ResizeMode ギャラリーを展開したときに位一覧のリサイズ方法
MaxItemsInRow ギャラリー1行に表示できる最大量
MinItemsInRow ギャラリー1行に表示できる最小量
ItemWidth 1つのギャラリー要素の幅
ItemHeight 1つのギャラリー要素の高さ

XAML は以下のとおりです。

<Fluent:RibbonGroupBox Header="ギャラリー">
    <!-- 不通のギャラリー -->
    <Fluent:InRibbonGallery Header="サンプル"
                            KeyTip="GA"
                            Icon="pack://application:,,,/Ribbons.Sample;component/assets/icons8-Topmenu_x16.png"
                            GroupBy="Tag"
                            ResizeMode="None"
                            MaxItemsInRow="6"
                            MinItemsInRow="2"
                            ItemWidth="40"
                            ItemHeight="55"
                            MinItemsInDropDownRow="5">
        <!-- グループ定義 -->
        <Fluent:InRibbonGallery.Filters>
            <Fluent:GalleryGroupFilter Title="All"
                                       Groups="Group1,Group2" />
            <Fluent:GalleryGroupFilter Title="Group1"
                                       Groups="Group1" />
            <Fluent:GalleryGroupFilter Title="Group2"
                                       Groups="Group2" />
        </Fluent:InRibbonGallery.Filters>
        <!-- ギャラリーの中身 -->
        <TextBlock Tag="Group1">1</TextBlock>
        <TextBlock Tag="Group1">2</TextBlock>
        <TextBlock Tag="Group1">3</TextBlock>
        <TextBlock Tag="Group1">4</TextBlock>
        <TextBlock Tag="Group1">5</TextBlock>
        <TextBlock Tag="Group1">6</TextBlock>
        <TextBlock Tag="Group2">G21</TextBlock>
        <TextBlock Tag="Group2">G22</TextBlock>
        <TextBlock Tag="Group2">G23</TextBlock>
        <TextBlock Tag="Group2">G24</TextBlock>
        <TextBlock Tag="Group2">G25</TextBlock>
        <TextBlock Tag="Group2">G26</TextBlock>
    </Fluent:InRibbonGallery>
</Fluent:RibbonGroupBox>

GroupByには、Tagを指定していますが、WidthでもBackgroundでも何でも大丈夫です。指定しないこともできます。同じ要素がグループ化されます。但しInRibbonGallery.Filtersでフィルター定義していますので制御できる範囲で指定してください。

この場合、TextBlockのTagの内容が同じものでグループ化されます。

Colorギャラリーの表示と定義

色を選択するためのコントロールで、選択可能な色の一覧を表示してその中から選択します。宣言すると以下の通りになります。

f:id:Takachan:20170702181119p:plain

よくある、ドロップダウンするとカラーギャラリーが表示されるようにするために、DropDownButonn の中身に、ColorGallery を格納しています。

<!-- カラーギャラリー -->
<Fluent:DropDownButton SizeDefinition="Small"
                       MaxDropDownHeight="500"
                       Icon="pack://application:,,,/Ribbons.Sample;component/assets/icons8-Fan_x16.png">
    
    <Fluent:ColorGallery ThemeColorsSource="{Binding ThemeColors}"
                         SelectedColor="{Binding ThemeColor, Mode=TwoWay}"
                         Mode="ThemeColors"
                         StandardColorGridRows="3"
                         Columns="10"
                         ThemeColorGridRows="5"
                         IsNoColorButtonVisible="True" />
</Fluent:DropDownButton>

ThemeColorsSource は ViewModel側に以下のような定義をすると設定色からグラデーションを自動で並べてくれます。

public Color[] ThemeColors { get; } 
    = {
          Colors.Red, 
          Colors.Green, 
          Colors.Blue, 
          Colors.White, 
          Colors.Black, 
          Colors.Purple
      };

また、選択した色をコードが取得するためにSelectedColorをバインドしないと使い物にならないです。

VM側に簡単ですが、以下定義をしています。

public Color ThemeColor { get; set; ]

以上で、ギャラリーの説明は終了です。次回はアプリケーションメニュー、バックステージを実装していきます。

各記事へのリンク