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

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

• はじめに
  • リボン サイズ定義テンプレート
  • カスタム テンプレート
• 関連トピック

はじめに

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

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

特定のリボン サイズで優先レイアウトのコントロールを表示するには、定義済みのテンプレートとカスタム テンプレートの両方が ScalingPolicy 要素と組み合わせて動作します。 この要素には、リボンのレンダリング時にフレームワークがガイドとして使用するサイズ設定のマニフェストが含まれています。

注意

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

リボン サイズ定義テンプレート

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

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

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

• Button
• トグル ボタン
• ドロップダウン ボタン
• 分割ボタン
• ドロップダウン ギャラリー
• 分割ボタン ギャラリー
• ドロップダウン カラー ピッカー

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

• コンボ ボックス
• Spinner

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

各テンプレートで許可されているレイアウトとコントロールの説明を含む SizeDefinition テンプレートの一覧を次に示します。

重要

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

OneButton

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

TwoButtons

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

ThreeButtons

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

ThreeButtons-OneBigAndTwoSmall

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

ThreeButtonsAndOneCheckBox

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

FourButtons

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

FiveButtons

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

FiveOrSixButtons

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

SixButtons

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

SixButtons-TwoColumns

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

SevenButtons

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

EightButtons

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

EightButtons-LastThreeSmall

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

注意

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

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

<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

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

TenButtons

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

ElevenButtons

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

OneFontControl

1 つの FontControl。

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

重要

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

OneInRibbonGallery

1 つの InRibbonGallery コントロール。

サポートされているのは、大きいグループ サイズと小さいグループ サイズのみです。

InRibbonGalleryAndBigButton

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

サポートされているのは、大きいグループ サイズと小さいグループ サイズのみです。

InRibbonGalleryAndButtons-GalleryScalesFirst

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

ギャラリーは、[中] と [小] のグループ サイズでポップアップ表示に折りたたまれます。

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

2 つの入力ファミリ コントロール (2 つ目は省略可能) の後に、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>

BigButtonsAndSmallButtonsOrInputs

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

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

基本的な 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 要素には、ScalingPolicy.IdealSizes および Scale 宣言のマニフェストが含まれており、リボンのサイズを変更するときに、1 つ以上の Group 要素のアダプティブ レイアウト設定を指定します。

注意

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

次のコード例は、[ホーム] タブの 4 つのコントロール グループごとに ScalingPolicy.IdealSizesSizeDefinition 基本設定を指定する ScalingPolicy マニフェストを示しています。さらに、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 要素を使用するスタンドアロン メソッド、または グループ固有のインライン メソッドの 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 に適用して、リボン サイズの縮小に対応する方法を示しています。

型	Image
Large
Medium
Small
ポップアップ

関連トピック

SizeDefinition

スケール

グループ