Een lint aanpassen via groottedefinities en schaalbeleid

2025-03-17

Besturingselementen die worden gehost op de opdrachtbalk op het lint, zijn onderhevig aan indelingsregels die worden afgedwongen door het Windows-lintframework en op basis van een combinatie van standaardgedrag en indelingssjablonen (zowel frameworkgedefinieerde als aangepaste) zoals gedeclareerd in de lintopmaak. Deze regels definiëren het gedrag van adaptieve indelingen van het lintframework dat invloed heeft op hoe besturingselementen in de opdrachtbalk zich aanpassen aan verschillende lintgrootten tijdens runtime.

Inleiding
- Sjablonen voor Lintgrootte-definitie
- aangepaste sjablonen
Verwante onderwerpen

Introductie

Adaptieve indeling, zoals gedefinieerd door het Ribbon-framework, is de mogelijkheid van alle besturingselementen binnen de ribbon UI om hun organisatie, grootte, opmaak en relatieve schaal dynamisch aan te passen op basis van veranderingen in de grootte van de ribbon tijdens de uitvoeringstijd.

Het framework maakt adaptieve indelingsfunctionaliteit beschikbaar via een set markeringselementen die speciaal zijn bedoeld voor het opgeven en aanpassen van verschillende indelingsgedrag. Een verzameling sjablonen, SizeDefinitionsgenoemd, wordt gedefinieerd door het framework, die elk ondersteuning bieden voor verschillende besturings- en indelingsscenario's. Het framework ondersteunt echter ook aangepaste sjablonen als de vooraf gedefinieerde sjablonen niet de gebruikersinterface-ervaring of indelingen bieden die vereist zijn voor een toepassing.

Om besturingselementen in een voorkeursindeling te tonen bij een bepaalde lintgrootte, werken zowel vooraf gedefinieerde als aangepaste sjablonen samen met het element ScalingPolicy. Dit element bevat een manifest van groottevoorkeuren die door het framework als hulplijn worden gebruikt bij het weergeven van het lint.

Notitie

Het lintframework biedt standaardgedrag voor indelingen op basis van een set ingebouwde heuristieken voor de organisatie en presentatie van besturingselementen tijdens runtime zonder dat de vooraf gedefinieerde SizeDefinition--sjablonen nodig zijn. Deze mogelijkheid is echter alleen bedoeld voor prototypedoeleinden.

Sjablonen voor GrootteDefinitie van Lint

Het Ribbon-framework biedt een uitgebreide set SizeDefinition--sjablonen waarmee de grootte en het indelingsgedrag voor een groep van lintbesturingselementen worden opgegeven. Deze sjablonen hebben betrekking op de meest voorkomende scenario's voor het ordenen van besturingselementen in een linttoepassing.

Om een consistente gebruikerservaring in Ribbon-toepassingen te waarborgen, legt elke SizeDefinition-sjabloon beperkingen op voor de besturingselementen of de familie van besturingselementen die het ondersteunt.

De knopfamilie van besturingselementen bevat bijvoorbeeld:

De invoerfamilie van besturingselementen bevat:

selectievakje en In-Ribbon galerie behoren niet tot de knopfamilie of de invoerfamilie. Deze twee bedieningselementen kunnen alleen worden gebruikt waar in een SizeDefinition-sjabloon expliciet wordt aangegeven.

Hier volgt een lijst met de SizeDefinition sjablonen met een beschrijving van de indeling en besturingselementen die voor elke sjabloon zijn toegestaan.

Belangrijk

Als de besturingselementen die zijn gedeclareerd in de markering niet exact overeenkomen met het type, de volgorde en de hoeveelheid die is gedefinieerd in de bijbehorende sjabloon, wordt een validatiefout vastgelegd door de markup-compiler, waardoor de compilatie wordt beëindigd.

OneButton

Eén bediening voor een familie van knoppen.
Alleen grote groepsgrootte wordt ondersteund.

afbeelding van sjabloon voor onebutton maatdefinitie.

Twee Knoppen

Twee knopfamilie besturingselementen.
Alleen grote en middelgrote groepen worden ondersteund.

afbeelding van een sjabloon voor grote grootte van tweebuttons.

afbeelding van tweebuttons middelgrote definitie-sjabloon.

ThreeButtons

Drie besturingselementen voor knopfamilies.
Alleen grote en middelgrote groepen worden ondersteund.

afbeelding van drie knoppen grote formaatdefinitie sjabloon.

afbeelding van drie buttons middelgroot definitie sjabloon.

ThreeButtons-OneBigAndTwoSmall

Drie bedieningsknoppen van dezelfde knopfamilie.
De eerste knop wordt prominent weergegeven in alle drie de maten.

afbeelding van het sjabloon met drie knoppen - één groot en twee klein - grote maatdefinitie.

afbeelding van het sjabloon met drie knoppen: één groot en twee kleine, middelgrote definitie.

afbeelding van de threebuttons-onebigandtwosmall small sizedefinition sjabloon.

DrieKnoppenEnEénSelectievakje

Drie knoppenfamilie besturingselementen vergezeld door één selectievakje besturingselement.
Alleen grote en middelgrote groepen worden ondersteund.

afbeelding van de sjabloon threebuttonsandonecheckbox groot formaat.

afbeelding van het sjabloon met drie knoppen en één selectievakje middelgroot.

FourButtons

Vier besturingselementen voor knopfamilies.

afbeelding van vier knoppen grote formaat sjabloon.

afbeelding van vier knoppen middelformaatdefinitie sjabloon.

afbeelding van een sjabloon voor vier knoppen met kleine formatdefinitie.

FiveButtons

Vijf besturingselementen voor knopfamilies.

afbeelding van een sjabloon voor een grote grootte van vijfbuttons.

afbeelding van vijf buttons middelgrote definitie-sjabloon.

afbeelding van vijfknoppen, sjabloon voor maatdefinitie.

FiveOrSixButtons

Vijf knoppen uit een knoppenfamilie en een optionele zesde knop.

afbeelding van een sjabloon met vijf of zes knoppen in groot formaat.

afbeelding van het vijf of zes knoppen middelgrote definitiesjabloon.

afbeelding van vijf of zes knoppen kleine formaatdefinitie sjabloon.

SixButtons

Zes besturingselementen voor knopfamilies.

afbeelding van zes knoppen grote formaat sjabloon.

afbeelding van zes knoppen middelgrote sjabloon.

afbeelding van zesbuttons klein formaat sjabloon.

SixButtons-TwoColumns

Zes bedieningselementen voor knoppen (alternatieve presentatie).

afbeelding van het sixbuttons-twocolumns grote afmeting sjabloon.

sjabloon van sixbuttons-twocolumns middelgrote definitie.

afbeelding van de zes knoppen-twee kolommen kleindefinitie sjabloon.

SevenButtons

Zeven besturingselementen voor knopfamilies.

afbeelding van een grote formaat sjabloon voor zeven knoppen.

afbeelding van de mediumgrootte definitie-sjabloon van zeven knoppen.

afbeelding van een kleine sjabloon voor zevenbuttons.

Acht Buttons

Acht knoppenfamiliebedieningen.

afbeelding van de sjabloon voor 'achtbuttons-lastthreesmall' grote formaatdefinitie.

afbeelding van achtbuttons-lastthreesmall middelgrote definitie sjabloon.

afbeelding van achtbuttons-lastthreesmall small sizedefinition sjabloon.

EightButtons-LastThreeSmall

Acht besturingselementen in de knopfamilie (alternatieve presentatie).

Notitie

Alle besturingselementen die met deze sjabloon zijn gedeclareerd, moeten zijn opgenomen in twee ControlGroup elementen: één voor de eerste vijf elementen en één voor de laatste drie elementen.

In het volgende voorbeeld ziet u de opmaak die vereist is voor deze sjabloon.

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

afbeelding van een groot formaat sjabloon met acht knoppen definitie.

afbeelding van acht knoppen middelgrote definitie sjabloon.

afbeelding van acht knoppen klein-formaat sjabloon.

NineButtons

Negen besturingselementen voor knopfamilies.

afbeelding van een template voor grote formaat van negen knoppen.

afbeelding van de gemiddelde formaat sjabloon voor Ninebuttons.

afbeelding van een kleine sjabloon voor negenbuttons.

TenButtons

Tien bedieningselementen van de knopfamilie.

afbeelding van tenbuttons grote formaat definitie sjabloon.

nl-NL: afbeelding van tenbuttons medium grootte definitie-sjabloon.

afbeelding van de kleinschalige tenbuttons-sjabloon.

Elf Buttons

Elf besturingselementen van de knopfamilie.

afbeelding van elf knoppen grote afmeting definitie sjabloon.

afbeelding van elf knoppen middelgrote definitie sjabloon.

afbeelding van elf knoppen sjabloon voor klein formaat.

OneFontControl

Eén FontControl-.

Alleen grote en middelgrote groepen worden ondersteund.

Belangrijk

Het opnemen van een FontControl binnen een aangepaste sjabloondefinitie wordt niet ondersteund door het framework.

afbeelding van de onefontcontrol grote formaatdefinitie sjabloon.

afbeelding van onefontcontrol middelgrote definitie-sjabloon.

OneInRibbonGallery

Eén besturingselement InRibbonGallery.

Alleen grote en kleine groepen worden ondersteund.

afbeelding van oneinribbongallery groot formaat sjabloon.

afbeelding van oneinribbongallery sjabloon voor een kleine afbeeldingsdefinitie.

InRibbonGalerijEnGroteKnop

Eén InRibbonGallery besturingselement en een knopfamiliebesturingselement.

Alleen grote en kleine groepen worden ondersteund.

afbeelding van de sjabloon 'inribbongalleryandbigbutton' voor groot formaatdefinitie.

afbeelding van inribbongalleryandbigbutton small sizedefinitie template.

InRibbonGalleryAndButtons-GalleryScalesFirst

Eén In-Ribbon Galerij bedieningsknop en twee of drie knopfamiliebedieningen.

De galerij wordt ingeklapt tot een pop-upweergave bij middelgrote en kleine groottes.

afbeelding van inribbongalleryandbuttons-galleryscalesfirst grote maatdefinitie template.

afbeelding van inribbongalleryandbuttons-galleryscalesfirst medium sizedefinition template.

afbeelding van inribbongalleryandbuttons-galleryscalesfirst small sizedefinitie template.

ButtonGroups

Een complexe rangschikking van 32 knoppenfamilies (waarvan de meeste optioneel zijn).

Notitie

Afgezien van de optionele knop op volledige grootte van de grote ButtonGroups-sjabloon, moeten alle besturingselementen die met deze sjabloon zijn gedeclareerd, zijn opgenomen in ControlGroup elementen.

In het volgende voorbeeld ziet u de opmaak die is vereist voor het weergeven van alle 32 besturingselementen (vereist en optioneel) met deze sjabloon.

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

afbeelding van knopgroepen met een sjabloon voor grote grootte.

afbeelding van buttongroups sjabloon voor middelgrote definitie.

afbeelding van knopgroepen met een kleine grootte definitie sjabloon.

KnopgroepenEnInvoer

Twee besturingselementen voor de invoerfamilie (de tweede is optioneel) gevolgd door een complexe rangschikking van 29 knoppenfamiliebesturingselementen (waarvan de meeste optioneel zijn).

Alleen grote en middelgrote groepen worden ondersteund.

Notitie

Alle besturingselementen die met deze sjabloon zijn gedeclareerd, moeten zijn opgenomen in ControlGroup elementen.

In het volgende voorbeeld ziet u de opmaak die is vereist voor het weergeven van alle besturingselementen (vereist en optioneel) met deze sjabloon.

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

afbeelding van buttongroupsandinputs sjabloon voor grote grootte.

afbeelding van buttongroupsandinputs middelgrote sizedefinitie sjabloon.

GroteKnoppenEnKleineKnoppenOfInvoer

Twee knopfamiliebesturingselementen (beide optioneel), gevolgd door twee of drie knoppen of invoerfamiliebesturingselementen.

Alleen grote en middelgrote groepen worden ondersteund.

beeld van het sjabloon bigbuttonsandsmallbuttonsorinputs met grote formaatdefinitie.

afbeelding van bigbuttonsandsmallbuttonsorinputs medium-sizedefinitie template.

Voorbeeld van Basic SizeDefinition

In het volgende codevoorbeeld ziet u een eenvoudige demonstratie van het declareren van een SizeDefinition sjabloon in lintmarkeringen.

De OneInRibbonGallerySizeDefinition- wordt gebruikt voor dit specifieke voorbeeld, maar alle frameworksjablonen worden op dezelfde wijze gespecificeerd.

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

Voorbeeld van complexe sizeDefinition met schaalbeleid

Het samenvouwgedrag van SizeDefinition-sjablonen kan worden beheerd door gebruik te maken van schaalstrategieën in de Ribbon markup.

Het element ScalingPolicy bevat een manifest van ScalingPolicy.IdealSizes en Scale declaraties waarmee adaptieve indelingsvoorkeuren worden opgegeven voor een of meer Groep elementen wanneer de Ribbon van grootte verandert.

Notitie

Het wordt ten zeerste aanbevolen om voldoende schaalbeleidsgegevens op te geven, zodat de meeste, zo niet alle, groep elementen zijn gekoppeld aan een element waarbij het kenmerk Grootte gelijk is aan Popup. Hierdoor kan het framework het lint zo klein mogelijk weergeven en het breedste aantal weergaveapparaten ondersteunen voordat er automatisch een schuifmechanisme wordt ingevoerd.

In het volgende codevoorbeeld ziet u een ScalingPolicy manifest dat een ScalingPolicy.IdealSizesSizeDefinition voorkeur aangeeft voor elk van de vier groepen besturingselementen op een tabblad Start. Daarnaast worden elementen opgegeven om het samenvouwgedrag, in aflopende grootte, van elke groep te beïnvloeden.

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

Aangepaste sjablonen

Als het standaardgedrag van de indeling en de vooraf gedefinieerde SizeDefinition sjablonen niet de flexibiliteit of ondersteuning bieden voor een bepaald indelingsscenario, worden aangepaste sjablonen ondersteund door het lintframework via het element Ribbon.SizeDefinitions.

Aangepaste sjablonen kunnen op twee manieren worden gedeclareerd: een zelfstandige methode met behulp van het element Ribbon.SizeDefinitions voor het declareren van herbruikbare, benoemde sjablonen of een inlinemethode die is Groep-specifiek.

Zelfstandige sjabloon

In het volgende codevoorbeeld ziet u een eenvoudige, herbruikbare aangepaste sjabloon.

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

Inline Sjabloon

De volgende codevoorbeelden illustreren een eenvoudige inline aangepaste sjabloon voor een groep van vier knoppen.

In deze sectie met code worden de opdrachtdeclaraties voor een groep knoppen weergegeven. Grote en kleine afbeeldingsresources worden hier ook opgegeven.

<!-- 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 deze sectie met code ziet u hoe u grote, middelgrote en kleine GroupSizeDefinition-sjablonen definieert om de vier knoppen op verschillende grootten en indelingen weer te geven. Met de declaratie ScalingPolicy voor het tabblad wordt gedefinieerd welke sjabloon wordt gebruikt voor een groep besturingselementen op basis van de grootte van het lint en de ruimte die vereist is voor het actieve tabblad.

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

In de volgende afbeeldingen ziet u hoe de sjablonen uit het vorige voorbeeld worden toegepast op de gebruikersinterface van het lint om ruimte te bieden voor een afname van de lintgrootte.