通过大小定义和缩放策略自定义功能区

  • 项目

功能区命令栏中承载的控件受 Windows 功能区框架强制实施的布局规则的约束，这些规则基于默认行为和布局模板的组合， (框架定义的和自定义) ，如功能区标记中声明的那样。 这些规则定义功能区框架的自适应布局行为，这些行为会影响命令栏中的控件在运行时适应各种功能区大小的方式。

简介

功能区框架定义的自适应布局是指功能区 UI 中的所有控件能够根据运行时功能区大小的更改动态调整其组织、大小、格式和相对规模。

框架通过一组专用于指定和自定义各种布局行为的标记元素公开自适应布局功能。 名为 SizeDefinitions 的模板集合由框架定义，每个模板都支持各种控件和布局方案。 但是，如果预定义模板不提供应用程序所需的 UI 体验或布局，框架也支持自定义模板。

若要以特定功能区大小以首选布局显示控件，预定义模板和自定义模板可与 ScalingPolicy 元素结合使用。 此元素包含框架在呈现功能区时用作指导的大小首选项清单。

注意

功能区框架根据一组内置启发法提供默认布局行为，用于在运行时组织和呈现控件，而无需预定义的 SizeDefinition 模板。 但是，此功能仅用于原型制作目的。

功能区大小定义模板

功能区框架提供了一组全面的 SizeDefinition 模板，用于指定一 组 功能区控件的大小和布局行为。 这些模板涵盖了在功能区应用程序中组织控件的最常见方案。

为了在功能区应用程序中强制实施一致的用户体验，每个 SizeDefinition 模板都会对其支持的控件或控件系列施加限制。

例如，按钮系列控件包括：

虽然输入系列控件包括：

复选框 和 功能区内库 不属于按钮系列或输入系列。 这两个控件只能在 SizeDefinition 模板中明确指示的位置使用。

下面是 SizeDefinition 模板的列表，其中包含每个模板允许的布局和控件的说明。

重要

如果在标记中声明的控件未完全映射到关联模板中定义的控件类型、顺序和数量，则标记编译器将记录验证错误并终止编译。

OneButton

一个按钮系列控件。
仅支持大型组大小。

onebutton sizedefinition 模板的图片。

TwoButtons

两个按钮系列控件。
仅支持大型和中型组大小。

双按钮大尺寸定义模板的图片。

双按钮中型定义模板的图片。

ThreeButtons

三个按钮系列控件。
仅支持大型和中型组大小。

三按钮大尺寸定义模板的图片。

三个按钮中型定义模板的图片。

ThreeButtons-OneBigAndTwoSmall

三个按钮系列控件。
第一个按钮在所有三个大小中都突出显示。

三个按钮-onebigandtwosmall 大型定义模板的图片。

threebuttons-onebigandtwosmall 中型definition 模板的图片。

threebuttons-onebigandtwosmall 小型定义模板的图片。

ThreeButtonsAndOneCheckBox

三个按钮系列控件，附带一个 CheckBox 控件。
仅支持大型和中型组大小。

三buttonsandonecheckbox 大型定义模板的图片。

threebuttonsandonecheckbox 中型definition 模板的图片。

FourButtons

四个按钮系列控件。

四按钮大尺寸定义模板的图片。

四个按钮中型定义模板的图片。

四个按钮小型定义模板的图片。

FiveButtons

五个按钮系列控件。

五个按钮大尺寸定义模板的图片。

五个按钮中型定义模板的图片。

五个按钮小型定义模板的图片。

FiveOrSixButtons

五个按钮系列控件和一个可选的第六个按钮。

fiveorsixbuttons 大型定义模板的图片。

fiveorsixbuttons 中型definition 模板的图片。

fiveorsixbuttons 小型定义模板的图片。

SixButtons

六个按钮系列控件。

六个按钮大尺寸定义模板的图片。

六个按钮中型定义模板的图片。

六个按钮小型定义模板的图片。

SixButtons-TwoColumns

(备用演示文稿) 的六个按钮系列控件。

sixbuttons-twocolumns largedefinition 模板的图片。

sixbuttons-twocolumns medium sizedefinition 模板。

六个按钮-二列小型定义模板的图片。

SevenButtons

七个按钮系列控件。

七个按钮大尺寸定义模板的图片。

七个按钮中等大小定义模板的图片。

七个按钮小型定义模板的图片。

EightButtons

八个按钮系列控件。

八buttons-lastthreesmall 大型定义模板的图片。

八buttons-lastthreesmall 中等大小定义模板的图片。

八buttons-lastthreesmall 小型定义模板的图片。

EightButtons-LastThreeSmall

八个按钮系列控件 (备用演示文稿) 。

注意

使用此模板声明的所有控件元素必须包含在两个 ControlGroup 元素中：一个用于前五个元素，一个用于最后三个元素。


以下示例演示此模板所需的标记。

<Group CommandName="cmdSizeDefinitionsGroup" 
       SizeDefinition="EightButtons-LastThreeSmall">
  <ControlGroup>
    <Button CommandName="cmdSDButton1" />
    <Button CommandName="cmdSDButton2" />
    <Button CommandName="cmdSDButton3" />
    <Button CommandName="cmdSDButton4" />
    <Button CommandName="cmdSDButton5" />
  </ControlGroup>
  <ControlGroup>
    <Button CommandName="cmdSDButton6" />
    <Button CommandName="cmdSDButton7" />
    <Button CommandName="cmdSDButton8" />
  </ControlGroup>
</Group>

八按钮大型定义模板的图片。

八个按钮中等大小定义模板的图片。

八个按钮小型定义模板的图片。

NineButtons

九个按钮系列控件。

九个按钮大型定义模板的图片。

九个按钮中等大小定义模板的图片。

九个按钮小型定义模板的图片。

TenButtons

十个按钮系列控件。

特纳顿大型定义模板的图片。

特尼顿中型定义模板的图片。

tenbuttons small sizedefinition 模板的图片。

ElevenButtons

11 个按钮系列控件。

十一个按钮大型定义模板的图片。

十一个按钮中等大小定义模板的图片。

十一个按钮小型定义模板的图片。

OneFontControl

一个 FontControl。

仅支持大型和中型组大小。

重要

框架不支持在自定义模板定义中包含 FontControl 。

onefontcontrol 大型定义模板的图片。

onefontcontrol 中等大小定义模板的图片。

OneInRibbonGallery

一个 InRibbonGallery 控件。

仅支持大型和小型组大小。

oneinribbongallery 大型大小定义模板的图片。

oneinribbongallery small sizedefinition 模板的图片。

InRibbonGalleryAndBigButton

一个 InRibbonGallery 控件和一个按钮系列控件。

仅支持大型和小型组大小。

inribbongalleryandbigbutton large sizedefinition 模板的图片。

inribbongalleryandbigbutton small sizedefinition 模板的图片。

InRibbonGalleryAndButtons-GalleryScalesFirst

一个 功能区内库 控件和两个或三个按钮系列控件。

库折叠为“中型”和“小型”组大小的 Popup 表示形式。

inribbongalleryandbuttons-galleryscalesfirst large sizedefinition 模板的图片。

inribbongalleryandbuttons-galleryscalesfirst medium sizedefinition 模板的图片。

inribbongalleryandbuttons-galleryscalesfirst small sizedefinition 模板的图片。

ButtonGroups

32 个按钮系列控件的复杂排列 (其中大部分是可选的) 。

注意

除了大型 ButtonGroups 模板的可选全尺寸按钮外，使用此模板声明的所有控件元素都必须包含在 ControlGroup 元素中。

以下示例演示使用此模板显示所有 32 个控件元素 (必需和可选) 所需的标记。

<Group CommandName="cmdSizeDefinitionsGroup"
       SizeDefinition="ButtonGroups">
  <!-- Row 1 -->
  <ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton1" />
      <Button CommandName="cmdSDButton2" />
      <Button CommandName="cmdSDButton3" />
      <Button CommandName="cmdSDButton4" />
      <Button CommandName="cmdSDButton5" />
      <Button CommandName="cmdSDButton6" />
      <Button CommandName="cmdSDButton7" />
      <Button CommandName="cmdSDButton8" />
      <Button CommandName="cmdSDButton9" />
      <Button CommandName="cmdSDButton10" />
    </ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton11" />
      <Button CommandName="cmdSDButton12" />
    </ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton13" />
      <Button CommandName="cmdSDButton14" />
    </ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton15" />
    </ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton16" />
    </ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton17" />
      <Button CommandName="cmdSDButton18" />
    </ControlGroup>
  </ControlGroup>
  <!-- Row 2 -->
  <ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton19" />
      <Button CommandName="cmdSDButton20" />
      <Button CommandName="cmdSDButton21" />
      <Button CommandName="cmdSDButton22" />
      <Button CommandName="cmdSDButton23" />
      <Button CommandName="cmdSDButton24" />
      <Button CommandName="cmdSDButton25" />
      <Button CommandName="cmdSDButton26" />
      <Button CommandName="cmdSDButton27" />
      <Button CommandName="cmdSDButton28" />
    </ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton29" />
    </ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton30" />
      <Button CommandName="cmdSDButton31" />
    </ControlGroup>
  </ControlGroup>
  <Button CommandName="cmdSDButton32" />            
</Group>

按钮组大型定义模板的图片。

按钮组中等大小定义模板的图片。

按钮组小型定义模板的图片。

ButtonGroupsAndInputs

两个输入系列控件 (第二个是可选的) 后跟 29 个按钮系列控件的复杂排列 (其中大部分是可选的) 。

仅支持大型和中型组大小。

注意

使用此模板声明的所有控件元素都必须包含在 ControlGroup 元素中。

以下示例演示使用此模板显示所有控件元素 (必需和可选) 所需的标记。

<Group CommandName="cmdSizeDefinitionsGroup" 
       SizeDefinition="ButtonGroupsAndInputs">
  <!-- Row 1 -->
  <ControlGroup>
    <ControlGroup>
      <ComboBox CommandName="cmdSDComboBox" />
      <Spinner CommandName="cmdSDSpinner" />
    </ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton1" />
      <Button CommandName="cmdSDButton2" />
      <Button CommandName="cmdSDButton3" />
      <Button CommandName="cmdSDButton4" />
      <Button CommandName="cmdSDButton5" />
      <Button CommandName="cmdSDButton6" />
      <Button CommandName="cmdSDButton7" />
      <Button CommandName="cmdSDButton8" />
      <Button CommandName="cmdSDButton9" />
    </ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton10" />
    </ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton11" />
      <Button CommandName="cmdSDButton12" />
    </ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton13" />
    </ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton14" />
    </ControlGroup>
  </ControlGroup>
  <!-- Row 2 -->  
  <ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton15" />
      <Button CommandName="cmdSDButton16" />
      <Button CommandName="cmdSDButton17" />
      <Button CommandName="cmdSDButton18" />
      <Button CommandName="cmdSDButton19" />
      <Button CommandName="cmdSDButton20" />
      <Button CommandName="cmdSDButton21" />
      <Button CommandName="cmdSDButton22" />
      <Button CommandName="cmdSDButton23" />
      <Button CommandName="cmdSDButton24" />
    </ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton25" />
      <Button CommandName="cmdSDButton26" />
    </ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton27" />
      <Button CommandName="cmdSDButton28" />
    </ControlGroup>
    <ControlGroup>
      <Button CommandName="cmdSDButton29" />
    </ControlGroup>
  </ControlGroup>
</Group>

buttongroupsandinputs 大型定义模板的图片。

buttongroupsandinputs 中等大小定义模板的图片。

BigButtonsAndSmallButtonsOrInputs

两个按钮系列控件 (两个可选) 后跟两个或三个按钮或输入系列控件。

仅支持大型和中型组大小。

bigbuttonsandsmallbuttonsorinputs large sizedefinition 模板的图片。

bigbuttonsandsmallbuttonsorinputs medium sizedefinition 模板的图片。

Basic SizeDefinition 示例

下面的代码示例提供了有关如何在功能区标记中声明 SizeDefinition 模板的基本演示。

OneInRibbonGallerySizeDefinition 用于此特定示例，但所有框架模板都以类似的方式指定。

<!-- InRibbonGallery -->
<Group CommandName="cmdInRibbonGalleryGroup" SizeDefinition="OneInRibbonGallery">
  <InRibbonGallery CommandName="cmdInRibbonGallery"
                   MaxColumns="10"
                   MaxColumnsMedium="5"
                   MinColumnsLarge="5"
                   MinColumnsMedium="3"
                   Type="Items">
    <InRibbonGallery.MenuLayout>
      <VerticalMenuLayout Rows="2"
                          Gripper="Vertical"/>
    </InRibbonGallery.MenuLayout>
    <InRibbonGallery.MenuGroups>
      <MenuGroup>
        <Button CommandName="cmdButton1"></Button>
        <Button CommandName="cmdButton2"></Button>
      </MenuGroup>
      <MenuGroup>
        <Button CommandName="cmdButton3"></Button>
      </MenuGroup>
    </InRibbonGallery.MenuGroups>            
  </InRibbonGallery>
</Group>

具有缩放策略的复杂 SizeDefinition 示例

可以通过在功能区标记中使用缩放策略来控制 SizeDefinition 模板的折叠行为。

ScalingPolicy 元素包含 ScalePolicy.IdealSizes 和 Scale 声明的清单，这些声明在调整功能区大小时为一个或多个 Group 元素指定自适应布局首选项。

注意

强烈建议指定足够的缩放策略详细信息，以便大多数（如果不是全部）Group 元素都与 Size 属性等于 Popup的 Scale 元素相关联。 这样，框架就可以在自动引入滚动机制之前，以尽可能小的大小呈现功能区，并支持最广泛的显示设备。

下面的代码示例演示了一个 ScalingPolicy 清单，该清单为“开始”选项卡上四组控件中的每组指定一个 ScalingPolicy.IdealSizesSizeDefinition 首选项。此外，指定 Scale 元素以影响每个组的大小降序的折叠行为。

<Tab CommandName="Home">
  <Tab.ScalingPolicy>
    <ScalingPolicy>
      <ScalingPolicy.IdealSizes>
        <Scale Group="GroupClipboard" Size="Medium"/>
        <Scale Group="GroupView" Size="Large"/>
        <Scale Group="GroupFont" Size="Large"/>
        <Scale Group="GroupParagraph" Size="Large"/>
      </ScalingPolicy.IdealSizes>
      <Scale Group="GroupClipboard" Size="Small"/>
      <Scale Group="GroupClipboard" Size="Popup"/>
      <Scale Group="GroupFont" Size="Medium"/>
      <Scale Group="GroupFont" Size="Popup"/>
      <Scale Group="GroupParagraph" Size="Medium"/>
      <Scale Group="GroupParagraph" Size="Popup"/>
      <!-- 
        GroupView group is associated with the OneButton SizeDefinition.
        Since this template is constrained to one size (Large) there
        is no need to declare further scaling preferences.
      -->
    </ScalingPolicy>
  </Tab.ScalingPolicy>

  <Group CommandName="GroupClipboard" SizeDefinition="FourButtons">
    <Button CommandName="Paste"/>
    <Button CommandName="Cut"/>
    <Button CommandName="Copy"/>
    <Button CommandName="SelectAll"/>
  </Group>

  <Group CommandName="GroupFont"  ApplicationModes="1">
    <FontControl CommandName="Font" FontType="FontWithColor" />
  </Group>

  <Group CommandName="GroupParagraph"  ApplicationModes="1" SizeDefinition="ButtonGroups">
    <ControlGroup>
      <ControlGroup>
        <ToggleButton CommandName="Numbered" />
        <ToggleButton CommandName="Bulleted" />
      </ControlGroup>
    </ControlGroup>
    <ControlGroup>
      <ControlGroup>
        <ToggleButton CommandName="LeftJustify" />
        <ToggleButton CommandName="CenterJustify" />
        <ToggleButton CommandName="RightJustify" />
      </ControlGroup>
      <ControlGroup/>
      <ControlGroup>
        <Button CommandName="Outdent" />
        <Button CommandName="Indent" />
      </ControlGroup>
    </ControlGroup>
  </Group>

  <Group CommandName="GroupView" SizeDefinition="OneButton" >
    <ToggleButton CommandName="ViewSource"/>
  </Group>

</Tab>

自定义模板

如果默认布局行为和预定义 的 SizeDefinition 模板不能为特定布局方案提供灵活性或支持，则功能区框架通过 Ribbon.SizeDefinitions 元素支持自定义模板。

可以通过两种方式声明自定义模板：使用 Ribbon.SizeDefinitions 元素声明可重用的命名模板的独立方法，或特定于 组的内联方法。

独立模板

下面的代码示例演示了一个基本的可重用自定义模板。

<Ribbon.SizeDefinitions>
  <SizeDefinition Name="CustomTemplate">
    <GroupSizeDefinition Size="Large">
      <ControlSizeDefinition ImageSize="Large" IsLabelVisible="true" />
    </GroupSizeDefinition>
    <GroupSizeDefinition Size="Medium">
      <ControlSizeDefinition ImageSize="Small" IsLabelVisible="false" />
    </GroupSizeDefinition>
    <GroupSizeDefinition Size="Small">
      <ControlSizeDefinition ImageSize="Small" IsLabelVisible="false" />
    </GroupSizeDefinition>
  </SizeDefinition>
</Ribbon.SizeDefinitions>

内联模板

以下代码示例演示了一组由四个按钮构成的基本内联自定义模板。

此代码部分显示一组按钮的命令声明。 此处还指定了大型和小型图像资源。

<!-- Button -->
<Command Name="cmdButtonGroup"
         Symbol="cmdButtonGroup"
         Comment="Button Group"
         LabelTitle="ButtonGroup"/>
<Command Name="cmdButton1"
         Symbol="cmdButton1"
         Comment="Button1"
         LabelTitle="Button1"/>
<Command Name="cmdButton2"
         Symbol="cmdButton2"
         Comment="Button2"
         LabelTitle="Button2"/>
<Command Name="cmdButton3"
         Symbol="cmdButton3"
         Comment="Button3"
         LabelTitle="Button3"/>
<Command Name="cmdButtonGroup2"
         Symbol="cmdButtonGroup2"
         Comment="Button Group2"
         LabelTitle="ButtonGroup2"/>
<Command Name="cmdButtonG21"
         Symbol="cmdButtonG21"
         Comment="ButtonG21"
         LabelTitle="ButtonG21">
  <Command.LargeImages>
    <Image Source="res/large.bmp"/>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image Source="res/small.bmp"/>
  </Command.SmallImages>
</Command>
<Command Name="cmdButtonG22"
         Symbol="cmdButtonG22"
         Comment="ButtonG22"
         LabelTitle="ButtonG22">
  <Command.LargeImages>
    <Image Source="res/large.bmp"/>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image Source="res/small.bmp"/>
  </Command.SmallImages>
</Command>
<Command Name="cmdButtonG23"
         Symbol="cmdButtonG23"
         Comment="ButtonG23"
         LabelTitle="ButtonG23">
  <Command.LargeImages>
    <Image Source="res/large.bmp"/>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image Source="res/small.bmp"/>
  </Command.SmallImages>
</Command>
<Command Name="cmdButtonG24"
         Symbol="cmdButtonG24"
         Comment="ButtonG24"
         LabelTitle="ButtonG24">
  <Command.LargeImages>
    <Image Source="res/large.bmp"/>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image Source="res/small.bmp"/>
  </Command.SmallImages>
</Command>

此部分代码演示如何定义大型、中型和小型 GroupSizeDefinition 模板，以以各种大小和布局显示四个按钮。 选项卡的 ScalingPolicy 声明根据活动选项卡所需的功能区大小和空间定义用于一组控件的模板。

        <Tab CommandName="cmdTab6">
          <Tab.ScalingPolicy>
            <ScalingPolicy>
              <ScalingPolicy.IdealSizes>
                <Scale Group="cmdButtonGroup"
                       Size="Large"/>
                <Scale Group="cmdButtonGroup2"
                       Size="Large"/>
                <Scale Group="cmdToggleButtonGroup"
                       Size="Large"/>
              </ScalingPolicy.IdealSizes>
              <Scale Group="cmdButtonGroup"
                     Size="Medium"/>
              <Scale Group="cmdButtonGroup2"
                     Size="Medium"/>
              <Scale Group="cmdButtonGroup2"
                     Size="Small"/>
              <Scale Group="cmdButtonGroup2"
                     Size="Popup"/>
            </ScalingPolicy>
          </Tab.ScalingPolicy>

          <Group CommandName="cmdButtonGroup2">
            <SizeDefinition>
              <ControlNameMap>
                <ControlNameDefinition Name="button1"/>
                <ControlNameDefinition Name="button2"/>
                <ControlNameDefinition Name="button3"/>
                <ControlNameDefinition Name="button4"/>
              </ControlNameMap>
              <GroupSizeDefinition Size="Large">
                <ControlGroup>
                  <ControlSizeDefinition ControlName="button1"
                                         ImageSize="Large"
                                         IsLabelVisible="true" />
                  <ControlSizeDefinition ControlName="button2"
                                         ImageSize="Large"
                                         IsLabelVisible="true" />
                </ControlGroup>
                <ColumnBreak ShowSeparator="true"/>
                <ControlGroup>
                  <ControlSizeDefinition ControlName="button3"
                                         ImageSize="Large"
                                        IsLabelVisible="true" />
                  <ControlSizeDefinition ControlName="button4"
                                        ImageSize="Large"
                                        IsLabelVisible="true" />
                </ControlGroup>
              </GroupSizeDefinition>
              <GroupSizeDefinition Size="Medium">
                <Row>
                  <ControlSizeDefinition ControlName="button1"
                                         ImageSize="Small"
                                         IsLabelVisible="true" />
                  <ControlSizeDefinition ControlName="button3"
                                         ImageSize="Small"
                                         IsLabelVisible="true" />
                </Row>
                <Row>
                  <ControlSizeDefinition ControlName="button2"
                                         ImageSize="Small"
                                         IsLabelVisible="true" />
                  <ControlSizeDefinition ControlName="button4"
                                         ImageSize="Small"
                                         IsLabelVisible="true" />
                </Row>
              </GroupSizeDefinition>
              <GroupSizeDefinition Size="Small">
                <Row>
                  <ControlSizeDefinition ControlName="button1"
                                         ImageSize="Small"
                                         IsLabelVisible="true" />
                  <ControlSizeDefinition ControlName="button3"
                                         ImageSize="Small"
                                         IsLabelVisible="false" />
                </Row>
                <Row>
                  <ControlSizeDefinition ControlName="button2"
                                         ImageSize="Small"
                                         IsLabelVisible="true" />
                  <ControlSizeDefinition ControlName="button4"
                                         ImageSize="Small"
                                         IsLabelVisible="false" />
                </Row>
              </GroupSizeDefinition>
            </SizeDefinition>
            <Button CommandName="cmdButtonG21"></Button>
            <Button CommandName="cmdButtonG22"></Button>
            <Button CommandName="cmdButtonG23"></Button>
            <Button CommandName="cmdButtonG24"></Button>
          </Group>
          <Group CommandName="cmdCheckBoxGroup">
            <CheckBox CommandName="cmdCheckBox"></CheckBox>
          </Group>
          <Group CommandName="cmdToggleButtonGroup"
                 SizeDefinition="OneButton">
            <ToggleButton CommandName="cmdToggleButton"></ToggleButton>
          </Group>
          <Group CommandName="cmdButtonGroup"
                 SizeDefinition="ThreeButtons">
            <Button CommandName="cmdButton1"></Button>
            <Button CommandName="cmdButton2"></Button>
            <Button CommandName="cmdButton3"></Button>
          </Group>
        </Tab>

下图显示了如何将上一示例中的模板应用于功能区 UI，以适应功能区大小减小的情况。

类型 映像
大 内联大型自定义模板的图片。
中等 内联中型自定义模板的图片。
小 内联小型自定义模板的图片。
弹出项 内联弹出自定义模板的图片。

SizeDefinition

缩放

组