Diseño y cambio de tamaño de la cinta

La cinta usa el diseño adaptable y el cambio de tamaño para mostrar el diseño del control óptimo para diversos tamaños de la ventana. La cinta proporciona el comportamiento de cambio de tamaño predeterminado que es adecuado para muchos escenarios comunes. La Cinta de Microsoft para WPF también proporciona un conjunto de opciones que se pueden usar para especificar un comportamiento de cambio de tamaño personalizado.

Información general del cambio de tamaño de la cinta

El control de la cinta cambia de tamaño dinámicamente cuando cambia el ancho de la ventana de la aplicación. En las ilustraciones siguientes se muestra cómo la cinta cambia el tamaño mientras la ventana de la aplicación se hace más estrecha.

Cuando la ventana tiene suficiente espacio disponible, cada grupo de la pestaña se muestra con su mayor tamaño especificado.

Cuando la ventana se estrecha más, los grupos Portapapeles e Insertar se muestran con su tamaño más pequeño.

Mientras la ventana se estrecha aún más, los grupos Portapapeles, Insertar y Párrafo se muestran en su estado contraído. Cuando un grupo se contrae en un botón desplegable, se muestra la variación más grande del tamaño cuando se abre el menú desplegable.

Comportamiento de cambio de tamaño predeterminado

De forma predeterminada, los paneles que componen la cinta usan la variación de tamaño proporcional para mostrar la variación del control más grande posible que puede ajustarse al espacio disponible. Cuando el ancho de la ventana cambia, se cambia el tamaño de los grupos de controles cíclicamente de derecha a izquierda. En las referencias culturales que se distribuyen de derecha a izquierda, se cambian el tamaño de los grupos de controles cíclicamente de izquierda a derecha.

La variación de tamaño proporcional es una convención por la que el espacio disponible se divide por igual entre los elementos que necesitan ocupar el espacio. El nombre se deriva del hecho de que la variación de tamaño proporcional se especifica con un asterisco (*) en XAML.

Cuando no hay limitaciones de espacio, cada grupo muestra todos los controles con el tamaño más grande. A medida que la ventana se reduce, cada grupo cambia el tamaño de los controles para mostrar su variación más pequeña. Cuando no hay espacio suficiente para mostrar cada grupo con su variación de control más pequeña, los grupos se contraen en botones desplegables.

Especificar el comportamiento de cambio de tamaño personalizado

Para el diseño de cintas complejas, normalmente se debe especificar exactamente cómo debe cambiar el tamaño de la cinta cuando cambia el tamaño de la ventana. Puede especificar el comportamiento de cambio de tamaño en el nivel de control, de grupo o de pestaña. Si la configuración de cambio de tamaño personalizada no se especifica en un nivel determinado, se usa el comportamiento predeterminado.

En la tabla siguiente se muestra cómo especificar la configuración de cambio de tamaño personalizada en varios niveles.

Cambio de tamaño de nivel de control

Las instrucciones de la cinta especifican tres variaciones de tamaño estándar para los controles de cinta: grande, mediano y pequeño. Cada control tiene una propiedad ControlSizeDefinition que se establece en un objeto RibbonControlSizeDefinition. El objeto RibbonControlSizeDefinition tiene una propiedad ImageSize que especifica si se va a mostrar la imagen grande o la pequeña, y una propiedad IsLabelVisible que especifica si la etiqueta del control es visible.

En la siguiente tabla se muestran los valores de propiedad de RibbonControlSizeDefinition para los tres tamaños de control estándar.

En el ejemplo siguiente se muestran tres declaraciones de RibbonControlSizeDefinition que corresponden a los controles grandes, medianos y pequeños.

<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />

Grupos de controles

Los controles relacionados de la cinta se pueden agrupar juntos en RibbonControlGroup. Cuando se cambia el tamaño de un grupo de controles, RibbonControlSizeDefinition se aplica a todos los controles de RibbonControlGroup. RibbonControlGroup se coloca en RibbonGroup como si fuera un control.

Cambio de tamaño de nivel de grupo

Cuando se cambia el tamaño de la cinta, se cambia el tamaño de los grupos de una pestaña con la lógica integrada de RibbonGroupItemsPanel, la lógica de cambio de tamaño definida por el usuario o una combinación de ambas. De forma predeterminada, RibbonGroupItemsPanel cambia el tamaño de los controles del grupo para mostrar la variación posible más grande del control que cabrá en el espacio disponible. Si se especifica, se cambia el tamaño de los grupos de una pestaña mediante una combinación de GroupSizeReductionOrder, que especifica el orden en que se cambia el tamaño de los grupos, y la propiedad RibbonGroup.GroupSizeDefinitions, que especifica las distintas configuraciones de tamaño posibles para el grupo.

En el ejemplo siguiente se muestra GroupSizeDefinitions para el grupo de Portapapeles mostrado anteriormente.

<ribbon:RibbonGroup.GroupSizeDefinitions>
  <ribbon:RibbonGroupSizeDefinition>
    <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
    <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
    <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
  </ribbon:RibbonGroupSizeDefinition>
  <ribbon:RibbonGroupSizeDefinition>
    <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
    <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
    <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
  </ribbon:RibbonGroupSizeDefinition>
  <ribbon:RibbonGroupSizeDefinition IsCollapsed="True" />
</ribbon:RibbonGroup.GroupSizeDefinitions>

La propiedad GroupSizeDefinitions contiene una colección de objetos RibbonGroupSizeDefinition, cada uno de los cuales especifica una configuración posible para el grupo. Cuando se cambia el tamaño de la cinta, ItemsPanel determina qué RibbonGroupSizeDefinition se va a usar para ajustar todos los controles en el espacio disponible. A continuación, cambia el tamaño de los controles tal y como especifican los objetos RibbonControlSizeDefinition de la RibbonGroupSizeDefinition elegida. Las definiciones del tamaño del control se aplican a los controles del grupo en orden secuencial.

Las instrucciones de la cinta manifiestan que cada grupo debe especificar al menos dos variantes de tamaño predefinidas: una variante grande y una variante contraída. Cuando RibbonGroup ya no puede ajustar los controles con el tamaño disponible, el grupo se contrae en un botón desplegable. Cuando un grupo está contraído, la variante especificada más grande se muestra al abrir el botón desplegable. En la tercera ilustración mostrada anteriormente, el grupo de Portapapeles se contrae y su variante más grande se muestra en el botón desplegable.

Establezca la propiedad IsCollapsed en true para especificar que un grupo se debe cambiar de tamaño a un botón desplegable contraído. Dado que un grupo contraído muestra siempre la variante más grande cuando se abre, no especifique una colección de objetos RibbonControlSizeDefinition cuando establezca la propiedad IsCollapsed. Si se especifica una colección RibbonControlSizeDefinition, se omite la propiedad IsCollapsed.

La propiedad GroupSizeDefinitions del ejemplo se demuestra en las ilustraciones mostradas anteriormente.

• En la primera ilustración mostrada anteriormente, la primera RibbonGroupSizeDefinition se aplica al grupo Portapapeles. Los tres objetos RibbonControlSizeDefinition se aplican a los tres botones por orden y especifican los tamaños de botón grande, mediano y mediano.

• En la segunda ilustración, la ventana tiene menos espacio disponible, por lo que la segunda RibbonGroupSizeDefinition se aplica al grupo Portapapeles. Los objetos RibbonControlSizeDefinition especifican los tamaños de botón como grande, pequeño y pequeño.

• En la tercera ilustración, se aplica la última RibbonGroupSizeDefinition. En lugar de especificar los tamaños de los controles, esta especifica que el grupo está contraído.

Cambio de tamaño de nivel de grupo mediante un ItemsPanel personalizado

Si no puede lograr el diseño deseado al usar el cambio de tamaño predeterminado o al especificar GroupSizeDefinitions, puede reemplazar el ItemsPanel predeterminado por un panel personalizado. Por ejemplo, el grupo de Fuente mostrado anteriormente contiene varios grupos de botones, cada uno incluido en RibbonControlGroup. Como se indicó anteriormente, RibbonControlGroup se coloca en RibbonGroup como si fuera un único control. Como resultado, el grupo de Fuente no cambia de tamaño de una forma útil si se usa el panel predeterminado. Para lograr el diseño que se muestra, el RibbonGroupItemsPanel predeterminado se reemplaza por un WrapPanel estándar.

En el ejemplo siguiente se muestra cómo usar un WrapPanel como ItemsPanel de RibbonGroup.

<ribbon:RibbonGroup Header="Font" Name="Font" SmallImageSource="Images\FontColor16.png">
  <ribbon:RibbonGroup.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel Orientation="Horizontal" MaxWidth="300" />
    </ItemsPanelTemplate>
  </ribbon:RibbonGroup.ItemsPanel>
…
<!-- Ribbon Group Content -->
…
</ribbon:RibbonGroup>

Cambio de tamaño del nivel de pestaña

Para especificar el cambio de tamaño de nivel de pestaña, se establece RibbonTab.GroupSizeReductionOrder para especificar el orden en el que los grupos cambian el tamaño. Para especificar GroupSizeReductionOrder, cada RibbonGroup debe tener la propiedad Name establecida en un valor único. El orden de reducción se especifica al agregar los nombres de grupo a la lista de orden de reducción.

En el ejemplo siguiente se muestra cómo establecer GroupSizeReductionOrder para la pestaña Página principal mostrada en las ilustraciones anteriores.

<ribbon:RibbonTab Header="Home" 
    GroupSizeReductionOrder="Clipboard, Insert, Insert, Paragraph, Clipboard, Editing, Font, Clipboard" >
    <ribbon:RibbonGroup Header="Clipboard" Name="Clipboard" SmallImageSource="Images/Paste16.png">
        ...  
    </ribbon:RibbonGroup>
    <ribbon:RibbonGroup Header="Font" Name="Font" SmallImageSource="Images\FontColor16.png">
        ...
    </ribbon:RibbonGroup>
    <ribbon:RibbonGroup Header="Paragraph" Name="Paragraph" SmallImageSource="Images/AlignLeft16.png">
        ...
    </ribbon:RibbonGroup>
    <ribbon:RibbonGroup Header="Insert" Name="Insert" SmallImageSource="Images/InsertPicture16.png">
        ...
    </ribbon:RibbonGroup>
    <ribbon:RibbonGroup Header="Editing" Name="Editing" SmallImageSource="Images/Find16.png">
        ...
    </ribbon:RibbonGroup>
</ribbon:RibbonTab>

En la primera ilustración, la cinta tiene suficiente espacio para mostrar cada grupo con la variante de tamaño más grande. En la segunda ilustración, a medida que la ventana se hace más pequeña, los dos primeros grupos especificados en GroupSizeReductionOrder, Portapapeles e Insertar, se muestran en sus variantes más pequeñas. En la tercera ilustración, se han reducido de nuevo el grupo Insertar, el grupo Párrafo y el grupo Portapapeles.

La propiedad ItemsPanel predeterminada para RibbonTab es RibbonGroupsPanel. Este panel es responsable de determinar el tamaño y el diseño disponibles para los grupos de la pestaña, basándose en el orden de reducción de tamaño predeterminado o en el definido por el usuario.

Si la colección GroupSizeReductionOrder contiene un nombre que no aparece en uno de los grupos de la pestaña, se omite ese nombre. Si aparece un nombre de grupo en la colección más veces de las que permiten las variantes de tamaño de ese grupo, este se cambia de tamaño a la variante más pequeña y se omiten las veces adicionales que aparece en la colección. Si no se enumera alguno de los grupos en la colección GroupSizeReductionOrder, se reducen de tamaño de derecha a izquierda, de uno en uno, en el orden cíclico, una vez que se han producido todas las reducciones especificadas por el usuario. Esto significa que, de forma predeterminada, si no se especifica nada en GroupSizeReductionOrder, cada uno de los grupos se reduce de tamaño de derecha a izquierda, de uno en uno, en el orden cíclico. Este cambio de tamaño se invierte en las referencias culturales localizadas cuya distribución es de derecha a izquierda.