サイズ定義とスケーリングポリシーを使用したリボンのカスタマイズ

[アーティクル]
07/22/2024

リボンコマンドバーでホストされるコントロールは、Windows リボンフレームワークによって適用されるレイアウトルールの対象であり、リボンマークアップで宣言されている既定の動作とレイアウトテンプレート (フレームワーク定義のものとカスタムの両方) の組み合わせに基づいています。これらのルールは、実行時にコマンドバーのコントロールがさまざまなリボンサイズに適応する方法に影響を与えるリボンフレームワークの適応レイアウト動作を定義します。

はじめに
- リボンの SizeDefinition テンプレート
- カスタムテンプレート
関連トピック

はじめに

アダプティブレイアウトは、リボンフレームワークによって定義されているように、実行時のリボンのサイズ変更に基づき、リボン UI 内のすべてのコントロールで構成、サイズ、形式、相対スケールを動的に調整できる機能です。

フレームワークは、さまざまなレイアウト動作を指定しカスタマイズするために用意された一連のマークアップ要素を使用して、アダプティブレイアウト機能を公開します。 SizeDefinitions と呼ばれるテンプレートのコレクションは、フレームワークによって定義され、各テンプレートではさまざまなコントロールとレイアウトのシナリオがサポートされます。ただし、このフレームワークは、アプリケーションに必要な UI エクスペリエンスやレイアウトが定義済みのテンプレートで提供されない場合、カスタムテンプレートもサポートします。

特定のリボンサイズで優先レイアウトのコントロールを表示するために、定義済みのテンプレートとカスタムテンプレートはどちらも、ScalingPolicy 要素と連携して機能します。この要素には、リボンのレンダリング時にフレームワークがガイドとして使用するサイズ設定のマニフェストが含まれています。

Note

リボンフレームワークは、定義済みの SizeDefinition テンプレートを必要とせず、コントロールの構成とプレゼンテーションに使用される一連の組み込みヒューリスティックに基づいて、既定のレイアウト動作を提供します。ただし、この機能はプロトタイプ作成のみを目的としています。

リボンの SizeDefinition テンプレート

リボンフレームワークには、リボンコントロールのグループに対してサイズとレイアウト動作を指定する SizeDefinition テンプレートの包括的なセットが用意されています。これらのテンプレートは、リボンアプリケーションでコントロールを構成するための最も一般的なシナリオに対応しています。

リボンアプリケーション間で一貫したユーザーエクスペリエンスを適用するため、各 SizeDefinition テンプレートは、サポートしているコントロールまたはコントロールファミリに制限を設けています。

たとえば、コントロールのボタンファミリには次のものが含まれます。

コントロールの入力ファミリには次のものが含まれます。

チェックボックスとリボン内ギャラリーは、ボタンファミリまたは入力ファミリに属していません。これら 2 つのコントロールは、SizeDefinition テンプレートで明示的に示されている場合にのみ使用できます。

各テンプレートで使用できるレイアウトとコントロールの説明と、SizeDefinition テンプレートの一覧を次に示します。

重要

マークアップで宣言されているコントロールが、関連付けられているテンプレートで定義されているコントロールの型、順序、数量に正確にマップされない場合は、検証エラーのログがマークアップコンパイラによって記録され、コンパイルが終了します。

OneButton

1 つのボタンファミリコントロール。
大きなグループサイズのみがサポートされます。

onebutton sizedefinition テンプレートの画像。

TwoButtons

2 つのボタンファミリコントロール。
大と中のグループサイズのみがサポートされます。

twobuttons large sizedefinition テンプレートの画像。

twobuttons medium sizedefinition テンプレートの画像。

ThreeButtons

3 つのボタンファミリコントロール。
大と中のグループサイズのみがサポートされます。

threebuttons large sizedefinition テンプレートの画像。

threebuttons medium sizedefinition テンプレートの画像。

ThreeButtons-OneBigAndTwoSmall

3 つのボタンファミリコントロール。
最初のボタンは、3 つのサイズのすべてで目立つように表示されます。

threebuttons-onebigandtwosmall large sizedefinition テンプレートの画像。

threebuttons-onebigandtwosmall medium sizedefinition テンプレートの画像。

threebuttons-onebigandtwosmall small sizedefinition テンプレートの画像。

ThreeButtonsAndOneCheckBox

1 つの CheckBox コントロールが付随する 3 つのボタンファミリコントロール。
大と中のグループサイズのみがサポートされます。

threebuttonsandonecheckbox large sizedefinition テンプレートの画像。

threebuttonsandonecheckbox medium sizedefinition テンプレートの画像。

FourButtons

4 つのボタンファミリコントロール。

fourbuttons large sizedefinition テンプレートの画像。

fourbuttons medium sizedefinition テンプレートの画像。

fourbuttons small sizedefinition テンプレートの画像。

FiveButtons

5 つのボタンファミリコントロール。

fivebuttons large sizedefinition テンプレートの画像。

fivebuttons medium sizedefinition テンプレートの画像。

fivebuttons small sizedefinition テンプレートの画像。

FiveOrSixButtons

5 つのボタンファミリコントロールとオプションの 6 番目のボタン。

fiveorsixbuttons large sizedefinition テンプレートの画像。

fiveorsixbuttons medium sizedefinition テンプレートの画像。

fiveorsixbuttons small sizedefinition テンプレートの画像。

SixButtons

6 つのボタンファミリコントロール。

sixbuttons large sizedefinition テンプレートの画像。

sixbuttons medium sizedefinition テンプレートの画像。

sixbuttons small sizedefinition テンプレートの画像。

SixButtons-TwoColumns

6 つのボタンファミリコントロール (代替プレゼンテーション)。

sixbuttons-twocolumns large sizedefinition テンプレートの画像。

sixbuttons-twocolumns medium sizedefinition テンプレート。

sixbuttons-twocolumns small sizedefinition テンプレートの画像。

SevenButtons

7 つのボタンファミリコントロール。

sevenbuttons large sizedefinition テンプレートの画像。

sevenbuttons mediumsizedefinition テンプレートの画像。

sevenbuttons small sizedefinition テンプレートの画像。

EightButtons

8 つのボタンファミリコントロール。

eightbuttons-lastthreesmall large sizedefinition テンプレートの画像。

eightbuttons-lastthreesmall medium sizedefinition テンプレートの画像。

eightbuttons-lastthreesmall small sizedefinition テンプレートの画像。

EightButtons-LastThreeSmall

8 つのボタンファミリコントロール (代替プレゼンテーション)。

Note

このテンプレートで宣言されているすべてのコントロール要素は、2 つの ControlGroup 要素 (最初の 5 つの要素に対して 1 つ、最後の 3 つの要素に対して 1 つ) に含まれている必要があります。

次の例は、このテンプレートに必要なマークアップを示しています。

<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>

eightbuttons large sizedefinition テンプレートの画像。

eightbuttons medium sizedefinition テンプレートの画像。

eightbuttons small sizedefinition テンプレートの画像。

NineButtons

9 つのボタンファミリコントロール。

ninebuttons large sizedefinition テンプレートの画像。

ninebuttons medium sizedefinition テンプレートの画像。

ninebuttons small sizedefinition テンプレートの画像。

TenButtons

10 のボタンファミリコントロール。

tenbuttons large sizedefinition テンプレートの画像。

tenbuttons medium sizedefinition テンプレートの画像。

tenbuttons small sizedefinition テンプレートの画像。

ElevenButtons

11 のボタンファミリコントロール。

elevenbuttons large sizedefinition テンプレートの画像。

elevenbuttons medium sizedefinition テンプレートの画像。

elevenbuttons small sizedefinition テンプレートの画像。

OneFontControl

1 つの FontControl。

大と中のグループサイズのみがサポートされます。

重要

カスタムテンプレート定義内に FontControl を含めすることは、フレームワークではサポートされていません。

onefontcontrol large sizedefinition テンプレートの画像。

onefontcontrol medium sizedefinition テンプレートの画像。

OneInRibbonGallery

1 つの InRibbonGallery コントロール。

大小のグループサイズのみがサポートされます。

oneinribbongallery large sizedefinition テンプレートの画像。

oneinribbongallery small sizedefinition テンプレートの画像。

InRibbonGalleryAndBigButton

1 つの InRibbonGallery コントロールとボタンファミリコントロール。

大小のグループサイズのみがサポートされます。

inribbongalleryandbigbutton large sizedefinition テンプレートの画像。

inribbongalleryandbigbutton small sizedefinition テンプレートの画像。

InRibbonGalleryAndButtons-GalleryScalesFirst

1 つのリボン内ギャラリーコントロールと、2 つまたは 3 つのボタンファミリコントロール。

ギャラリーは、中および小のグループサイズではポップアップ表示の大きさに折りたたまれます。

inribbongalleryandbuttons-galleryscalesfirst large sizedefinition テンプレートの画像。

inribbongalleryandbuttons-galleryscalesfirst medium sizedefinition テンプレートの画像。

inribbongalleryandbuttons-galleryscalesfirst small sizedefinition テンプレートの画像。

ButtonGroups

32 個のボタンファミリコントロールの複雑な配置 (そのほとんどは省略可能)。

Note

大きな 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>

buttongroups large sizedefinition テンプレートの画像。

buttongroups medium sizedefinition テンプレートの画像。

buttongroups small sizedefinition テンプレートの画像。

ButtonGroupsAndInputs

2 つの入力ファミリコントロール (2 つ目は省略可能) の後に、29 個のボタンファミリコントロールの複雑な配置が続きます (そのほとんどは省略可能)。

大と中のグループサイズのみがサポートされます。

Note

このテンプレートで宣言されているすべてのコントロール要素は、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 large sizedefinition テンプレートの画像。

buttongroupsandinputs medium sizedefinition テンプレートの画像。

BigButtonsAndSmallButtonsOrInputs

2 つのボタンファミリコントロール (両方とも省略可能) の後に、2 つか 3 つのボタンまたは入力ファミリコントロールが続きます。

大と中のグループサイズのみがサポートされます。

bigbuttonsandsmallbuttonsorinputs large sizedefinition テンプレートの画像。

bigbuttonsandsmallbuttonsorinputs medium sizedefinition テンプレートの画像。

基本的な SizeDefinition の例

次のコード例では、リボンマークアップで SizeDefinition テンプレートを宣言する方法の基本的なデモを示します。

この特定の例では、OneInRibbonGallery SizeDefinition が使用されていますが、すべてのフレームワークテンプレートは同様の方法で指定されます。

<!-- 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 要素には、リボンのサイズが変更されたときに 1 つ以上のグループ要素のアダプティブレイアウト設定を指定する ScalingPolicy.IdealSizes 宣言と Scale 宣言のマニフェストが含まれています。

Note

サイズ属性が Popup と等しいスケール要素に、グループ要素のすべてではないにしても、ほとんどが関連付けられるように、適切なスケーリングポリシーの詳細を指定することを強くお勧めします。そうすることで、フレームワークは、スクロールメカニズムを自動的に導入する前に、可能な範囲の最小サイズでリボンをレンダリングし、最も多岐にわたるディスプレイデバイスをサポートできます。

次のコード例は、ScalingPolicy マニフェストを示しています。このマニフェストでは、[ホーム] タブ上の 4 つのコントロールグループごとに ScalingPolicy.IdealSizes SizeDefinition 設定を指定します。さらに、各グループの折りたたみ動作に影響を与えるスケール要素が、降順で指定されます。

<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 要素を使用したスタンドアロンメソッド、またはグループ固有のインラインメソッドの 2 つがあります。

スタンドアロンテンプレート

次のコード例は、再利用可能な基本的なカスタムテンプレートを示しています。

<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>

インラインテンプレート

次のコード例は、4 つのボタンのグループに対する基本的なインラインカスタムテンプレートを示しています。

このコードのセクションは、ボタンのグループに対するコマンド宣言を示します。ここでは、大と小のイメージリソースも指定します。

<!-- 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 テンプレートを定義して、さまざまなサイズとレイアウトで 4 つのボタンを表示する方法を示します。タブに対する 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 に適用する方法を示しています。

Type	イメージ
Large
Medium
Small
Popup

SizeDefinition
スケール
グループ

次の方法で共有

サイズ定義とスケーリングポリシーを使用したリボンのカスタマイズ

はじめに

リボンの SizeDefinition テンプレート

基本的な SizeDefinition の例

スケーリングポリシーを使用した複雑な SizeDefinition の例

カスタムテンプレート

スタンドアロンテンプレート

インラインテンプレート

フィードバック

その他のリソース

次の方法で共有

サイズ定義とスケーリング ポリシーを使用したリボンのカスタマイズ

はじめに

リボンの SizeDefinition テンプレート

基本的な SizeDefinition の例

スケーリング ポリシーを使用した複雑な SizeDefinition の例

カスタム テンプレート

スタンドアロン テンプレート

インライン テンプレート

関連トピック

フィードバック

その他のリソース

サイズ定義とスケーリングポリシーを使用したリボンのカスタマイズ

スケーリングポリシーを使用した複雑な SizeDefinition の例

カスタムテンプレート

スタンドアロンテンプレート

インラインテンプレート