Personalizzazione di una barra multifunzione tramite definizioni di dimensioni e criteri di scalabilità

Articolo
06/13/2023

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 in base a una combinazione di comportamenti e modelli di layout predefiniti (sia definiti dal framework che personalizzati) come dichiarato nel markup della barra multifunzione. Queste regole definiscono i comportamenti adattivi del framework della barra multifunzione che influiscono sul modo in cui i controlli nella barra dei comandi si adattano a varie dimensioni della barra multifunzione in fase di esecuzione.

Introduzione
- Modelli di 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 modificare dinamicamente l'organizzazione, le dimensioni, il formato e la scala relativa in base alle modifiche apportate alla barra multifunzione in fase di esecuzione.

Il framework espone le funzionalità di layout adattive tramite un set di elementi di markup dedicati alla specifica e alla personalizzazione di vari 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 i modelli personalizzati devono non fornire l'esperienza o i layout dell'interfaccia utente richiesti da un'applicazione.

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

Nota

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

Modelli di dimensioni della barra multifunzione

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

Per applicare un'esperienza utente coerente tra 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:

Casella di controllo e Raccolta della 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 terminato.

OneButton

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

immagine del modello di dimensione onebuttondefinition.

TwoButtons

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

immagine di duebuttons large sizedefinition template.picture of twobuttons large sizedefinition template.

immagine del modello a dimensioni medie di duebutton.

ThreeButtons

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

immagine di trebuttons large sizedefinition template.picture of threebuttons large sizedefinition template.

immagine del modello di dimensione media di trebutton.

ThreeButtons-OneBigAndTwoSmall

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

immagine di trebuttons-onebigandtwosmall modello di dimensioni largedefinition.

immagine del modello di dimensione media di trebuttons-onebigandtwosmall.

immagine di trebuttons-onebigandtwosmall modello di dimensioni ridottedefinition.

ThreeButtonsAndOneCheckBox

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

immagine di trebuttonsandonecheckbox di grandi dimensionidefinizione modello.

immagine di trebuttonsandonecheckbox modello di dimensione mediadefinizione.

FourButtons

Quattro controlli della famiglia di pulsanti.

immagine di quattrobuttoni di grandi dimensionidefinizione modello.

immagine del modello di 4buttons di dimensioni medie.

immagine di quattrobuttons small sizedefinition template.

FiveButtons

Cinque controlli della famiglia di pulsanti.

immagine di cinquebuttons large sizedefinition template.picture of fivebuttons large sizedefinition template.

immagine del modello di dimensione media di cinquebutton.

immagine di cinquebuttons small sizedefinition template.picture of fivebuttons small sizedefinition template.

FiveOrSixButtons

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

immagine di cinqueorsixbuttons di grandi dimensionidefinizione modello.

immagine di cinqueorsixbuttons modello di dimensione mediadefinizione.

immagine di cinqueorsixbuttons piccolo modello di definizione delle dimensioni.

SixButtons

Sei controlli della famiglia di pulsanti.

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

immagine del modello di dimensioni medie di seibuttons.

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.picture of sixbuttons-twocolumns large sizedefinition template.

modello di definizione delle dimensioni medie di seibuttons-twocolumns.

immagine di seibuttons-twocolumns modello di dimensioni ridottedefinizione.

SevenButtons

Sette controlli della famiglia di pulsanti.

immagine di settebuttons large sizedefinition template.

immagine di settebuttons mediumsizedefinition template.

immagine di settebuttons small sizedefinition template.

OttoButtons

Otto controlli della famiglia di pulsanti.

immagine di ottobuttons-lastthreesmall modello large sizedefinition.

immagine di ottobuttons-lastthreesmall modello di dimensione mediadefinition.

immagine di ottobuttons-lastthreesmall modello di dimensioni ridottedefinizione.

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 ottobuttoni di grandi dimensionidefinizione modello.

immagine del modello di dimensioni medie di ottobuttoni.

immagine di ottobuttoni di piccole dimensionidefinizione modello.

NineButtons

Nove controlli della famiglia di pulsanti.

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

immagine del modello di dimensioni medie di novebuttons.

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 dimensione media tenbuttons.

immagine di tenbuttons small sizedefinition template.

ElevenButtons

Undici controlli della famiglia di pulsanti.

immagine di undicibuttons large sizedefinition template.

immagine del modello di dimensioni medie di undicibuttoni.

immagine di undicibuttoni modello di dimensioni ridotte.

OneFontControl

Un tipo di carattereControl.

Sono supportate solo le dimensioni di grandi e medie gruppi.

Importante

L'inclusione di 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 dimensione media di onefontcontrol.

OneInRibbonGallery

Un controllo InRibbonGallery .

Sono supportate solo le dimensioni di grandi e piccole gruppi.

immagine di un modello di dimensioni large sizedefinition di oneinribbongallery.

immagine di unoinribbongallery modello di dimensioni ridottedefinizione.

InRibbonGalleryAndBigButton

Un controllo InRibbonGallery e un controllo della famiglia di pulsanti.

Sono supportate solo le dimensioni di grandi e piccole gruppi.

immagine del modello inribbongalleryandbigbutton large sizedefinition.

immagine del modello inribbongalleryandbigbutton small sizedefinition.

InRibbonGalleryAndButtons-GalleryScalesFirst

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

La raccolta si comprime nella rappresentazione popup in dimensioni di gruppo 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

Oltre al pulsante facoltativo full-size 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 i 32 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.

immagine di buttongroups medium sizedefinition template.

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

ButtonGroupsAndInputs

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

Sono supportate solo le dimensioni di grandi e medie gruppi.

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 buttongroupsandinputs large sizedefinition.

immagine del modello buttongroupsandinputs di dimensioni medie.

BigButtonsAndSmallButtonsOrInputs

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

Sono supportate solo le dimensioni di grandi e medie gruppi.

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

immagine del modello bigbuttonsandsmallbuttonsorinputs medium sizedefinition.

Esempio di dimensioni di baseDefinition

L'esempio di codice seguente fornisce una dimostrazione di base su come dichiarare un modello SizeDefinition nel markup della barra multifunzione.

L'oggetto OneInRibbonGallerySizeDefinition viene usato per questo esempio specifico, 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 dimensioni complesseDefinition con criteri di ridimensionamento

Il comportamento di confronto 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 ScalePolicy.IdealSizes e Scale che specificano le preferenze di layout adattive per uno o più elementi gruppo quando la barra multifunzione viene ridimensionata.

Nota

È consigliabile specificare i dettagli dei criteri di ridimensionamento adeguati in modo che la maggior parte, se non tutti, gli elementi di gruppo siano associati a un elemento Scale in cui l'attributo Size è uguale a Popup. In questo modo, il framework consente di eseguire il rendering della barra multifunzione al più piccolo possibile 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.IdealSizesSizeDefinition per ognuno dei quattro gruppi di controlli in una scheda Home. Inoltre, gli elementi scale vengono specificati per influenzare il comportamento di confronto, 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 predefiniti del layout e i modelli SizeDefinition predefiniti non offrono la flessibilità o il 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 riutilizzabili, modelli 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. 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>

Questa sezione di codice illustra come definire modelli groupsizedefinition di grandi dimensioni, medio e piccoli per visualizzare i quattro pulsanti in 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 mostrano come i modelli dell'esempio precedente vengono applicati all'interfaccia utente della barra multifunzione per supportare una riduzione delle dimensioni della barra multifunzione.