功能区布局和大小调整

功能区使用自适应布局和调整大小行为，以针对各种窗口大小提供最佳控件布局。 功能区提供适用于许多常见方案的默认调整大小行为。 Microsoft Ribbon for WPF 还提供了一组选项，您可以使用这些选项指定自定义调整大小行为。

功能区调整大小行为概述

应用程序窗口的宽度更改时，功能区控件会动态调整大小。 下图显示了应用程序窗口变窄时功能区如何调整大小。

窗口具有足够的可用空间时，选项卡上的每个组都以指定的最大大小显示。

窗口变窄时，**“剪贴板”和“插入”**组以较小的大小显示。

窗口进一步变窄时，“剪贴板”、**“插入”和“段落”**组以折叠状态显示。 如果组折叠为下拉按钮，则打开下拉按钮时会显示它的最大大小变体。

默认调整大小行为

默认情况下，在功能区上布置的面板使用星号调整大小，以显示可用空间中可容纳的可能的最大控件变体。 窗口的宽度更改时，控件组按循环顺序从右向左调整大小。 在从右向左布局的本地化区域中，控件组按循环顺序从左向右调整大小。

“星号调整大小”是一种约定，它规定可用空间在需要占用空间的元素之间平均分配。 它因您可以在 XAML 中使用星号 (*) 指定星号调整大小行为而得名。

无空间约束时，每个组都以最大尺寸显示它的所有控件。 窗口变窄时，每个组都调整其控件的大小，以便以较小的变体显示。 即使以最小的控件变体显示每个组，空间仍不够时，组折叠为下拉按钮。

指定自定义调整大小行为

对于复杂的功能区布局，您通常希望准确指定功能区如何随窗口调整大小。 您可以在控件级别、组级别或选项卡级别指定调整大小行为。 如果未在特定级别指定自定义调整大小设置，则使用默认行为。

下表列出了如何在不同的级别指定自定义调整大小设置。

控件级别的调整大小行为

功能区准则指定了功能区控件的三个标准大小变体：大、中和小。 每个控件都具有设置为 RibbonControlSizeDefinition 对象的 ControlSizeDefinition 属性。 RibbonControlSizeDefinition 对象具有用于指定显示大图像还是小图像的 ImageSize 属性，以及用于指定控件的标签是否可见的 IsLabelVisible 属性。

下表显示了三种标准控件大小的 RibbonControlSizeDefinition 属性设置。

下面的示例演示与大、中和小控件对应的三个 RibbonControlSizeDefinition 声明。

<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />

控件组

相关功能区组件可以组合在 RibbonControlGroup 中。 调整控件组的大小时，一个 RibbonControlSizeDefinition 应用于 RibbonControlGroup 中的所有控件。 RibbonControlGroup 位于 RibbonGroup 中，好像它是一个控件。

组级别的调整大小行为

调整功能区的大小时，选项卡中的组使用 RibbonGroupItemsPanel 的内置逻辑、特定于用户的调整大小逻辑或二者的组合调整大小。 默认情况下，RibbonGroupItemsPanel 调整组中控件的大小以显示适合可用空间的可能的最大控件变体。 如果指定，选项卡中的组使用 GroupSizeReductionOrder 和 RibbonGroup.GroupSizeDefinitions 属性的组合调整大小，前者指定调整组大小的顺序，后者指定组的各种可能的大小配置。

下面的示例演示前面显示的**“剪贴板”**组的 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 对象的集合，每个对象指定一种可能的组配置。 调整功能区的大小时，ItemsPanel 确定要使用的 RibbonGroupSizeDefinition，以在可用空间中容纳所有控件。 然后它根据所选 RibbonGroupSizeDefinition 中 RibbonControlSizeDefinition 对象指定的方式确定控件的大小。 控件大小定义按顺序应用于组中的控件。

功能区准则指明，每个组应该至少指定两个预定义的大小变体：大型变体和折叠变体。 RibbonGroup 无法再在可用大小中容纳控件时，组折叠为下拉按钮。 如果组处于折叠状态，则打开下拉按钮时将显示指定的最大变体。 在前面显示的第三个插图中，**“剪贴板”**组处于折叠状态，它的最大变体显示在下拉按钮中。

您可以将 IsCollapsed 属性设置为 true，以指定应该将组的大小调整为折叠的下拉按钮。 因为打开时折叠的组始终显示最大变体，所以设置 IsCollapsed 属性时不要指定 RibbonControlSizeDefinition 对象的集合。 如果指定 RibbonControlSizeDefinition 集合，则将忽略 IsCollapsed 属性。

前面显示的插图演示了示例中的 GroupSizeDefinitions。

• 在前面显示的第一个插图中，第一个 RibbonGroupSizeDefinition 应用于**“剪贴板”**组。 三个 RibbonControlSizeDefinition 对象按顺序应用于三个按钮，并将按钮大小指定为大、中和中。

• 在第二个插图中，窗口的可用空间减小，所以第二个 RibbonGroupSizeDefinition 应用于**“剪贴板”**组。 RibbonControlSizeDefinition 对象将按钮大小指定为大、小和小。

• 在第三个插图中，应用最后一个 RibbonGroupSizeDefinition。 此对象指定组处于折叠状态，而不是指定控件的大小。

使用自定义 ItemsPanel 实现的组级别调整大小行为

如果使用默认调整大小行为或者通过指定 GroupSizeDefinitions 无法实现所需布局，则可以使用自定义面板替换默认 ItemsPanel。 例如，前面显示的**“字体”组包含一些按钮组，每个按钮组都包含在一个 RibbonControlGroup 中。 如上所述，RibbonControlGroup 位于 RibbonGroup 中，好像它是单个控件。 因此，“字体”**组不会以有效的方式使用默认面板调整大小。 为了实现显示的布局，使用标准 WrapPanel 替换了默认 RibbonGroupItemsPanel。

下面的示例演示如何使用 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 属性设置为唯一值。 您可以通过向减缩顺序列表添加组名称来指定减缩顺序。

下面的示例演示如何为前面的插图中显示的**“开始”**选项卡设置 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>

在第一个插图中，功能区具有足够的空间，能够使用最大大小变体布置每个组。 在第二个插图中，随着窗口变小，在 GroupSizeReductionOrder 中指定的前两个组（“剪贴板”和“插入”）以较小的变体显示。 在第三个插图中，**“插入”组进一步减缩，“段落”组减缩，“剪贴板”**组进一步减缩。

RibbonTab 的默认 ItemsPanel 为 RibbonGroupsPanel。 此面板负责根据默认或用户指定的大小减缩顺序确定选项卡中组的可用大小和布局。

如果 GroupSizeReductionOrder 集合包含的名称未显示在选项卡上的组之一上，则忽略该名称。 如果组名称在集合中显示的次数多于该组的大小变体数，则将组的大小调整为其最小变体，显示次数达到大小变体数后在集合中再次显示时会被忽略。 如果任何组未在 GroupSizeReductionOrder 集合中列出，则用户指定的所有减缩完成后这些组按循环顺序从右向左依次减缩大小。 这意味着默认情况下，如果未在 GroupSizeReductionOrder 中指定任何组，则每个组按循环顺序从右向左依次减缩大小。 在从右向左布局的本地化区域中，这种调整大小的顺序相反。