Personalizzazione di una barra multifunzione tramite definizioni di dimensioni e criteri di ridimensionamento

Articolo
07/04/2024

I controlli ospitati nella barra dei comandi della barra multifunzione sono soggetti a regole di layout applicate dal framework della barra multifunzione di Windows e basate su una combinazione di comportamenti predefiniti e modelli di layout (sia definiti dal framework che personalizzati) come dichiarato nel markup della barra multifunzione. Queste regole definiscono i comportamenti di layout adattivo del framework della barra multifunzione che influenzano il modo in cui i controlli nella barra dei comandi si adattano a varie dimensioni della barra multifunzione in fase di esecuzione.

Introduzione
- Modelli di definizione delle dimensioni della barra multifunzione
- Modelli personalizzati
Argomenti correlati

Introduzione

Il layout adattivo, come definito dal framework della barra multifunzione, è la possibilità di tutti i controlli all'interno dell'interfaccia utente della barra multifunzione di regolare dinamicamente l'organizzazione, le dimensioni, il formato e la scala relativa in base alle modifiche apportate alle dimensioni della barra multifunzione in fase di esecuzione.

Il framework espone funzionalità di layout adattivo tramite un set di elementi di markup dedicati alla specifica e alla personalizzazione di diversi comportamenti di layout. Una raccolta di modelli, denominata SizeDefinitions, è definita dal framework, ognuna delle quali supporta vari scenari di controllo e layout. Tuttavia, il framework supporta anche modelli personalizzati se i modelli predefiniti non forniscono l'esperienza o i layout dell'interfaccia utente richiesti da un'applicazione.

Per visualizzare i controlli in un layout preferito a una determinata dimensione della barra multifunzione, i modelli predefiniti e i modelli personalizzati funzionano insieme all'elemento ScalingPolicy . Questo elemento contiene un manifesto delle preferenze di dimensione usate dal framework come guida per il rendering della barra multifunzione.

Nota

Il framework della barra multifunzione fornisce comportamenti di layout predefiniti basati su un set di euristiche predefinite per l'organizzazione e la presentazione dei controlli in fase di esecuzione senza la necessità di modelli SizeDefinition predefiniti. Tuttavia, questa funzionalità è destinata solo ai prototipi.

Modelli di definizione delle dimensioni della barra multifunzione

Il framework della barra multifunzione offre un set completo di modelli SizeDefinition che specificano le dimensioni e il comportamento di layout per un gruppo di controlli della barra multifunzione. Questi modelli riguardano gli scenari più comuni per organizzare i controlli in un'applicazione della barra multifunzione.

Per applicare un'esperienza utente coerente tra le applicazioni della barra multifunzione, ogni modello SizeDefinition impone restrizioni ai controlli o alla famiglia di controlli supportati.

Ad esempio, la famiglia di controlli pulsante include:

Mentre la famiglia di controlli di input include:

La casella di controllo e la raccolta nella barra multifunzione non appartengono alla famiglia di pulsanti o alla famiglia di input. Questi due controlli possono essere usati solo se indicati in modo esplicito in un modello SizeDefinition.

Di seguito è riportato un elenco dei modelli SizeDefinition con una descrizione del layout e dei controlli consentiti da ogni modello.

Importante

Se i controlli dichiarati nel markup non vengono mappati esattamente al tipo di controllo, all'ordine e alla quantità definiti nel modello associato, viene registrato un errore di convalida dal compilatore di markup e la compilazione viene terminata.

OneButton

Un controllo della famiglia di pulsanti.
Sono supportate solo le dimensioni del gruppo di grandi dimensioni.

immagine del modello di definizione delle dimensioni di un pulsante.

TwoButtons

Due controlli della famiglia di pulsanti.
Sono supportate solo le dimensioni dei gruppi di grandi dimensioni e medie.

immagine di due pulsanti di grandi dimensioni modello di definizione.

immagine del modello di definizione delle dimensioni medie dei due pulsanti.

ThreeButtons

Tre controlli della famiglia di pulsanti.
Sono supportate solo le dimensioni dei gruppi di grandi dimensioni e medie.

immagine di tre pulsanti di grandi dimensioni modello di definizione.

immagine del modello di definizione delle dimensioni medie dei tre pulsanti.

ThreeButtons-OneBigAndTwoSmall

Tre controlli della famiglia di pulsanti.
Il primo pulsante viene presentato in modo prominente in tutte e tre le dimensioni.

immagine del modello di definizione delle dimensioni large di threebuttons-onebigandtwosmall.

immagine del modello di definizione delle dimensioni medie threebuttons-onebigandtwosmall.

immagine del modello small sizedefinition threebuttons-onebigandtwosmall.

ThreeButtonsAndOneCheckBox

Tre controlli della famiglia di pulsanti accompagnati da un singolo controllo CheckBox.
Sono supportate solo le dimensioni dei gruppi di grandi dimensioni e medie.

immagine di trebuttonsandonecheckbox large sizedefinition template.picture of threebuttonsandonecheckbox large sizedefinition template.picture of threebuttonsandonecheckbox large sizedefinition template.

immagine del modello di definizione media di threebuttonsandonecheckbox.

FourButtons

Quattro controlli della famiglia di pulsanti.

immagine di quattro pulsanti di grandi dimensioni modello di definizione.

immagine del modello di definizione delle dimensioni medie dei quattro pulsanti.

immagine del modello di 4buttons small sizedefinition.

FiveButtons

Cinque controlli della famiglia di pulsanti.

immagine di cinque pulsanti di grandi dimensioni modello di definizione.

immagine del modello di definizione delle dimensioni medie dei cinque pulsanti.

immagine di cinque pulsanti di piccole dimensioni modello di definizione.

FiveOrSixButtons

Cinque controlli della famiglia di pulsanti e un sesto pulsante facoltativo.

immagine del modello sizedefinition di cinqueorsixbuttons di grandi dimensioni.

immagine del modello di definizione delle dimensioni medie fiveorsixbuttons.

immagine di fiveorsixbuttons small sizedefinition template.picture of fiveorsixbuttons small sizedefinition template.picture of fiveorsixbuttons small sizedefinition template.

SixButtons

Sei controlli della famiglia di pulsanti.

immagine di seibuttons grande modello di definizione delle dimensioni.

immagine del modello di definizione delle dimensioni medie di sei pulsanti.

immagine di seibuttons small sizedefinition template.picture of sixbuttons small sizedefinition template.

SixButtons-TwoColumns

Sei controlli della famiglia di pulsanti (presentazione alternativa).

immagine di seibuttons-twocolumns large sizedefinition template.

modello sixbuttons-twocolumns medium sizedefinition.

immagine di seibuttons-twocolumns small sizedefinition template.

SevenButtons

Sette controlli della famiglia di pulsanti.

immagine di sette pulsanti di grandi dimensioni modello di definizione.

immagine del modello mediumsizedefinition di sette pulsanti.

immagine di sevenbuttons small sizedefinition template.

EightButtons

Otto controlli della famiglia di pulsanti.

immagine del modello large sizedefinition eightbuttons-lastthreesmall.

immagine del modello di definizione delle dimensioni medie degli ottobuttons-lastthreesmall.

immagine del modello small sizedefinition degli ottobuttons-lastthreesmall.

EightButtons-LastThreeSmall

Otto controlli della famiglia di pulsanti (presentazione alternativa).

Nota

Tutti gli elementi di controllo dichiarati con questo modello devono essere contenuti in due elementi ControlGroup : uno per i primi cinque elementi e uno per gli ultimi tre elementi.

Nell'esempio seguente viene illustrato il markup necessario per questo modello.

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

immagine di otto pulsanti di grandi dimensioni modello di definizione.

immagine del modello di definizione delle dimensioni medie degli otto pulsanti.

immagine di ottobuttons small sizedefinition template.picture of eightbuttons small sizedefinition template.

NineButtons

Nove controlli della famiglia di pulsanti.

immagine di novebuttons large sizedefinition template.picture of ninebuttons large sizedefinition template.picture of ninebuttons large sizedefinition template.

immagine del modello di definizione delle dimensioni medie dei novebuttoni.

immagine di novebuttons small sizedefinition template.picture of ninebuttons small sizedefinition template.

TenButtons

Dieci controlli della famiglia di pulsanti.

immagine di tenbuttons large sizedefinition template.picture of tenbuttons large sizedefinition template.

immagine del modello di definizione delle dimensioni medie dei tenbuttons.

immagine di tenbuttons small sizedefinition template.picture of tenbuttons small sizedefinition template.

ElevenButtons

Undici controlli della famiglia di pulsanti.

immagine di undicibuttoni modello di definizione delle dimensioni elevate.

immagine del modello di definizione delle dimensioni medie di undici pulsanti.

immagine di undicibuttons small sizedefinition template.picture of elevenbuttons small sizedefinition template.picture of elevenbuttons small sizedefinition template.

OneFontControl

Un oggetto FontControl.

Sono supportate solo le dimensioni dei gruppi di grandi dimensioni e medie.

Importante

L'inclusione di un oggetto FontControl all'interno di una definizione di modello personalizzata non è supportata dal framework.

immagine del modello di dimensioni large di onefontcontrol.

immagine del modello di definizione delle dimensioni medie di onefontcontrol.

OneInRibbonGallery

Un controllo InRibbonGallery.

Sono supportate solo le dimensioni dei gruppi di grandi dimensioni e di piccole dimensioni.

immagine del modello di definizione delle dimensioni large di oneinribbongallery.

immagine di un modello di dimensioni ridotte di oneinribbongallery.

InRibbonGalleryAndBigButton

Un controllo InRibbonGallery e un controllo della famiglia di pulsanti.

Sono supportate solo le dimensioni dei gruppi di grandi dimensioni e di piccole dimensioni.

immagine del modello inribbongalleryandbigbutton large sizedefinition.

immagine del modello inribbongalleryandbigbutton small sizedefinition.

InRibbonGalleryAndButtons-GalleryScalesFirst

Un controllo Raccolta nella barra multifunzione e due o tre controlli della famiglia di pulsanti.

La raccolta viene compressa in Rappresentazione popup in gruppi medio e piccolo.

immagine di inribbongalleryandbuttons-galleryscalesfirst large sizedefinition template.

immagine del modello inribbongalleryandbuttons-galleryscalesfirst medium sizedefinition.

immagine di inribbongalleryandbuttons-galleryscalesfirst small sizedefinition template.

ButtonGroups

Una disposizione complessa di 32 controlli della famiglia di pulsanti (la maggior parte dei quali è facoltativa).

Nota

A parte il pulsante facoltativo a dimensione intera del modello ButtonGroups di grandi dimensioni, tutti gli elementi di controllo dichiarati con questo modello devono essere contenuti negli elementi ControlGroup .

Nell'esempio seguente viene illustrato il markup necessario per visualizzare tutti e 32 gli elementi di controllo (obbligatori e facoltativi) con questo modello.

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

immagine di buttongroups large sizedefinition template.picture of buttongroups large sizedefinition template.picture of buttongroups large sizedefinition template.

immagine del modello di definizione delle dimensioni medie dei buttongroup.

immagine di buttongroups small sizedefinition template.picture of buttongroups small sizedefinition template.picture of buttongroups small sizedefinition template.

ButtonGroupsAndInputs

Due controlli della famiglia di input (il secondo è facoltativo) seguiti da una disposizione complessa di 29 controlli della famiglia di pulsanti (la maggior parte dei quali sono facoltativi).

Sono supportate solo le dimensioni dei gruppi di grandi dimensioni e medie.

Nota

Tutti gli elementi di controllo dichiarati con questo modello devono essere contenuti negli elementi ControlGroup .

Nell'esempio seguente viene illustrato il markup necessario per visualizzare tutti gli elementi di controllo (obbligatori e facoltativi) con questo modello.

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

immagine del modello sizedefinition di buttongroupsandinputs di grandi dimensioni.

immagine del modello buttongroupsandinputs medium sizedefinition.

BigButtonsAndSmallButtonsOrInputs

Due controlli della famiglia di pulsanti (entrambi facoltativi) seguiti da due o tre pulsanti o controlli della famiglia di input.

Sono supportate solo le dimensioni dei gruppi di grandi dimensioni e medie.

immagine del modello large sizedefinition bigbuttonsandsmallbuttonsorinputs.

immagine del modello bigbuttonsandsmallbuttonsorinputs medium sizedefinition.

Esempio di SizeDefinition di base

Nell'esempio di codice seguente viene fornita una dimostrazione di base di come dichiarare un modello SizeDefinition nel markup della barra multifunzione.

OneInRibbonGallery SizeDefinition viene usato per questo particolare esempio, ma tutti i modelli di framework vengono specificati in modo simile.

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

Esempio di SizeDefinition complesso con criteri di ridimensionamento

Il comportamento di compressione dei modelli SizeDefinition può essere controllato tramite l'uso dei criteri di ridimensionamento nel markup della barra multifunzione.

L'elemento ScalingPolicy contiene un manifesto delle dichiarazioni ScalingPolicy.IdealSizes e Scale che specificano le preferenze di layout adattivo per uno o più elementi Group quando la barra multifunzione viene ridimensionata.

Nota

È consigliabile specificare dettagli dei criteri di ridimensionamento adeguati in modo che la maggior parte, se non tutti, gli elementi Group siano associati a un elemento Scale in cui l'attributo Size è uguale a Popup. In questo modo il framework consente al framework di eseguire il rendering della barra multifunzione con le dimensioni più piccole possibili e supportare l'ampia gamma di dispositivi di visualizzazione, prima di introdurre automaticamente un meccanismo di scorrimento.

Nell'esempio di codice seguente viene illustrato un manifesto ScalingPolicy che specifica una preferenza ScalingPolicy.IdealSizes SizeDefinition per ognuno di quattro gruppi di controlli in una scheda Home. Inoltre, gli elementi Scale vengono specificati per influenzare il comportamento di compressione, in ordine decrescente di dimensioni, di ogni gruppo.

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

Modelli personalizzati

Se i comportamenti di layout predefiniti e i modelli SizeDefinition predefiniti non offrono flessibilità o supporto per uno scenario di layout specifico, i modelli personalizzati sono supportati dal framework della barra multifunzione tramite l'elemento Ribbon.SizeDefinitions.

I modelli personalizzati possono essere dichiarati in due modi: un metodo autonomo usando l'elemento Ribbon.SizeDefinitions per dichiarare modelli riutilizzabili, denominati o un metodo inline specifico del gruppo.

Modello autonomo

Nell'esempio di codice seguente viene illustrato un modello personalizzato riutilizzabile di base.

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

Modello inline

Gli esempi di codice seguenti illustrano un modello personalizzato inline di base per un gruppo di quattro pulsanti.

Questa sezione di codice mostra le dichiarazioni di comando per un gruppo di pulsanti. Qui vengono specificate anche risorse di immagine di grandi dimensioni e piccole.

<!-- 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 questa sezione del codice viene illustrato come definire modelli GroupSizeDefinition di grandi dimensioni, medio e piccoli per visualizzare i quattro pulsanti con diverse dimensioni e layout. La dichiarazione ScalingPolicy per la scheda definisce il modello usato per un gruppo di controlli in base alle dimensioni della barra multifunzione e allo spazio richiesto dalla scheda attiva.

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

Le immagini seguenti illustrano come i modelli dell'esempio precedente vengono applicati all'interfaccia utente della barra multifunzione per contenere una riduzione delle dimensioni della barra multifunzione.