リボンのレイアウトおよびサイズ変更
リボンでは、さまざまなウィンドウ サイズに最適なコントロール レイアウトを実現するために、アダプティブなレイアウトとサイズ変更が使用されます。 リボンには、多くの一般的なシナリオに適した既定のサイズ変更動作が用意されています。 Microsoft Ribbon for WPF では、カスタムのサイズ変更動作を指定するために使用できる一連のオプションも用意されています。
リボンのサイズ変更の概要
アプリケーション ウィンドウの幅が変更されると、リボン コントロールは動的にサイズ変更されます。 以下の図は、アプリケーション ウィンドウが狭められたときにリボンがサイズ変更されるようすを示しています。
ウィンドウに使用可能な領域が十分にある場合、タブ内の各グループはその指定された最大サイズで表示されます。
.png "大きなコントロールを使用したリボン")
ウィンドウの幅が狭くなると、[Clipboard] グループと [Insert] グループが小さいサイズで表示されます。
.png "中サイズのコントロールを使用したリボン")
ウィンドウの幅がさらに狭くなると、[Clipboard] グループ、[Insert] グループ、および [Paragraph] グループが折りたたまれた状態で表示されます。 グループがドロップダウン ボタンに折りたたまれた場合、ドロップダウンを開くと、その最大サイズのバリエーションが表示されます。
.png "グループが折りたたまれたリボン")
既定のサイズ変更動作
既定では、リボンを配置するパネルではスター サイズ変更が使用され、使用可能な領域に適合する最大サイズのコントロールのバリエーションが表示されます。 ウィンドウの幅が変更されると、コントロールのグループは右から左へ循環的にサイズ変更されます。 右から左へレイアウトされるローカライズされたカルチャでは、コントロールのグループは左から右へ循環的にサイズ変更されます。
スター サイズ変更とは、領域に表示される要素間で使用可能な領域が均等に分割される規則です。 XAML ではスター サイズ変更の指定にアスタリスク (*) を使用することから、この名前が付いています。
領域の制約がない場合は、各グループのすべてのコントロールが最大サイズで表示されます。 ウィンドウが縮小されると、各グループのコントロールがサイズ変更され、小さいバリエーションが表示されます。 各グループのグループを最小サイズで表示するだけの領域がない場合、グループはドロップダウン ボタンに折りたたまれます。
カスタムのサイズ変更動作の指定
複雑なリボン レイアウトでは、通常、ウィンドウに合わせてリボンをどのようにサイズ変更させるかを正確に指定する必要があります。 サイズ変更動作は、コントロールレベル、グループレベル、またはタブレベルで指定できます。 カスタムのサイズ変更設定が特定のレベルで指定されていない場合は、既定の動作が使用されます。
次の表に、さまざまなレベルでのカスタムのサイズ変更設定の指定方法を示します。
レベル |
カスタムのサイズ変更の指定方法 |
|---|---|
ControlSizeDefinition プロパティを設定して、表示するコントロールのサイズを指定します。 |
|
GroupSizeDefinitions プロパティを設定して、サイズ変更時に使用できるさまざまなコントロール サイズの組み合わせを指定します。 |
|
GroupSizeReductionOrder プロパティを設定して、リボン グループをサイズ変更する順序を指定します。 |
コントロールレベルのサイズ変更
リボンのガイドラインでは、リボン コントロールの 3 つの標準サイズのバリエーションとして大、中、および小が指定されています。 各コントロールには ControlSizeDefinition プロパティがあり、RibbonControlSizeDefinition オブジェクトに設定されています。 RibbonControlSizeDefinition オブジェクトには、大きいイメージと小さいイメージのどちらを表示するかを指定する ImageSize プロパティと、コントロールのラベルを表示するかどうかを指定する IsLabelVisible プロパティがあります。
次の表に、3 つの標準コントロール サイズの RibbonControlSizeDefinition プロパティの設定を示します。
サイズ |
説明 |
||
|---|---|---|---|
Large |
大きいイメージが表示され、ラベルは最大 2 行になります。 |
true |
|
Medium |
小さいイメージが表示され、ラベルは 1 行になります。 |
true |
|
Small |
小さいイメージのみが表示され、ラベルは表示されません。 |
false |
次の例は、大、中、小のコントロールに対応する 3 つの RibbonControlSizeDefinition の宣言を示しています。
<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
コントロール グループ
関連するリボン コントロールを RibbonControlGroup にまとめることができます。 コントロール グループがサイズ変更されると、1 つの RibbonControlSizeDefinition が、RibbonControlGroup 内のすべてのコントロールに適用されます。 RibbonControlGroup は、1 つのコントロールであるかのように RibbonGroup に配置されます。
グループレベルのサイズ変更
リボンがサイズ変更されるときには、RibbonGroupItemsPanel の組み込みのロジック、ユーザー指定のサイズ変更ロジック、またはそれら 2 つの組み合わせを使用して、タブ内のグループがサイズ変更されます。 既定では、RibbonGroupItemsPanel によってグループ内のコントロールがサイズ変更され、使用可能な領域に適合する最大サイズのコントロールのバリエーションが表示されます。 指定されていれば、各グループのサイズ変更順序を指定する GroupSizeReductionOrder と、グループに設定できるさまざまなサイズ構成を指定する RibbonGroup.GroupSizeDefinitions プロパティを使用して、タブ内のグループがサイズ変更されます。
次の例は、前に示した [Clipboard] グループの GroupSizeDefinitions を示しています。
<ribbon:RibbonGroup.GroupSizeDefinitions>
<ribbon:RibbonGroupSizeDefinition>
<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
</ribbon:RibbonGroupSizeDefinition>
<ribbon:RibbonGroupSizeDefinition>
<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
</ribbon:RibbonGroupSizeDefinition>
<ribbon:RibbonGroupSizeDefinition IsCollapsed="True" />
</ribbon:RibbonGroup.GroupSizeDefinitions>
GroupSizeDefinitions プロパティには、RibbonGroupSizeDefinition オブジェクトのコレクションが含まれます。各オブジェクトは、グループに設定できる 1 つの構成を指定します。 リボンのサイズ変更時には、ItemsPanel により、すべてのコントロールを使用可能な領域に適合させるためにどの RibbonGroupSizeDefinition を使用するかが決定されます。 その後、選択された RibbonGroupSizeDefinition に含まれる RibbonControlSizeDefinition オブジェクトに従って、コントロールのサイズが指定されます。 コントロールのサイズの定義は、グループ内のコントロールに順次適用されます。
リボンのガイドラインでは、すべてのグループで、大きいバリエーションと、折りたたまれたバリエーションの少なくとも 2 つの定義済みのバリエーションが指定されている必要があるとされています。 RibbonGroup が使用可能なサイズにコントロールを適合できなくなると、グループはドロップダウンに折りたたまれます。 グループがドロップダウン ボタンに折りたたまれた場合、ドロップダウンを開くと、指定されている最大サイズのバリエーションが表示されます。 前に示した 3 つ目の図では、[Clipboard] グループが折りたたまれており、その最大サイズのバリエーションがドロップダウンに表示されています。
グループが折りたたまれたドロップダウンにサイズ変更されるように指定するには、IsCollapsed プロパティを true に設定します。 折りたたまれたグループでは、開いたときに常に最大サイズのバリエーションが表示されるため、IsCollapsed プロパティを設定する場合は、RibbonControlSizeDefinition オブジェクトのコレクションは指定しません。 RibbonControlSizeDefinition コレクションを指定した場合、IsCollapsed プロパティは無視されます。
例で使用されている GroupSizeDefinitions の動作は、上に掲載した図に示されています。
前に示した 1 つ目の図では、1 つ目の RibbonGroupSizeDefinition が [Clipboard] グループに適用されています。 3 つの RibbonControlSizeDefinition オブジェクトが 3 つのボタンに順に適用されており、ボタンのサイズが、大、中、および中と指定されています。
2 つ目の図では、ウィンドウで使用可能な領域が少ないため、2 つ目の RibbonGroupSizeDefinition が [Clipboard] グループに適用されています。 RibbonControlSizeDefinition オブジェクトによって、ボタンのサイズが、大、小、および小と指定されています。
3 つ目の図では、最後の RibbonGroupSizeDefinition が適用されています。 この定義では、コントロールのサイズを指定するのではなく、グループを折りたたむよう指定しています。
カスタムの ItemsPanel を使用したグループレベルのサイズ変更
既定のサイズ変更を使用する方法でも GroupSizeDefinitions を指定する方法でも希望のレイアウトを実現できない場合は、既定の ItemsPanel をカスタム パネルで置き換えることができます。 たとえば、前に示した [Font] グループには、いくつかのボタンのグループが含まれており、それぞれが RibbonControlGroup に含まれています。 前に述べたとおり、RibbonControlGroup は、1 つのコントロールであるかのように RibbonGroup に配置されます。 結果として、[Font] グループは、既定のパネルでは使いやすい形にサイズ変更できなくなっています。 示されているレイアウトを実現するには、既定の RibbonGroupItemsPanel を標準の WrapPanel で置き換えます。
次の例は、WrapPanel を RibbonGroup の ItemsPanel として使用する方法を示しています。
<ribbon:RibbonGroup Header="Font" Name="Font" SmallImageSource="Images\FontColor16.png">
<ribbon:RibbonGroup.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" MaxWidth="300" />
</ItemsPanelTemplate>
</ribbon:RibbonGroup.ItemsPanel>
…
<!-- Ribbon Group Content -->
…
</ribbon:RibbonGroup>
タブレベルのサイズ変更
タブレベルのサイズ変更を指定するには、RibbonTab.GroupSizeReductionOrder を設定して、グループをサイズ変更する順序を指定します。 GroupSizeReductionOrder を指定するには、各 RibbonGroup でその Name プロパティが一意の値に設定されている必要があります。 縮小順序を指定するには、グループ名を縮小順序のリストに追加します。
次の例に、前の図に示されている [Home] タブの GroupSizeReductionOrder を設定する方法を示します。
<ribbon:RibbonTab Header="Home"
GroupSizeReductionOrder="Clipboard, Insert, Insert, Paragraph, Clipboard, Editing, Font, Clipboard" >
<ribbon:RibbonGroup Header="Clipboard" Name="Clipboard" SmallImageSource="Images/Paste16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Font" Name="Font" SmallImageSource="Images\FontColor16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Paragraph" Name="Paragraph" SmallImageSource="Images/AlignLeft16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Insert" Name="Insert" SmallImageSource="Images/InsertPicture16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Editing" Name="Editing" SmallImageSource="Images/Find16.png">
...
</ribbon:RibbonGroup>
</ribbon:RibbonTab>
1 つ目の図では、リボンに、各グループをその最大サイズのバリエーションを使用してレイアウトするだけの十分な領域があります。 2 つ目の図では、ウィンドウが小さくなったため、GroupSizeReductionOrder で指定されている最初の 2 つのグループ、[Clipboard] と [Insert] が小さいバリエーションで表示されています。 3 つ目の図では、[Insert] グループが再度縮小され、[Paragraph] グループが縮小されて、[Clipboard] グループが再度縮小されています。
RibbonTab の既定の ItemsPanel は RibbonGroupsPanel です。 このパネルは、既定またはユーザー指定のサイズ縮小順序に基づいて、タブ内の各グループに適用できるサイズとレイアウトを決定します。
GroupSizeReductionOrder コレクションに、タブ上のどのグループにも表示されない名前が含まれている場合、その名前は無視されます。 コレクション内に出現する 1 つのグループ名の数が、そのグループのサイズのバリエーションの数を超えている場合、グループは最小サイズのバリエーションにサイズ変更され、コレクション内のそれ以降のグループ名は無視されます。 GroupSizeReductionOrder コレクションに含まれていないグループがある場合、それらのグループは、ユーザー指定の縮小がすべて実行された後に、右から左へ 1 つずつ循環的に縮小されます。 つまり、GroupSizeReductionOrder に何も指定されていない場合、既定では、各グループは右から左へ 1 つずつ循環的に縮小されます。 右から左にレイアウトされるローカライズされたカルチャでは、このサイズ変更は逆方向に実行されます。