Dostosowywanie wstążki za pomocą definicji rozmiarów i zasad skalowania

Artykuł
03/14/2025

Kontrolki hostowane na pasku poleceń wstążki podlegają regułom układu wymuszanym przez strukturę wstążki systemu Windows i na podstawie kombinacji domyślnych zachowań i szablonów układu (zdefiniowanych przez platformę i niestandardowych) zgodnie z deklaracją w znacznikach wstążki. Te zasady definiują adaptacyjne zachowania układu strukturalnego wstążki, które wpływają na sposób, w jaki kontrolki w obszarze poleceń dostosowują się do różnych rozmiarów wstążki w czasie wykonywania.

Wprowadzenie
- Rozmiar wstążkiDomyślne szablony
- szablony niestandardowe
Tematy pokrewne

Wprowadzenie

Układ adaptacyjny, zgodnie z frameworkiem wstążki, to zdolność wszystkich elementów sterujących w obrębie interfejsu wstążki do dynamicznego dostosowywania ich organizacji, rozmiaru, formatu i względnej skali na podstawie zmian rozmiaru wstążki podczas działania programu.

Struktura uwidacznia funkcje układu adaptacyjnego za pomocą zestawu elementów znaczników przeznaczonych do określania i dostosowywania różnych zachowań układu. Kolekcja szablonów o nazwie SizeDefinitionsjest definiowana przez strukturę, z których każda obsługuje różne scenariusze sterowania i układu. Jednak platforma obsługuje również szablony niestandardowe, jeśli wstępnie zdefiniowane szablony nie zapewniają środowiska interfejsu użytkownika ani układów wymaganych przez aplikację.

Aby wyświetlić kontrolki w preferowanym układzie w określonym rozmiarze wstążki, zarówno wstępnie zdefiniowane szablony, jak i szablony niestandardowe działają w połączeniu z elementem ScalingPolicy. Ten element zawiera manifest preferencji rozmiaru używanych przez platformę jako przewodnik podczas renderowania wstążki.

Notatka

Struktura Wstążki zapewnia domyślne zachowania układu oparte na zestawie wbudowanych heurystyk dla organizacji i prezentacji kontrolek w czasie wykonywania bez konieczności używania wstępnie zdefiniowanych szablonów SizeDefinition. Jednak ta funkcja jest przeznaczona tylko do celów tworzenia prototypów.

Rozmiar wstążkiDomyślne szablony

Struktura wstążki zawiera kompleksowy zestaw szablonów SizeDefinition określających zachowanie rozmiaru i układu dla grupy kontrolek wstążki. Te szablony obejmują najbardziej typowe scenariusze organizowania kontrolek w aplikacji typu Ribbon.

Aby wymusić spójne środowisko użytkownika w aplikacjach wstążki, każdy z szablonów SizeDefinition nakłada ograniczenia dotyczące kontrolek lub rodziny kontrolek, które obsługuje.

Na przykład rodzina przycisków kontrolek obejmuje:

Chociaż rodzina danych wejściowych kontrolek obejmuje:

Pole Kombi
obrotowe urządzenie

Pole wyboru i In-Ribbon Galeria nie należą do kategorii rodziny przycisków ani rodziny danych wejściowych. Te dwie kontrolki mogą być używane tylko w przypadku jawnego wskazania w szablonie SizeDefinition.

Poniżej znajduje się lista szablonów SizeDefinition z opisem układu i kontrolek dozwolonych przez każdy szablon.

Ważny

Jeśli kontrolki zadeklarowane w znaczniku nie są mapowane dokładnie na typ, kolejność i ilość zdefiniowane w skojarzonym szablonie, błąd weryfikacji jest rejestrowany przez kompilator znaczników i kompilacja zostanie zakończona.

OneButton

Jedna kontrolka rodziny przycisków.
Obsługiwany jest tylko duży rozmiar grupy.

obraz szablonu onebutton definicji rozmiaru.

Dwa przyciski

Dwa elementy sterujące typu przyciskowego.
Tylko duże i średnie grupy są obsługiwane.

obraz szablonu dwóch przycisków w dużym rozmiarze.

obraz szablonu o średniej definicji z dwoma przyciskami.

Trzy przyciski

Trzy kontrolki typu przycisk.
Obsługiwane są tylko rozmiary dużych i średnich grup.

obraz szablonu o trzech przyciskach i dużej definicji rozmiaru.

obraz trzech przycisków szablonu średniej wielkości.

ThreeButtons-OneBigAndTwoSmall

Trzy kontrolki z rodziny przycisków.
Pierwszy przycisk jest widoczny we wszystkich trzech rozmiarach.

obraz trzyprzyciski-jedendużyi2małe duży rozmiar definicja szablonu.

obraz przedstawiający szablon z trzema przyciskami - jednym dużym i dwoma małymi o średniej rozdzielczości.

obraz przedstawiający szablon z trzech przycisków - jednego dużego i dwóch małych, mała definicja rozmiaru.

TrzyPrzyciskiIJednoPoleChoice

Trzy kontrolki rodziny przycisków połączone z pojedynczą kontrolką CheckBox.
Obsługiwane są tylko duże i średnie rozmiary grup.

obraz przedstawiający szablon trzech przycisków i jednego pola wyboru w dużym rozmiarze.

obraz przedstawiający szablon trzech przycisków i jednego pola wyboru o średniej wielkości.

FourButtons

Cztery kontrolki rodziny przycisków.

obraz przedstawiający szablon dużych rozmiarów z czterema przyciskami.

obraz szablonu czterech przycisków o średniej wielkości.

obraz przedstawiający szablon czterech przycisków w małym rozmiarze.

FiveButtons

Pięć kontrolek z rodziny przycisków.

obraz pięcioprzyciskowego szablonu dużego rozmiaru.

obraz szablonu o średnim rozmiarze pięcioprzyciskowego.

obraz przedstawiający szablon fivebuttons o małym rozmiarze.

FiveOrSixButtons

Pięć kontrolek rodziny przycisków i opcjonalny szósty przycisk.

obraz szablonu z pięcioma lub sześcioma przyciskami o dużym rozmiarze.

obraz szablonu średniej wielkości z pięcioma lub sześcioma przyciskami.

obraz szablonu fiveorsixbuttons o małym rozmiarze.

SixButtons

Sześć kontrolek typu przyciskowego.

szablon obrazu sześcioprzyciskowy, definicja dużego rozmiaru.

obraz szablonu średniej wielkości z sześcioma przyciskami.

obraz przedstawiający sześć przycisków oraz definicję małego rozmiaru.

SixButtons-TwoColumns

Sześć kontrolek rodziny przycisków (prezentacja alternatywna).

obraz szablonu sixbuttons-twocolumns w dużym rozmiarze.

szablon średniej wielkości z sześcioma przyciskami i dwoma kolumnami.

obraz szablonu sixbuttons-twocolumns o małym rozmiarze.

SevenButtons

Siedem kontrolek typu przycisk.

obraz przedstawiający szablon siedmiu przycisków o dużym rozmiarze.

obraz szablonu sevenbuttons średniej wielkości definicja.

obraz przedstawiający szablon sevenbuttons o małym rozmiarze.

Osiem Przycisków

Osiem kontrolek z rodziny przycisków.

obraz dużego rozmiaru ośmiu przycisków - ostatnich trzech małych szablonu.

obraz ośmiu przycisków-ostatnie trzy małe o średnim rozmiarze, szablon definicji.

obraz ośmiubuttons-lastthreesmall small sizedefinition szablonu.

EightButtons-LastThreeSmall

Osiem kontrolek rodziny przycisków (prezentacja alternatywna).

Nota

Wszystkie elementy kontrolek zadeklarowane za pomocą tego szablonu muszą znajdować się w dwóch elementach ControlGroup: jeden dla pierwszych pięciu elementów i jeden dla ostatnich trzech elementów.

W poniższym przykładzie pokazano znaczniki wymagane dla tego szablonu.

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

obraz przedstawiający szablon ośmioguzikowy dużego rozmiaru.

obraz szablonu

obraz przedstawiający szablon ośmiu przycisków o małym rozmiarze.

NineButtons

Dziewięć elementów sterujących rodziny przycisków.

obraz przedstawiający szablon definicji dużego rozmiaru ninebuttons.

obraz szablonu ninebuttons o średniej rozdzielczości.

obraz szablonu ninebuttons o małym rozmiarze.

TenButtons

Dziesięć kontrolek typu przycisku.

obraz przedstawiający szablon tenbuttons definicja dużego rozmiaru.

obraz szablonu średniego rozmiaru dziesięciu przycisków.

obraz przedstawiający szablon tenbuttons o małym rozmiarze.

ElevenButtons

Jedenaście kontrolek z rodziny przycisków.

obraz szablonu jedenaście przycisków o dużej definicji rozmiaru.

obraz szablonu średniej definicji jedenastu przycisków.

obraz szablonu elevenbuttons o małym rozmiarze.

OneFontControl

Jeden FontControl.

Obsługiwane są tylko duże i średnie rozmiary grup.

Ważny

Dołączenie FontControl w definicji szablonu niestandardowego nie jest obsługiwane przez framework.

obraz szablonu onefontcontrol o dużym rozmiarze.

obraz szablonu onefontcontrol średniej wielkości.

OneInRibbonGallery

Jedna kontrolka InRibbonGallery.

Obsługiwane są tylko duże i małe rozmiary grup.

obraz szablonu w oneinribbongallery o dużej rozdzielczości.

obraz szablonu

Galeria wstążki i duży przycisk

Jedna kontrola InRibbonGallery i kontrola typu button-family.

Obsługiwane są tylko duże i małe rozmiary grup.

zdjęcie szablonu inribbongalleryandbigbutton dużej definicji rozmiaru.

zdjęcie szablonu inribbongalleryandbigbutton o małym rozmiarze.

InRibbonGalleryAndButtons-GalleryScalesFirst

Jedna kontrolka In-Ribbon Gallery i dwie lub trzy kontrolki rodziny przycisków.

Galeria zwija się do okna podręcznego przy rozmiarach grup średnich i małych.

zdjęcie szablonu wielkiego formatu inribbongalleryandbuttons-galleryscalesfirst.

zdjęcie szablonu inribbongalleryandbuttons-galleryscalesfirst średniej wielkości szablonu.

zdjęcie szablonu inribbongalleryandbuttons-galleryscalesfirst z małą definicją rozmiaru.

Grupy przycisków

Złożony układ 32 kontrolek rodziny przycisków (z których większość jest opcjonalna).

Notatka

Oprócz opcjonalnego przycisku o pełnym rozmiarze w dużym szablonie ButtonGroups, wszystkie elementy sterujące zadeklarowane za pomocą tego szablonu muszą znajdować się w elementach ControlGroup .

W poniższym przykładzie pokazano znaczniki wymagane do wyświetlenia wszystkich 32 elementów kontrolek (wymaganych i opcjonalnych) przy użyciu tego szablonu.

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

obraz szablonu buttongroups definicja dużego rozmiaru.

obraz szablonu grup przycisków o średniej definicji rozmiaru.

obraz przedstawiający szablon buttongroups o małym rozmiarze.

Grupy przycisków i wejść

Dwie kontrolki typów danych wejściowych (druga jest opcjonalna), a następnie złożony układ 29 kontrolek typów przycisków (z których większość jest opcjonalna).

Obsługiwane są wyłącznie rozmiary grup duże i średnie.

Notatka

Wszystkie elementy kontrolek zadeklarowane za pomocą tego szablonu muszą znajdować się w elementach ControlGroup.

W poniższym przykładzie pokazano znaczniki wymagane do wyświetlenia wszystkich elementów kontrolek (wymaganych i opcjonalnych) przy użyciu tego szablonu.

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

obraz przedstawiający szablon buttongroupsandinputs z definicją dużego rozmiaru.

obraz szablonu buttongroupsandinputs średniej wielkości.

DużePrzyciskiIMałePrzyciskiLubPola

Dwie kontrolki przycisków (obie opcjonalne), a następnie dwa lub trzy przyciski lub kontrolki rodziny wejściowej.

Obsługiwane są tylko duże i średnie rozmiary grup.

obraz bigbuttonsandsmallbuttonsorinputs szablon definicji dużego rozmiaru.

obraz szablonu dużych i małych przycisków lub wejść o średniej definicji.

Podstawowy przykład definicji rozmiaru

Poniższy przykład kodu zawiera podstawowe pokazanie, jak zadeklarować szablon SizeDefinition w znacznikach Ribbon.

OneInRibbonGallerySizeDefinition jest używany w tym konkretnym przykładzie, ale wszystkie szablony strukturalne są określane w podobny sposób.

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

Przykład złożonych definicji rozmiaru z zasadami skalowania

Zachowanie zwijania szablonów SizeDefinition można kontrolować za pomocą zasad skalowania w znacznikach wstążki.

Element ScalingPolicy zawiera manifest ScalingPolicy.IdealSizes i deklaracje Skali określające preferencje układu adaptacyjnego dla co najmniej jednego elementu Grupy przy zmianie rozmiaru wstążki.

Notatka

Zdecydowanie zaleca się określenie odpowiednich szczegółów zasad skalowania, tak żeby większość, jeśli nie wszystkie, elementy grupy były skojarzone z elementem skali, gdzie atrybut wielkości jest równy Popup. Dzięki temu platforma może renderować wstążkę o najmniejszym możliwym rozmiarze i obsługiwać najszerszy zakres urządzeń wyświetlanych przed automatycznym wprowadzeniem mechanizmu przewijania.

Poniższy przykład kodu przedstawia manifest ScalingPolicy, który określa ScalingPolicy.IdealSizesSizeDefinition preferencji dla każdej z czterech grup kontrolek na karcie Home. Ponadto elementy skalowania są określane tak, aby wpływały na zachowanie zwijania w kolejności malejącej rozmiaru każdej grupy.

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

Szablony niestandardowe

Jeśli domyślne zachowania układu i wstępnie zdefiniowane SizeDefinition szablony nie oferują elastyczności ani obsługi określonego scenariusza układu, szablony niestandardowe są obsługiwane przez strukturę wstążki za pośrednictwem elementu Ribbon.SizeDefinitions.

Szablony niestandardowe można zadeklarować na dwa sposoby: metodę autonomiczną przy użyciu elementu Ribbon.SizeDefinitions do deklarowania wielokrotnego użytku, nazwanych szablonów lub metody wbudowanej, która jest grupowania-specific.

Szablon autonomiczny

Poniższy przykład kodu ilustruje podstawowy szablon niestandardowy wielokrotnego użytku.

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

Szablon w linii

Poniższe przykłady kodu ilustrują podstawowy wbudowany szablon niestandardowy dla grupy czterech przycisków.

W tej sekcji kodu przedstawiono deklaracje poleceń dla grupy przycisków. W tym miejscu określono również duże i małe zasoby obrazów.

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

W tej sekcji kodu przedstawiono sposób definiowania szablonów GroupSizeDefinition o różnych rozmiarach (dużych, średnich i małych) do wyświetlania czterech przycisków w różnych rozmiarach i układach. Deklaracja ScalingPolicy dla karty definiuje szablon używany dla grupy kontrolek na podstawie rozmiaru wstążki i miejsca wymaganego przez aktywną kartę.

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

Na poniższych obrazach pokazano, jak szablony z poprzedniego przykładu są stosowane do interfejsu wstążki, aby dostosować się do zmniejszenia jej rozmiaru.