Paneles de diseño
Los paneles de diseño son contenedores que te permiten organizar y agrupar elementos de interfaz de usuario en tu aplicación. Los paneles de diseño XAML integrados incluyen RelativePanel, StackPanel, Grid, VariableSizedWrapGrid y Canvas. Aquí se describe cada panel y se muestra cómo usarlo para diseñar elementos de la interfaz de usuario XAML.
Hay varias cosas que se deben tener en cuenta al elegir un panel de diseño:
- Cómo coloca el panel sus elementos secundarios.
- Cómo el panel cambia el tamaño de sus elementos secundarios.
- Cómo se superponen los elementos secundarios en capas entre sí (orden z).
- Número y complejidad de los elementos del panel anidados necesarios para crear el diseño deseado.
Ejemplos
| WinUI 2 Gallery | |
|---|---|
 |
Si tienes instalada la aplicación Galería de WinUI 2, consulta RelativePanel, StackPanel, Grid, VariableSizedWrapGrid y Canvas en acción. |
Propiedades de los paneles
Antes de describir los paneles individuales, repasemos algunas propiedades comunes que tienen todos los paneles.
Propiedades adjuntas del panel
La mayoría de los paneles de diseño XAML usan propiedades adjuntas para permitir que sus elementos secundarios informen al panel primario sobre cómo deben colocarse en la interfaz de usuario. Las propiedades adjuntas usan la sintaxis AttachedPropertyProvider.PropertyName. Si tiene paneles anidados dentro de otros paneles, las propiedades adjuntas en los elementos de la interfaz de usuario que especifican las características de diseño para un elemento primario solo se interpretan mediante el panel primario más inmediato.
Este es un ejemplo de cómo puedes establecer la propiedad adjunta Canvas.Left en un control Button en XAML. Esto informa al lienzo primario de que el botón debe colocarse 50 píxeles efectivos desde el borde izquierdo del lienzo.
<Canvas>
<Button Canvas.Left="50">Hello</Button>
</Canvas>
Para obtener más información sobre las propiedades adjuntas, consulte Introducción a las propiedades adjuntas.
Bordes del panel
Los paneles RelativePanel, StackPanel y Grid definen propiedades de borde que permiten dibujar un borde alrededor del panel sin encapsularlos en un elemento Border adicional. Las propiedades de borde son BorderBrush, BorderThickness, CornerRadius y Padding.
Este es un ejemplo de cómo establecer propiedades de borde en una cuadrícula.
<Grid BorderBrush="Blue" BorderThickness="12" CornerRadius="12" Padding="12">
<TextBlock Text="Hello World!"/>
</Grid>
El uso de las propiedades de borde integradas reduce el recuento de elementos XAML, lo que puede mejorar el rendimiento de la interfaz de usuario de la aplicación. Para obtener más información sobre los paneles de diseño y el rendimiento de la interfaz de usuario, consulta Optimizar el diseño XAML.
RelativePanel
RelativePanel permite diseñar los elementos de la interfaz de usuario al especificar su posición en relación con otros elementos y en relación con el panel. De forma predeterminada, un elemento se coloca en la esquina superior izquierda del panel. Puedes usar RelativePanel con VisualStateManager y AdaptiveTrigger para reorganizar tu interfaz de usuario para distintos tamaños de ventana.
En esta tabla se muestran las propiedades adjuntas que puedes usar para alinear un elemento en relación al panel u otros elementos.
| Alineación del panel | Alineación del mismo nivel | Posición del mismo nivel |
|---|---|---|
| AlignTopWithPanel | AlignTopWith | Above |
| AlignBottomWithPanel | AlignBottomWith | Below |
| AlignLeftWithPanel | AlignLeftWith | LeftOf |
| AlignRightWithPanel | AlignRightWith | RightOf |
| AlignHorizontalCenterWithPanel | AlignHorizontalCenterWith | |
| AlignVerticalCenterWithPanel | AlignVerticalCenterWith |
En este CÓDIGO XAML se muestra cómo organizar elementos en relativePanel.
<RelativePanel BorderBrush="Gray" BorderThickness="1">
<Rectangle x:Name="RedRect" Fill="Red" Height="44" Width="44"/>
<Rectangle x:Name="BlueRect" Fill="Blue"
Height="44" Width="88"
RelativePanel.RightOf="RedRect" />
<Rectangle x:Name="GreenRect" Fill="Green"
Height="44"
RelativePanel.Below="RedRect"
RelativePanel.AlignLeftWith="RedRect"
RelativePanel.AlignRightWith="BlueRect"/>
<Rectangle Fill="Orange"
RelativePanel.Below="GreenRect"
RelativePanel.AlignLeftWith="BlueRect"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignBottomWithPanel="True"/>
</RelativePanel>
El resultado tiene este aspecto.
Estas son algunas cosas que debes tener en cuenta sobre la variación de tamaño de los rectángulos:
- El rectángulo rojo tiene un tamaño explícito de 44 x 44. Se coloca en la esquina superior izquierda del panel, que es la posición predeterminada.
- El rectángulo verde tiene un alto explícito de 44. Su lado izquierdo está alineado con el rectángulo rojo y su lado derecho está alineado con el rectángulo azul, que determina su ancho.
- Al rectángulo naranja no se le asigna ningún tamaño explícito. Su lado izquierdo está alineado con el rectángulo azul. Sus bordes derecho e inferior están alineados con el borde del panel. Su tamaño viene determinado por estas alineaciones y cambiará el tamaño a medida que cambia el tamaño del panel.
StackPanel
StackPanel organiza sus elementos secundarios en una única línea que puede orientarse horizontal o verticalmente. StackPanel suele usarse para organizar una pequeña subsección de la interfaz de usuario en una página.
Puede usar la propiedad Orientation para especificar la dirección de los elementos secundarios. La orientación predeterminada es Vertical.
En el código XAML siguiente se muestra cómo crear un StackPanel vertical de elementos.
<StackPanel>
<Rectangle Fill="Red" Height="44"/>
<Rectangle Fill="Blue" Height="44"/>
<Rectangle Fill="Green" Height="44"/>
<Rectangle Fill="Orange" Height="44"/>
</StackPanel>
El resultado tiene este aspecto.
En stackPanel, si el tamaño de un elemento secundario no se establece explícitamente, se extiende para rellenar el ancho disponible (o alto si la orientación es horizontal). En este ejemplo, no se establece el ancho de los rectángulos. Los rectángulos se expanden para rellenar todo el ancho de StackPanel.
Grid
El panel Grid es compatible con diseños fluidos y te permite organizar los controles en diseños de varias filas y varias columnas. Puedes especificar las filas y columnas de un panel Grid mediante las propiedades RowDefinitions y ColumnDefinitions.
Para colocar los objetos en celdas específicas del panel Grid, usa las propiedades adjuntas Grid.Column y Grid.Row.
Para hacer que el contenido se expanda entre varias filas y columnas, usa las propiedades adjuntas Grid.RowSpan y Grid.ColumnSpan.
En este ejemplo XAML se muestra cómo crear una cuadrícula con dos filas y dos columnas.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="44"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Fill="Red" Width="44"/>
<Rectangle Fill="Blue" Grid.Row="1"/>
<Rectangle Fill="Green" Grid.Column="1"/>
<Rectangle Fill="Orange" Grid.Row="1" Grid.Column="1"/>
</Grid>
El resultado tiene este aspecto.
En este ejemplo, el ajuste de tamaño funciona de la siguiente manera:
- La segunda fila tiene un alto explícito de 44 píxeles efectivos. De forma predeterminada, el alto de la primera fila rellena el espacio que queda.
- El ancho de la primera columna se establece en Automático, por lo que es tan ancho como sea necesario para sus elementos secundarios. En este caso, tiene un ancho de 44 píxeles efectivos para acomodar el ancho del rectángulo rojo.
- No hay otras restricciones de tamaño en los rectángulos, por lo que cada una se extiende para rellenar la celda de cuadrícula en la que está.
Puede distribuir el espacio dentro de una columna o una fila mediante ajuste automático o de ajuste de tamaño de estrella. Use el ajuste de tamaño automático para permitir que los elementos de la interfaz de usuario cambien el tamaño para ajustarse a su contenido o contenedor primario. También puede usar el ajuste de tamaño automático con las filas y columnas de una cuadrícula. Para usar el ajuste de tamaño automático, establezca alto o ancho de los elementos de la interfaz de usuario en Automático.
Se usa el ajuste de tamaño proporcional, también denominado ajuste de tamaño de estrella, para distribuir el espacio disponible entre las filas y columnas de una cuadrícula por proporciones ponderadas. En XAML, los valores de estrella se expresan como * (o n* para el ajuste de tamaño de estrella ponderado). Por ejemplo, para especificar que una columna es 5 veces más amplia que la segunda columna en un diseño de 2 columnas, use "5*" y "*" para las propiedades Width de los elementos ColumnDefinition.
En este ejemplo se combinan el ajuste de tamaño fijo, automático y proporcional en una cuadrícula con 4 columnas.
| Columna | Dimensionamiento | Descripción |
|---|---|---|
| Column_1 | Automático | La columna se ajustará a su contenido. |
| Column_2 | * | Una vez calculadas las columnas Automáticas, la columna obtiene parte del ancho restante. Column_2 será tan ancho como Column_4. |
| Column_3 | 44 | La columna tendrá un ancho de 44 píxeles. |
| Column_4 | 2* | Una vez calculadas las columnas Automáticas, la columna obtiene parte del ancho restante. Column_4 será el doble de ancho que Column_2. |
El ancho de columna predeterminado es "*", por lo que no es necesario establecer explícitamente este valor para la segunda columna.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="44"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Column 1 sizes to its content." FontSize="24"/>
</Grid>
En el diseñador XAML de Visual Studio, el resultado tiene este aspecto.
VariableSizedWrapGrid
VariableSizedWrapGrid es un panel de diseño con estilo Grid en el que las filas o columnas se ajustan automáticamente a una nueva fila o columna cuando se alcanza el valor MaximumRowsOrColumns.
La propiedad Orientation especifica si la cuadrícula agrega sus elementos en filas o columnas antes de encapsular. La orientación predeterminada es Vertical, lo que significa que la cuadrícula agrega elementos de arriba a abajo hasta que una columna está llena y, a continuación, se ajusta a una nueva columna. Cuando el valor es Horizontal, la cuadrícula agrega elementos de izquierda a derecha y, a continuación, se ajusta a una nueva fila.
Las dimensiones de celda se especifican mediante ItemHeight y ItemWidth. Cada celda tiene el mismo tamaño. Si no se especifica ItemHeight o ItemWidth, los primeros tamaños de celda para ajustarse a su contenido y cada otra celda es el tamaño de la primera celda.
Puede usar las propiedades adjuntas VariableSizedWrapGrid.ColumnSpan y VariableSizedWrapGrid.RowSpan para especificar cuántas celdas adyacentes debe rellenar un elemento secundario.
Aquí se muestra cómo usar variableSizedWrapGrid en XAML.
<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue"
VariableSizedWrapGrid.RowSpan="2"/>
<Rectangle Fill="Green"
VariableSizedWrapGrid.ColumnSpan="2"/>
<Rectangle Fill="Orange"
VariableSizedWrapGrid.RowSpan="2"
VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>
El resultado tiene este aspecto.
En este ejemplo, el número máximo de filas de cada columna es 3. La primera columna contiene solo 2 elementos (los rectángulos rojo y azul) porque el rectángulo azul abarca 2 filas. A continuación, el rectángulo verde se ajusta a la parte superior de la columna siguiente.
Lienzo
El panel Canvas posiciona sus elementos secundarios con puntos de coordenadas fijos y no es compatible con diseños fluidos. Especifique los puntos en los elementos secundarios individuales estableciendo las propiedades adjuntas Canvas.Left y Canvas.Top en cada elemento. El objeto Canvas primario lee estas propiedades adjuntas en sus elementos secundarios y usa los valores durante el pase de diseño Arrange.
Los objetos de un canvas se pueden superponer, donde se dibuja un objeto encima de otro objeto. De forma predeterminada, Canvas representa los objetos secundarios en el orden en que se declaran, por lo que el último elemento secundario se representa en la parte superior (cada elemento tiene un índice Z predeterminado de 0). Esto es lo mismo que otros paneles integrados. Sin embargo, Canvas también admite la propiedad adjunta Canvas.ZIndex que puede establecer en cada uno de los elementos secundarios. Puede establecer esta propiedad en el código para cambiar el orden de dibujo de los elementos durante el tiempo de ejecución. El elemento con el valor Canvas.ZIndex más alto dibuja último y, por tanto, dibuja sobre cualquier otro elemento que comparta el mismo espacio o superponga de cualquier manera. Tenga en cuenta que se respeta el valor alfa (transparencia), por lo que incluso si los elementos se superponen, el contenido que se muestra en áreas de superposición podría combinarse si la parte superior tiene un valor alfa no máximo.
Canvas no realiza ningún ajuste de tamaño de sus elementos secundarios. Cada elemento debe especificar su tamaño.
Este es un ejemplo de canvas en XAML.
<Canvas Width="120" Height="120">
<Rectangle Fill="Red" Height="44" Width="44"/>
<Rectangle Fill="Blue" Height="44" Width="44" Canvas.Left="20" Canvas.Top="20"/>
<Rectangle Fill="Green" Height="44" Width="44" Canvas.Left="40" Canvas.Top="40"/>
<Rectangle Fill="Orange" Height="44" Width="44" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>
El resultado tiene este aspecto.
Use el panel Canvas con discreción. Aunque es conveniente poder controlar con precisión las posiciones de los elementos de la interfaz de usuario en algunos escenarios, un panel de diseño colocado fijo hace que ese área de la interfaz de usuario sea menos adaptable a los cambios generales en el tamaño de la ventana de la aplicación. El cambio de tamaño de la ventana de la aplicación puede provenir de los cambios de orientación del dispositivo, dividir ventanas de la aplicación, cambiar monitores y otros escenarios de usuario.
Paneles para ItemsControl
Hay varios paneles de propósito especial que solo se pueden usar como itemsPanel para mostrar elementos en un ItemsControl. Estos son ItemsStackPanel, ItemsWrapGrid, VirtualizingStackPanel y WrapGrid. No puede usar estos paneles para el diseño general de la interfaz de usuario.
Obtener el código de ejemplo
- Muestra de la Galería WinUI 2: consulte todos los controles XAML en un formato interactivo.
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de