Personalización de una cinta mediante definiciones de tamaño y políticas de escalado

Artículo
07/26/2024

Los controles alojados en la barra de comandos de la cinta de opciones están sujetos a reglas de diseño impuestas por el marco de trabajo de la cinta de opciones de Windows y basadas en una combinación de comportamientos predeterminados y plantillas de diseño (tanto definidas por el marco de trabajo como personalizadas) declaradas en el marcado de la cinta de opciones. Estas reglas definen los comportamientos de diseño adaptable de la estructura de cinta que influyen en el modo en que los controles de la barra de comandos se adaptan a los distintos tamaños de cinta en tiempo de ejecución.

Introducción
- Tamaño de la cintaPlantillas de definición
- Plantillas personalizadas
Temas relacionados

Introducción

El diseño adaptable, tal y como se define en el marco de trabajo de la cinta de opciones, es la capacidad de todos los controles de la interfaz de usuario de la cinta de opciones para ajustar dinámicamente su organización, tamaño, formato y escala relativa en función de los cambios en el tamaño de la cinta de opciones en tiempo de ejecución.

El marco expone la funcionalidad de diseño adaptativo a través de un conjunto de elementos de marcado dedicados a especificar y personalizar diversos comportamientos de diseño. Una colección de plantillas, denominada SizeDefinitions, está definido por el marco, cada uno de los cuales admite diversos escenarios de control y disposición. Sin embargo, el marco también admite plantillas personalizadas en caso de que las plantillas predefinidas no proporcionen la experiencia de interfaz de usuario o los diseños requeridos por una aplicación.

Para mostrar los controles en un diseño preferido con un tamaño de cinta determinado, tanto las plantillas predefinidas como las personalizadas funcionan conjuntamente con la función ScalingPolicy elemento. Este elemento contiene un manifiesto de preferencias de tamaño que el framework utiliza como guía al renderizar la cinta.

Nota:

El marco de trabajo de la cinta de opciones proporciona comportamientos de diseño predeterminados basados en un conjunto de heurísticas integradas para la organización y presentación de controles en tiempo de ejecución sin necesidad de la función predefinida SizeDefinition plantillas. Sin embargo, esta capacidad está pensada solo para la creación de prototipos.

Tamaño de la cintaPlantillas de definición

El marco Ribbon ofrece un amplio conjunto de SizeDefinition que especifican el tamaño y el diseño de un archivo Grupo de los controles de cinta. Estas plantillas cubren los escenarios más comunes para organizar controles en una aplicación de cinta.

Para garantizar una experiencia de usuario coherente en todas las aplicaciones de cinta, cada SizeDefinition impone restricciones a los controles o a la familia de controles que soporta.

Por ejemplo, la familia de controles de botones incluye:

Mientras que la familia de controles de entrada incluye:

Casilla de verificación y Galería In-Ribbon no pertenecen ni a la familia de los botones ni a la de las entradas. Estos dos controles solo pueden utilizarse cuando se indique explícitamente en un SizeDefinition plantilla.

A continuación figura una lista de los SizeDefinition con una descripción del diseño y los controles que permite cada plantilla.

Importante

Si los controles declarados en el marcado no se corresponden exactamente con el tipo de control, el orden y la cantidad definidos en la plantilla asociada, aparecerá un mensaje validation error es registrado por el compilador de marcas y finaliza la compilación.

OneButton

Un botón de control familiar.
Solo se admiten grupos grandes.

imagen de plantilla definición de dimensionamiento de un botón.

TwoButtons

Dos botones de familia de controles.
Solo se admiten grupos de dimensionamiento grande y mediano.

imagen de dos botones de gran dimensionamiento plantilla de definición.

imagen de dos botones de medio dimensionamiento plantilla de definición.

ThreeButtons

Tres botones de familia controles.
Solo se admiten grupos de dimensionamiento grande y mediano.

imagen de tres botones de gran dimensionamiento plantilla de definición.

imagen de tres botones de medio dimensionamiento plantilla de definición.

ThreeButtons-OneBigAndTwoSmall

Tres botones de familia controles.
El primer botón se presenta de forma destacada en las tres dimensiones.

imagen de tres botones - uno grande y dos pequeños de gran dimensionamiento plantilla de definición.

imagen de tres botones - uno grande y dos pequeños de medio dimensionamiento plantilla de definición.

imagen de tres botones - uno grande y dos pequeños de pequeño dimensionamiento plantilla de definición.

ThreeButtonsAndOneCheckBox

Tres controles de botones de familia acompañados de un único control CheckBox.
Solo se admiten grupos de dimensionamiento grande y mediano.

imagen de tres botones y una casilla de comprobación hecha de gran dimensionamiento plantilla de definición.

imagen de tres botones y una casilla de comprobación media hecha de gran dimensionamiento plantilla de definición.

FourButtons

Cuatro controles de botones de familia.

imagen de cuatro botones de gran dimensionamiento plantilla de definición.

imagen de cuatro botones de medio dimensionamiento plantilla de definición.

imagen de cuatro botones de pequeño dimensionamiento plantilla de definición.

FiveButtons

Cinco controles de botones de familia.

imagen de cinco botones de gran dimensionamiento plantilla de definición.

imagen de cinco botones de medio dimensionamiento plantilla de definición.

imagen de cinco botones de pequeño dimensionamiento plantilla de definición.

FiveOrSixButtons

Cinco controles de botones de familia y un sexto botón opcional.

imagen de cinco o seis botones de gran dimensionamiento plantilla de definición.

imagen de cinco o seis botones de medio dimensionamiento plantilla de definición.

imagen de cinco o seis botones de pequeño dimensionamiento plantilla de definición.

SixButtons

Seis controles de botones de familia.

imagen de seis botones de gran dimensionamiento plantilla de definición.

imagen de seis botones de medio dimensionamiento plantilla de definición.

imagen de seis botones de pequeño dimensionamiento plantilla de definición.

SixButtons-TwoColumns

Seis controles de botones de familia (presentación alternativa).

imagen de seis botones - dos columnas de gran dimensionamiento plantilla de definición.

imagen de seis botones - dos columnas de medio dimensionamiento plantilla de definición.

imagen de seis botones - dos columnas de pequeño dimensionamiento plantilla de definición.

SevenButtons

siete controles de botones de familia.

imagen de siete botones de gran dimensionamiento plantilla de definición.

imagen de siete botones de medio dimensionamiento plantilla de definición.

imagen de siete botones de pequeño dimensionamiento plantilla de definición.

EightButtons

Ocho controles de botones de familia.

imagen de ocho botones - últimos tres pequeños de gran dimensionamiento plantilla de definición.

imagen de ocho botones - últimos tres pequeños de medio dimensionamiento plantilla de definición.

imagen de ocho botones - últimos tres pequeños de pequeño dimensionamiento plantilla de definición.

EightButtons-LastThreeSmall

Ocho controles de botones de familia (presentación alternativa).

Nota:

Todos los elementos de control declarados con esta plantilla deben estar contenidos en dos ControlGroup elementos: uno para los cinco primeros elementos y otro para los tres últimos.

El siguiente ejemplo muestra el marcado necesario para esta plantilla.

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

imagen de ocho botones de gran dimensionamiento plantilla de definición.

imagen de ocho botones de medio dimensionamiento plantilla de definición.

imagen de ocho botones de pequeño dimensionamiento plantilla de definición.

NineButtons

Nueve controles de botones de familia.

imagen de nueve botones de gran dimensionamiento plantilla de definición.

imagen de nueve botones de medio dimensionamiento plantilla de definición.

imagen de nueve botones de pequeño dimensionamiento plantilla de definición.

TenButtons

Diez controles de botones de familia.

imagen de diez botones de gran dimensionamiento plantilla de definición.

imagen de diez botones de medio dimensionamiento plantilla de definición.

imagen de diez botones de pequeño dimensionamiento plantilla de definición.

ElevenButtons

Once controles de botones de familia.

imagen de once botones de gran dimensionamiento plantilla de definición.

imagen de once botones de medio dimensionamiento plantilla de definición.

imagen de once botones de pequeño dimensionamiento plantilla de definición.

OneFontControl

Una FontControl.

Solo se admiten grupos de dimensionamiento grande y mediano.

Importante

Incluir una FontControl dentro de una definición de plantilla personalizada no está soportado por el framework.

imagen de una fuente de control de gran dimensionamiento plantilla de definición.

imagen de una fuente de control de medio dimensionamiento plantilla de definición.

OneInRibbonGallery

Una InRibbonGallery control.

Solo se admiten grupos de dimensionamiento grande y pequeño.

imagen de una galería de lazo de gran dimensionamiento plantilla de definición.

imagen de una galería de lazo de pequeño dimensionamiento plantilla de definición.

InRibbonGalleryAndBigButton

One InRibbonGallery control y un control de botón de familia.

Solo se admiten grupos de dimensionamiento grande y pequeño.

imagen de galería en lazo y un botón grande de gran dimensionamiento plantilla de definición.

imagen de galería en lazo y un botón pequeño de gran dimensionamiento plantilla de definición.

InRibbonGalleryAndButtons-GalleryScalesFirst

Una Galería en lazo control y dos o tres controles de botones de familia.

La galería se colapsa en representación Popup en dimensionamientos de grupo Mediano y Pequeño.

imagen de galería en lazo y botones primero de galería en escala grande dimensionamiento plantilla de definición.

imagen de galería en lazo y botones primero de galería en escala medio dimensionamiento plantilla de definición.

imagen de galería en lazo y botones primero de galería en escala pequeño dimensionamiento plantilla de definición.

ButtonGroups

Una compleja disposición de 32 botones de control (la mayoría opcionales).

Nota:

Aparte del botón opcional de tamaño completo de la plantilla ButtonGroups grande, todos los botones, todos los elementos de control declarados con esta plantilla deben estar contenidos en dos ControlGroup elementos: uno para los cinco primeros elementos y otro para los tres últimos.

El siguiente ejemplo muestra el marcado necesario para mostrar los 32 elementos de control (obligatorios y opcionales) con esta plantilla.

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

imagen de grupos de botones de gran dimensionamiento plantilla de definición.

imagen de grupos de botones de medio dimensionamiento plantilla de definición.

imagen de grupos de botones de pequeño dimensionamiento plantilla de definición.

ButtonGroupsAndInputs

Dos controles de familia de entrada (el segundo es opcional) seguidos de una compleja disposición de 29 botones de control (la mayoría opcionales).

Solo se admiten grupos de dimensionamiento grande y mediano.

Nota:

Todos los elementos de control declarados con esta plantilla deben estar contenidos en ControlGroup elementos.

El siguiente ejemplo muestra el marcado necesario para mostrar los elementos de control (obligatorios y opcionales) con esta plantilla.

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

imagen de grupos de botones y entradas de gran dimensionamiento plantilla de definición.

imagen de grupos de botones y entradas de medio dimensionamiento plantilla de definición.

BigButtonsAndSmallButtonsOrInputs

Dos controles de familia de entrada (ambos opcional) seguido de dos o tres botones o mandos familiares de entrada.

Solo se admiten grupos de dimensionamiento grande y mediano.

imagen de botones uno grande y dos pequeños y entradas de gran dimensionamiento plantilla de definición.

imagen de botones uno grande y dos pequeños y entradas de medio dimensionamiento plantilla de definición.

Ejemplo Básico de SizeDefinition

El siguiente ejemplo de código proporciona una demostración básica de cómo declarar un archivo SizeDefinition plantilla en la cinta de opciones.

El OneInRibbonGallery SizeDefinition se usa para este ejemplo particular, pero todas las plantillas del framework se especifican de forma similar.

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

Ejemplo de definición de tamaño complejo con políticas de escalado

El comportamiento de colapso de SizeDefinition pueden controlarse mediante el uso de políticas de escalado en la cinta de opciones.

El ScalingPolicy elemento contiene una manifestación de ScalingPolicy.IdealSizes y Scale declaraciones que especifican las preferencias de diseño adaptativo para uno o varios Grupo elementos cuando se cambia el tamaño de la cinta.

Nota:

Se recomienda encarecidamente que se especifiquen los detalles de la política de escalado de forma que la mayoría, si no todos, Grupo elementos están asociados con Escala elemento donde el dimensionamiento atributo es igual a Popup. De este modo, el marco de trabajo renderiza la cinta en el tamaño más pequeño posible y admite la gama más amplia de dispositivos de visualización, antes de introducir automáticamente un mecanismo de desplazamiento.

El siguiente ejemplo de código muestra un ScalingPolicy manifiesto que especifica ScalingPolicy.IdealSizes SizeDefinition preferencia para cada uno de los cuatro grupos de controles en un Casa pestaña. Además, Escala para influir en el comportamiento de colapso, en orden de tamaño descendente, de cada grupo.

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

Plantillas personalizadas

Si los comportamientos de diseño por defecto y los predefinidos SizeDefinition plantillas no ofrecen la flexibilidad o la compatibilidad necesarias para un escenario de diseño concreto, el marco de trabajo de cinta admite plantillas personalizadas a través de la función Ribbon.SizeDefinitions elemento.

Las plantillas personalizadas pueden declararse de dos formas: un método independiente utilizando el método Ribbon.SizeDefinitions para declarar plantillas reutilizables con nombre o un método en línea que es Grupo-específico.

Plantilla independiente

El siguiente ejemplo de código ilustra una plantilla personalizada básica y reutilizable.

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

Plantilla alineada

Los siguientes ejemplos de código ilustran una plantilla personalizada Básico alineada para un grupo de cuatro botones.

Esta sección de código muestra las declaraciones Command para un grupo de botones. Aquí también se especifican los recursos de imagen grandes y pequeños.

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

Esta sección del código muestra cómo definir los tamaños grande, mediano y pequeño GroupSizeDefinition plantillas para mostrar los cuatro botones en distintos tamaños y disposiciones. El ScalingPolicy declaración para la pestaña define qué plantilla se utiliza para un grupo de controles basándose en el tamaño de la cinta y el espacio requerido por la pestaña activa.

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

Las siguientes imágenes muestran cómo se aplican las plantillas del ejemplo anterior a la interfaz de usuario de la cinta para adaptarse a una disminución del tamaño de la cinta.