Partager via

Personnalisation d’un ruban via des définitions de taille et des stratégies de mise à l’échelle

  • Article

Les contrôles hébergés dans la barre de commandes du ruban sont soumis à des règles de disposition qui sont appliquées par l’infrastructure du ruban Windows et basées sur une combinaison de comportements par défaut et de modèles de disposition (définis par l’infrastructure et personnalisés) tels que déclarés dans le balisage du ruban. Ces règles définissent les comportements de disposition adaptative de l’infrastructure du ruban qui influencent la façon dont les contrôles de la barre de commandes s’adaptent à différentes tailles de ruban au moment de l’exécution.

Introduction

La disposition adaptative, telle que définie par l’infrastructure du ruban, permet à tous les contrôles de l’interface utilisateur du ruban d’ajuster dynamiquement leur organization, leur taille, leur format et leur échelle relative en fonction des modifications apportées à la taille du ruban au moment de l’exécution.

L’infrastructure expose la fonctionnalité de disposition adaptative par le biais d’un ensemble d’éléments de balisage dédiés à la spécification et à la personnalisation de différents comportements de disposition. Une collection de modèles, appelée SizeDefinitions, est définie par l’infrastructure, chacun prenant en charge différents scénarios de contrôle et de disposition. Toutefois, l’infrastructure prend également en charge les modèles personnalisés si les modèles prédéfinis ne fournissent pas l’expérience d’interface utilisateur ou les dispositions requises par une application.

Pour afficher des contrôles dans une disposition préférée à une taille de ruban particulière, les modèles prédéfinis et les modèles personnalisés fonctionnent conjointement avec l’élément ScalingPolicy . Cet élément contient un manifeste des préférences de taille que l’infrastructure utilise comme guide lors du rendu du ruban.

Notes

L’infrastructure du ruban fournit des comportements de disposition par défaut basés sur un ensemble d’heuristiques intégrées pour l’organization et la présentation des contrôles au moment de l’exécution sans avoir besoin des modèles SizeDefinition prédéfinis. Toutefois, cette fonctionnalité est destinée uniquement à des fins de prototypage.

Modèles de taille de rubanDefinition

L’infrastructure du ruban fournit un ensemble complet de modèles SizeDefinition qui spécifient la taille et le comportement de disposition d’un groupe de contrôles de ruban. Ces modèles couvrent les scénarios les plus courants d’organisation des contrôles dans une application ruban.

Pour appliquer une expérience utilisateur cohérente entre les applications ruban, chaque modèle SizeDefinition impose des restrictions sur les contrôles ou la famille de contrôles qu’il prend en charge.

Par exemple, la famille de boutons de contrôles comprend :

Alors que la famille de contrôles d’entrée comprend :

Case à cocher et galerie dans le ruban n’appartiennent ni à la famille de boutons ni à la famille d’entrée. Ces deux contrôles ne peuvent être utilisés que lorsqu’ils sont explicitement indiqués dans un modèle SizeDefinition .

Voici une liste des modèles SizeDefinition avec une description de la disposition et des contrôles autorisés par chaque modèle.

Important

Si les contrôles déclarés dans le balisage ne correspondent pas exactement au type de contrôle, à l’ordre et à la quantité définis dans le modèle associé, une erreur de validation est enregistrée par le compilateur de balisage et la compilation est terminée.

OneButton

Un bouton-contrôle de famille.
Seule la taille de groupe volumineuse est prise en charge.

image du modèle onebutton sizedefinition.

TwoButtons

Deux contrôles de famille de boutons.
Seules les tailles de groupe grande et moyenne sont prises en charge.

image d’un modèle de définition à deux boutons de grande taille.

image du modèle de définition de taille moyenne à deux boutons.

ThreeButtons

Trois contrôles de famille de boutons.
Seules les tailles de groupe grande et moyenne sont prises en charge.

image d’un modèle de définition de trois boutons de grande taille.

image du modèle de définition de la taille moyenne des trois boutons.

ThreeButtons-OneBigAndTwoSmall

Trois contrôles de famille de boutons.
Le premier bouton est présenté en évidence dans les trois tailles.

image de trois boutons -unbigandtwosmall grande tailledéfinition modèle de définition.

image de trois boutons-unbigandtwosmall modèle de définition de taille moyenne.

image de trois boutons-unbigandtwosmall small sizedefinition template.

ThreeButtonsAndOneCheckBox

Trois contrôles de famille de boutons accompagnés d’un seul contrôle CheckBox.
Seules les tailles de groupe grande et moyenne sont prises en charge.

image de trois boutonsandonecheckbox grande tailledéfinition modèle de définition.

image de trois boutonsetonecheckbox modèle de définition de taille moyenne.

FourButtons

Quatre contrôles de famille de boutons.

image du modèle de définition de la taille des quatre boutons.

image du modèle de définition de taille moyenne à quatre boutons.

image du modèle de définition de la définition à quatre boutons.

FiveButtons

Cinq contrôles de famille de boutons.

image du modèle de définition de cinq boutons de grande taille.

image du modèle de définition de la taille moyenne des cinq boutons.

image du modèle de définition de cinq boutons de petite taille.

FiveOrSixButtons

Cinq contrôles de famille de boutons et un sixième bouton facultatif.

image du modèle fiveorsixbuttons grande tailledefinition.

image de fiveorsixbuttons taille moyennedéfinition modèle de définition.

image du modèle fiveorsixbuttons small sizedefinition.

SixButtons

Six contrôles de famille de boutons.

image du modèle de définition de la taille de six boutons.

image du modèle de définition de la taille moyenne sixbuttons.

image de sixbuttons petit modèle de définition de la définition.

SixButtons-TwoColumns

Six contrôles de famille de boutons (autre présentation).

image du modèle sixbuttons-twocolumns grande tailledefinition.

sixbuttons-twocolumns modèle de définition de taille moyenne.

image de sixbuttons-twocolumns small sizedefinition template.

SevenButtons

Sept contrôles de famille de boutons.

image du modèle de définition de la taille de sept boutons.

image du modèle sevenbuttons mediumsizedefinition.

image d’un modèle de définition de petite taille à sept boutons.

EightButtons

Huit contrôles de famille de boutons.

image de huitbuttons-lastthreesmall grande tailledefinition modèle.

image de huitbuttons-lastthreesmall medium sizedefinition template.

image de huitbuttons-lastthreesmall small sizedefinition template.

EightButtons-LastThreeSmall

Huit contrôles de famille de boutons (autre présentation).

Notes

Tous les éléments de contrôle déclarés avec ce modèle doivent être contenus dans deux éléments ControlGroup : un pour les cinq premiers éléments et un pour les trois derniers éléments.


L’exemple suivant illustre le balisage requis pour ce modèle.

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

image d’un modèle de définition de grande taille de huitbuttons.

image d’un modèle de définition de taille moyenne de huit boutons.

image d’un modèle de définition de petite taille à huit boutons.

NineButtons

Neuf contrôles de famille de boutons.

image d’un modèle de définition de grande taille de neufbuttons.

image du modèle de définition de taille moyenne de neufbuttons.

image d’un modèle de définition de petite taille de neufbuttons.

TenButtons

Dix contrôles de famille de boutons.

image d’un modèle de définition de grande taille tenbuttons.

image du modèle de définition de taille moyenne tenbuttons.

image d’un modèle de définition de petite taille de tenbuttons.

ElevenButtons

Onze contrôles de famille de boutons.

image d’un modèle de définition de la taille de onzebuttons.

image du modèle onzebuttons de taille moyennedéfinition.

image d’un modèle de définition de petite taille de onzebuttons.

OneFontControl

Un FontControl.

Seules les tailles de groupes grands et moyens sont prises en charge.

Important

L’inclusion d’un FontControl dans une définition de modèle personnalisée n’est pas prise en charge par l’infrastructure.

image du modèle onefontcontrol grande tailledefinition.

image du modèle onefontcontrol de taille moyennedefinition.

OneInRibbonGallery

Un contrôle InRibbonGallery .

Seules les tailles de groupes grands et petits sont prises en charge.

image d’un modèle de définition de grande taille d’uninribbongallery.

image d’un modèle oneinribbongallery small sizedefinition.

InRibbonGalleryAndBigButton

Un contrôle InRibbonGallery et un contrôle de famille de boutons.

Seules les tailles de groupes grands et petits sont prises en charge.

image du modèle inribbongalleryandbigbutton grande tailledefinition.

image du modèle inribbongalleryandbigbutton small sizedefinition.

InRibbonGalleryAndButtons-GalleryScalesFirst

Un contrôle Galerie dans le ruban et deux ou trois contrôles de famille de boutons.

La galerie se réduit à une représentation contextuelle dans les groupes de taille moyenne et petite.

image de inribbongalleryandbuttons-galleryscalesfirst large sizedefinition template.

image de inribbongalleryandbuttons-galleryscalesfirst medium sizedefinition template.

image de inribbongalleryandbuttons-galleryscalesfirst small sizedefinition template.

ButtonGroups

Disposition complexe de 32 contrôles de famille de boutons (dont la plupart sont facultatifs).

Notes

Mis à part le bouton de taille réelle facultatif du grand modèle ButtonGroups, tous les éléments de contrôle déclarés avec ce modèle doivent être contenus dans les éléments ControlGroup .

L’exemple suivant illustre le balisage requis pour afficher les 32 éléments de contrôle (obligatoires et facultatifs) avec ce modèle.

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

image du modèle buttongroups grande tailledefinition.

image du modèle buttongroups de taille moyennedéfinition.

image du modèle buttongroups small sizedefinition.

ButtonGroupsAndInputs

Deux contrôles de famille d’entrée (le deuxième est facultatif) suivis d’une disposition complexe de 29 contrôles de famille de boutons (dont la plupart sont facultatifs).

Seules les tailles de groupes grands et moyens sont prises en charge.

Notes

Tous les éléments de contrôle déclarés avec ce modèle doivent être contenus dans les éléments ControlGroup .

L’exemple suivant illustre le balisage requis pour afficher tous les éléments de contrôle (obligatoires et facultatifs) avec ce modèle.

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

image de buttongroupsetinputs grand modèle de définition de taille.

image de buttongroupsandinputs medium sizedefinition template.

BigButtonsAndSmallButtonsOrInputs

Deux contrôles de famille de boutons (facultatifs) suivis de deux ou trois contrôles de bouton ou de famille d’entrée.

Seules les tailles de groupes grands et moyens sont prises en charge.

image de bigbuttonsandsmallbuttonsorinputs grand modèle de définition de taille.

image de bigbuttonsandsmallbuttonsorinputs modèle de définition de taille moyenne.

Exemple sizeDefinition de base

L’exemple de code suivant fournit une démonstration de base de la déclaration d’un modèle SizeDefinition dans le balisage du ruban.

OneInRibbonGallerySizeDefinition est utilisé pour cet exemple particulier, mais tous les modèles d’infrastructure sont spécifiés de la même manière.

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

Exemple de taille complexeDefinition avec des stratégies de mise à l’échelle

Le comportement de réduction des modèles SizeDefinition peut être contrôlé par l’utilisation de stratégies de mise à l’échelle dans le balisage du ruban.

L’élément ScalingPolicy contient un manifeste de déclarations ScalingPolicy.IdealSizes et Scale qui spécifient des préférences de disposition adaptatives pour un ou plusieurs éléments Group lorsque le ruban est redimensionné.

Notes

Il est vivement recommandé de spécifier des détails de stratégie de mise à l’échelle adéquats afin que la plupart, sinon tous, les éléments Group soient associés à un élément Scale où l’attribut Size est égal à Popup. Cela permet à l’infrastructure d’afficher le ruban à la plus petite taille possible et de prendre en charge la plus large gamme de périphériques d’affichage, avant d’introduire automatiquement un mécanisme de défilement.

L’exemple de code suivant illustre un manifeste ScalingPolicy qui spécifie une préférence ScalePolicy.IdealSizesSizeDefinition pour chacun des quatre groupes de contrôles sous un onglet Accueil . En outre, les éléments d’échelle sont spécifiés pour influencer le comportement d’effondrement, par ordre de taille décroissant, de chaque groupe.

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

Modèles personnalisés

Si les comportements de disposition par défaut et les modèles SizeDefinition prédéfinis n’offrent pas la flexibilité ou la prise en charge d’un scénario de disposition particulier, les modèles personnalisés sont pris en charge par l’infrastructure ribbon via l’élément Ribbon.SizeDefinitions .

Les modèles personnalisés peuvent être déclarés de deux manières : une méthode autonome utilisant l’élément Ribbon.SizeDefinitions pour la déclaration de modèles réutilisables nommés ou une méthode inline spécifique au groupe.

Modèle autonome

L’exemple de code suivant illustre un modèle personnalisé réutilisable de 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>

Modèle inline

Les exemples de code suivants illustrent un modèle personnalisé inline de base pour un groupe de quatre boutons.

Cette section de code affiche les déclarations de commande d’un groupe de boutons. Les ressources d’images grandes et petites sont également spécifiées ici.

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

Cette section de code montre comment définir des modèles GroupSizeDefinition grands, moyens et petits pour afficher les quatre boutons de différentes tailles et dispositions. La déclaration ScalingPolicy de l’onglet définit le modèle utilisé pour un groupe de contrôles en fonction de la taille du ruban et de l’espace requis par l’onglet actif.

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

Les images suivantes montrent comment les modèles de l’exemple précédent sont appliqués à l’interface utilisateur du ruban pour prendre en charge une diminution de la taille du ruban.

Type Image
grand image d’un grand modèle personnalisé inline.
Moyenne image d’un modèle personnalisé moyen inline.
Petite image d’un petit modèle personnalisé inline.
Fenêtre contextuelle image d’un modèle personnalisé contextuel inline.

SizeDefinition

Scale

Groupe