Anpassen eines Menübands durch Größendefinitionen und Skalierungsrichtlinien

Artikel
06/13/2023

Steuerelemente, die in der Menübandbefehlsleiste gehostet werden, unterliegen Layoutregeln, die vom Windows-Menübandframework erzwungen werden und auf einer Kombination aus Standardverhalten und Layoutvorlagen (sowohl frameworkdefiniert als auch benutzerdefinierte) basieren, wie im Menübandmarkup deklariert. Diese Regeln definieren das adaptive Layoutverhalten des Menübandframeworks, das beeinflusst, wie Steuerelemente in der Befehlsleiste zur Laufzeit an verschiedene Menübandgrößen angepasst werden.

Introduction (Einführung)
- MenübandgrößeDefinitionsvorlagen
- Benutzerdefinierte Vorlagen
Zugehörige Themen

Einführung

Adaptives Layout, wie im Menübandframework definiert, ist die Möglichkeit aller Steuerelemente innerhalb der Menübandbenutzeroberfläche, ihre organization, Größe, Format und relative Skalierung dynamisch anzupassen, basierend auf Änderungen an der Größe des Menübands zur Laufzeit.

Das Framework macht adaptive Layoutfunktionen über eine Reihe von Markupelementen verfügbar, die zum Angeben und Anpassen verschiedener Layoutverhaltens gewidmet sind. Eine Sammlung von Vorlagen namens SizeDefinitions wird vom Framework definiert, die jeweils verschiedene Steuerelement- und Layoutszenarien unterstützen. Das Framework unterstützt jedoch auch benutzerdefinierte Vorlagen, wenn die vordefinierten Vorlagen nicht die benutzeroberfläche oder layouts bereitstellen, die für eine Anwendung erforderlich sind.

Um Steuerelemente in einem bevorzugten Layout mit einer bestimmten Menübandgröße anzuzeigen, funktionieren sowohl vordefinierte Vorlagen als auch benutzerdefinierte Vorlagen in Verbindung mit dem ScalingPolicy-Element . Dieses Element enthält ein Manifest der Größeneinstellungen, das das Framework als Leitfaden beim Rendern des Menübands verwendet.

Hinweis

Das Menübandframework stellt Standardlayoutverhalten basierend auf einer Reihe von integrierten Heuristiken für die organization und Darstellung von Steuerelementen zur Laufzeit bereit, ohne dass die vordefinierten SizeDefinition-Vorlagen erforderlich sind. Diese Funktion ist jedoch nur für Prototypingzwecke vorgesehen.

MenübandgrößeDefinitionsvorlagen

Das Menübandframework bietet einen umfassenden Satz von SizeDefinition-Vorlagen , die Größe und Layoutverhalten für eine Gruppe von Menübandsteuerelementen angeben. Diese Vorlagen behandeln die häufigsten Szenarien zum Organisieren von Steuerelementen in einer Menübandanwendung.

Um eine konsistente Benutzeroberfläche für Menübandanwendungen zu erzwingen, erzwingt jede SizeDefinition-Vorlage Einschränkungen für die Steuerelemente oder die Familie von Steuerelementen, die sie unterstützt.

Beispielsweise umfasst die Schaltflächenfamilie von Steuerelementen Folgendes:

Während die Eingabefamilie von Steuerelementen Folgendes umfasst:

Kontrollkästchen und Menübandkatalog gehören weder zur Schaltflächenfamilie noch zur Eingabefamilie. Diese beiden Steuerelemente können nur verwendet werden, wenn dies in einer SizeDefinition-Vorlage explizit angegeben ist.

Im Folgenden ist eine Liste der SizeDefinition-Vorlagen mit einer Beschreibung des Layouts und der Steuerelemente aufgeführt, die für jede Vorlage zulässig sind.

Wichtig

Wenn die im Markup deklarierten Steuerelemente nicht genau dem Steuerelementtyp, der Reihenfolge und der Menge zugeordnet sind, die in der zugeordneten Vorlage definiert sind, wird ein Validierungsfehler vom Markupcompiler protokolliert, und die Kompilierung wird beendet.

OneButton

Steuerelement mit einer Schaltflächenfamilie.
Nur große Gruppengröße wird unterstützt.

Bild der OneButton SizeDefinitionsvorlage.

TwoButtons

Steuerelemente mit zwei Schaltflächenfamilien.
Es werden nur große und mittlere Gruppengrößen unterstützt.

Bild von twobuttons large sizeDefinitionsvorlage.

Bild von zweiButtons mittlerer GrößeDefinitionsvorlage.

ThreeButtons

Drei Steuerelemente der Schaltflächenfamilie.
Es werden nur große und mittlere Gruppengrößen unterstützt.

Abbildung der Großen Definitionsvorlage mit drei Schaltflächen.

Bild von threebuttons mittlerer GrößeDefinitionsvorlage.

ThreeButtons-OneBigAndTwoSmall

Drei Steuerelemente der Schaltflächenfamilie.
Die erste Schaltfläche wird in allen drei Größen prominent dargestellt.

Bild von threebuttons-onebigandtwosmall large sizedefinition template.

Bild von threebuttons-onebigandtwosmall mittlere Größendefinitionsvorlage.

Bild von threebuttons-onebigandtwosmall small sizedefinition template.

ThreeButtonsAndOneCheckBox

Drei Steuerelemente der Schaltflächenfamilie, die von einem einzelnen CheckBox-Steuerelement begleitet werden.
Es werden nur große und mittlere Gruppengrößen unterstützt.

Bild von threebuttonundonecheckbox large sizedefinition template.

Bild von threebuttonsandoneCheckbox mittlere GrößeDefinitionsvorlage.

FourButtons

Steuerelemente mit vier Schaltflächenfamilien.

Bild der Vierbuttons-Definitionsvorlage für große Größe.

Bild von vierbuttons mittlerer Größedefinitionsvorlage.

Bild der Viertastendefinitionsvorlage mit kleiner Größe.

FiveButtons

Fünf Steuerelemente der Schaltflächenfamilie.

Bild der Fünfbuttons-Definitionsvorlage für große Größe.

Bild von fivebuttons mittlerer GrößeDefinitionsvorlage.

Bild von fünfbuttons kleine Größendefinitionsvorlage.

FiveOrSixButtons

Fünf Steuerelemente der Schaltflächenfamilie und eine optionale sechste Schaltfläche.

Bild von fiveorsixbuttons large sizedefinition template.

Bild von fiveorsixbuttons mittlerer Größedefinitionsvorlage.

Bild von fiveorsixbuttons small sizedefinition template.

SixButtons

Sechs Steuerelemente der Schaltflächenfamilie.

Bild von sixbuttons large sizeDefinitionsvorlage.

Bild von sixbuttons mittlerer Größedefinitionsvorlage.

Bild von sixbuttons small sizeDefinitionsvorlage.

SixButtons-TwoColumns

Sechs Steuerelemente der Schaltflächenfamilie (alternative Präsentation).

Abbildung der Definitionsvorlage

sixbuttons-twocolumns mittlere Größendefinitionsvorlage.

Abbildung der Vorlage sixbuttons-twocolumns small sizedefinition.

SevenButtons

Sieben Steuerelemente der Schaltflächenfamilie.

Bild der siebenbuttons-Definitionsvorlage für große Größe.

Bild von sevenbuttons mediumsizeDefinitionsvorlage.

Bild der Siebentastendefinitionsvorlage mit kleiner Größe.

EightButtons

Acht Steuerelemente der Schaltflächenfamilie.

Bild von achtbuttons-lastthreesAll große Definition-Vorlage.

Bild von achtbuttons-lastthreesAll mittlere Größendefinitionsvorlage.

Bild von achtbuttons-lastthreesAll kleine Größendefinitionsvorlage.

EightButtons-LastThreeSmall

Acht Steuerelemente der Schaltflächenfamilie (alternative Präsentation).

Hinweis

Alle mit dieser Vorlage deklarierten Steuerelementelemente müssen in zwei ControlGroup-Elementen enthalten sein: eines für die ersten fünf Elemente und eines für die letzten drei Elemente.

Im folgenden Beispiel wird das markup veranschaulicht, das für diese Vorlage erforderlich ist.

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

Abbildung der Großen Definitionsvorlage von achtButtons.

Bild von achtButtons mittlerer GrößeDefinitionsvorlage.

Bild von achtButtons kleine GrößeDefinitionsvorlage.

NineButtons

Neun Steuerelemente der Schaltflächenfamilie.

Bild der Großen Definitionsvorlage von neunButtons.

Bild von ninebuttons mittlerer GrößeDefinitionsvorlage.

Bild von neunButtons kleine GrößeDefinitionsvorlage.

TenButtons

Steuerelemente mit zehn Schaltflächenfamilien.

Bild der zehnbuttons-Definitionsvorlage für große Größe.

Bild von tenbuttons mittlerer GrößeDefinitionsvorlage.

Bild der zehnbuttons-Definitionsvorlage mit kleiner Größe.

ElevenButtons

Elf Steuerelemente der Schaltflächenfamilie.

Bild von elfbuttons großdefinitionsvorlage.

Bild von elfButtons mittlerer GrößeDefinitionsvorlage.

Bild von elfButtons kleine GrößeDefinitionsvorlage.

OneFontControl

Ein FontControl.

Es werden nur große und mittlere Gruppengrößen unterstützt.

Wichtig

Das Einschließen eines FontControl-Steuerelements in eine benutzerdefinierte Vorlagendefinition wird vom Framework nicht unterstützt.

Bild der definition-Vorlage onefontcontrol large size.

Bild der Definition-Vorlage onefontcontrol mittlerer Größe.

OneInRibbonGallery

Ein InRibbonGallery-Steuerelement .

Es werden nur große und kleine Gruppengrößen unterstützt.

Bild der Vorlage

InRibbonGalleryAndBigButton

Ein InRibbonGallery-Steuerelement und ein Steuerelement der Schaltflächenfamilie.

Es werden nur große und kleine Gruppengrößen unterstützt.

Bild der großformatigen Definition-Vorlage

Bild der kleinen Definitionsvorlage inribbongalleryandbigbutton.

InRibbonGalleryAndButtons-GalleryScalesFirst

Ein In-Menüband-Katalog-Steuerelement und zwei oder drei Steuerelemente der Schaltflächenfamilie.

Der Katalog wird auf Popupdarstellung in mittlere und kleine Gruppengrößen reduziert.

Bild der Vorlage

ButtonGroups

Eine komplexe Anordnung von 32 Steuerelementen der Schaltflächenfamilie (von denen die meisten optional sind).

Hinweis

Abgesehen von der optionalen Schaltfläche in voller Größe der großen ButtonGroups-Vorlage müssen alle mit dieser Vorlage deklarierten Steuerelementelemente in ControlGroup-Elementen enthalten sein.

Im folgenden Beispiel wird das Markup veranschaulicht, das erforderlich ist, um alle 32 Steuerelementelemente (erforderlich und optional) mit dieser Vorlage anzuzeigen.

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

Abbildung der Großdefinitionsvorlage

Abbildung der Definitionsvorlage

Abbildung der Kleinen Definitionsvorlage buttongroups.

ButtonGroupsAndInputs

Zwei Eingabefamiliensteuerelemente (das zweite ist optional) gefolgt von einer komplexen Anordnung von 29 Steuerelementen der Schaltflächenfamilie (die meisten sind optional).

Es werden nur große und mittlere Gruppengrößen unterstützt.

Hinweis

Alle mit dieser Vorlage deklarierten Steuerelementelemente müssen in ControlGroup-Elementen enthalten sein.

Im folgenden Beispiel wird das Markup veranschaulicht, das erforderlich ist, um alle Steuerelementelemente (erforderlich und optional) mit dieser Vorlage anzuzeigen.

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

Bild von buttongroupundinputs large sizedefinition template.

Bild von buttongroupundinputs mittlerer Größedefinitionsvorlage.

BigButtonsAndSmallButtonsOrInputs

Zwei Steuerelemente der Schaltflächenfamilie (beide optional) gefolgt von zwei oder drei Schaltflächen- oder Eingabefamiliensteuerelementen.

Es werden nur große und mittlere Gruppengrößen unterstützt.

Bild von bigbuttonundsmallbuttonsorinputs large sizedefinition template.

Bild von bigbuttonundsmallbuttonsorinputs mittlere Größedefinitionsvorlage.

Basic SizeDefinition-Beispiel

Das folgende Codebeispiel bietet eine grundlegende Demonstration zum Deklarieren einer SizeDefinition-Vorlage im Menübandmarkup.

Die OneInRibbonGallerySizeDefinition wird für dieses bestimmte Beispiel verwendet, aber alle Frameworkvorlagen werden auf ähnliche Weise angegeben.

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

Komplexes SizeDefinition-Beispiel mit Skalierungsrichtlinien

Das Kollapsverhalten von SizeDefinition-Vorlagen kann durch die Verwendung von Skalierungsrichtlinien im Menübandmarkup gesteuert werden.

Das ScalingPolicy-Element enthält ein Manifest von ScalingPolicy.IdealSizes - und Scale-Deklarationen , die adaptive Layouteinstellungen für ein oder mehrere Group-Elemente angeben, wenn die Größe des Menübands geändert wird.

Hinweis

Es wird dringend empfohlen, angemessene Skalierungsrichtliniendetails anzugeben, sodass die meisten, wenn nicht alle Group-Elemente einem Scale-Element zugeordnet sind, bei dem das Size-Attribut gleich Popupist. Auf diese Weise kann das Framework das Menüband so klein wie möglich rendern und die breiteste Palette von Anzeigegeräten unterstützen, bevor es automatisch einen Bildlaufmechanismus einführt.

Im folgenden Codebeispiel wird ein ScalingPolicy-Manifest veranschaulicht, das eine ScalingPolicy.IdealSizesSizeDefinition-Einstellung für jede von vier Gruppen von Steuerelementen auf einer Registerkarte Start angibt. Darüber hinaus werden Skalierungselemente angegeben, um das Kollapsverhalten jeder Gruppe in absteigender Größenreihenfolge zu beeinflussen.

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

Benutzerdefinierte Vorlagen

Wenn das Standardlayoutverhalten und die vordefinierten SizeDefinition-Vorlagen nicht die Flexibilität oder Unterstützung für ein bestimmtes Layoutszenario bieten, werden benutzerdefinierte Vorlagen vom Menübandframework über das Ribbon.SizeDefinitions-Element unterstützt.

Benutzerdefinierte Vorlagen können auf zwei Arten deklariert werden: eine eigenständige Methode, die das Ribbon.SizeDefinitions-Element zum Deklarieren wiederverwendbarer, benannter Vorlagen verwendet, oder eine Inlinemethode, die gruppenspezifisch ist.

Eigenständige Vorlage

Das folgende Codebeispiel veranschaulicht eine einfache, wiederverwendbare benutzerdefinierte Vorlage.

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

Inlinevorlage

Die folgenden Codebeispiele veranschaulichen eine einfache benutzerdefinierte Inlinevorlage für eine Gruppe von vier Schaltflächen.

In diesem Codeabschnitt werden die Befehlsdeklarationen für eine Gruppe von Schaltflächen angezeigt. Hier werden auch große und kleine Bildressourcen angegeben.

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

In diesem Codeabschnitt wird veranschaulicht, wie große, mittlere und kleine GroupSizeDefinition-Vorlagen definiert werden, um die vier Schaltflächen in verschiedenen Größen und Layouts anzuzeigen. Die ScalingPolicy-Deklaration für die Registerkarte definiert, welche Vorlage für eine Gruppe von Steuerelementen verwendet wird, basierend auf der Menübandgröße und dem für die aktive Registerkarte erforderlichen Platz.

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

Die folgenden Bilder zeigen, wie die Vorlagen aus dem vorherigen Beispiel auf die Menüband-Benutzeroberfläche angewendet werden, um eine Verringerung der Menübandgröße zu berücksichtigen.