Idioma: HTML | XAML

Inicio rápido: definir diseños (aplicaciones de Windows en tiempo de ejecución con C#/VB/C++ y XAML)

Applies to Windows and Windows Phone

Cuando creas una aplicación de Windows en tiempo de ejecución con C++, C# o Visual Basic, dispones de un sistema de diseño flexible que te ayuda a acomodar varios dispositivos y estados de aplicaciones. Con un diseño flexible, puedes hacer que la aplicación tenga un gran aspecto en pantallas con diferentes tamaños de ventana de aplicación, resoluciones, densidades de píxeles y orientaciones. Aquí se describe cómo diseñar una interfaz de usuario que se ajusta automáticamente a diferentes tamaños.

Guía básica: Relación de este tema con los demás. Consulta:

Requisitos previos

En este tema, se supone que puedes crear una aplicación de Windows en tiempo de ejecución básica con C++, C# o Visual Basic. Si quieres obtener instrucciones para crear tu primera aplicación de Windows en tiempo de ejecución, consulta Crear la primera aplicación de la Tienda Windows con C# o Visual Basic.

Instrucciones de interfaz de usuario: (procedimientos recomendados)

Aunque este tema te presenta algunos diseños básicos, existen varias instrucciones de interfaz de usuario que deberías tener en cuenta:

Introducción a los diseños

El diseño es el proceso de cambio de tamaño y ubicación de objetos en la interfaz de usuario. Para colocar objetos visuales, debes ponerlos en un Panel u otro objeto contenedor. El marco de XAML proporciona diversas clases Panel, como Canvas, StackPanel y Grid, que sirven como contenedores y permiten colocar y organizar los elementos de la interfaz de usuario dentro de ellas.

El sistema de diseño de XAML admite diseños tanto fijos como dinámicos. En un diseño fijo, el tamaño y la posición de los elementos están ajustados con dimensiones explícitas. Por ejemplo, puedes utilizar un panel Canvaspara el posicionamiento fijo. Y puedes establecer un tamaño fijo en un elemento independientemente del panel de diseño que contenga. En un diseño dinámico, el tamaño de la interfaz de usuario se ajusta automáticamente a las proporciones (en el caso de las filas y columnas de cuadrícula) o al contenido de los paneles y los controles, o a las diversas resoluciones de pantalla. Para un diseño dinámico, usa, por ejemplo, StackPanel, Grid o VariableSizedWrapGrid.

Diseño fijo

En un diseño fijo, organizas los elementos secundarios en un panel de diseño y especificas sus ubicaciones y tamaños exactos relativos a los elementos primarios. El posicionamiento fijo no implica necesariamente que el tamaño de la pantalla o la ventana de la aplicación será distinto en dispositivos distintos. Si la aplicación requiere un posicionamiento fijo de los elementos de la interfaz de usuario y, al mismo tiempo, ajustar el tamaño de la ventana de la aplicación, puedes diseñar diferentes páginas para diferentes resoluciones de pantalla o puedes ajustar la escala como una alternativa.

Todos los paneles del marco de XAML admiten el posicionamiento fijo, pero Canvas es un ejemplo de panel que solo admite el posicionamiento fijo. Para posicionar un elemento secundario en un Canvas, estableces las propiedades adjuntas Canvas.Left y Canvas.Top del elemento secundario. Cuando usas el diseñador de XAML en Microsoft Visual Studio, estas propiedades se actualizan cuando arrastras el elemento secundario dentro del Canvas en la superficie de diseño.

Diseño dinámico

En un diseño dinámico, la interfaz de usuario se ajusta a diferentes resoluciones de pantalla y tamaños de ventana de la aplicación. Para organizar los elementos secundarios, especificas cómo deberían organizarse unos en relación con otros, y cómo deberían posicionarse con relación a su contenido y a sus elementos primarios. Por ejemplo, puedes organizar los elementos de la interfaz de usuario en un panel y especificar que deberían ajustarse horizontalmente. Para usar el cambio de tamaño automático o proporcional, debes asignar valores a las propiedades Height y Width. Para un diseño dinámico, se recomiendan los siguientes parámetros de configuración:

  • Establece las propiedades Height y Width de los elementos de la interfaz de usuario en Auto. Cuando estos valores se usan para elementos de la interfaz de usuario en el diseño de Grid, el panel Grid rellena la celda que lo contiene. La variación de tamaño Auto se admite para los elementos de interfaz de usuario en general y para los diseños Grid y StackPanel.
  • Para los elementos de interfaz de usuario que contienen texto (elementos de texto), deja sin establecer las propiedades Height y Width, y establece las propiedades MinWidth o MinHeight. Así se evita que el texto se reduzca a un tamaño que resulte imposible de leer porque el contenedor de diseño lo recorta.
  • Para establecer valores proporcionales para los elementos RowDefinition y ColumnDefinition que definen la estructura de celdas de un diseño Grid, usa valores relativos para Height y Width. Por ejemplo, para especificar que una columna sea 5 veces más ancha que la segunda columna en un diseño de dos columnas, usa "*" y "5*" en las propiedades Width de los elementos ColumnDefinition.

Cambio de tamaño proporcional y automático

La variación de tamaño automática se usa para permitir que los controles se ajusten a su contenido, incluso si el contenido cambia de tamaño. La variación de tamaño proporcional se usa para distribuir espacio disponible entre las filas y columnas de una cuadrícula en proporciones ponderadas. En XAML, los valores de variación de tamaño proporcional se expresan como * (o n* en una variación de tamaño proporcional ponderada). Por ejemplo, si tienes una cuadrícula con cuatro columnas, podrías establecer el ancho de las columnas en los valores que se muestran a continuación:

Columna_1AutoLa columna se ajustará a su contenido.
Columna_2*Después de que se calculen las columnas Auto, la columna recibe parte del ancho restante. Columna_2 será la mitad de ancha que Columna_4.
Columna_3AutoLa columna se ajustará a su contenido.
Columna_42*Después de que se calculen las columnas Auto, la columna recibe parte del ancho restante. Columna_4 será el doble de ancha que Columna_2.

 

Controles de panel

Entre los paneles de diseño integrados en XAML se incluye el panel Canvas para un diseño fijo, y algunos otros paneles para las diferentes técnicas de diseño dinámico.

Canvas

El panel Canvas posiciona sus elementos secundarios con puntos de coordenadas fijos. Para especificar los puntos en los elementos secundarios se establecen las propiedades adjuntas Canvas.Left y Canvas.Top de cada elemento. Durante el diseño, el objeto Canvas primario usa su lógica de clase para leer los valores de estas propiedades adjuntas en sus elementos secundarios y usa los valores durante el pase de diseño Arrange.


<Canvas Background="Black">
  <Rectangle Canvas.Left="200" Canvas.Top="100"
    Fill="Red" Width="350" Height="350" />
</Canvas>

El XAML anterior genera resultados similares a esta ilustración:

ejemplo de diseño

Con un posicionamiento fijo puedes crear superposiciones de objetos, en las que un objeto se dibujará encima de otro. Para poder ajustar fácilmente el orden de dibujo de los elementos secundarios así como permitir cambiar el orden de dibujo en tiempo de ejecución, Canvas también admite Canvas.ZIndex. Propiedad adjunta que puedes establecer en cada uno de los elementos secundarios. Los valores de Canvas.ZIndex más altos se dibujan los últimos y, por lo tanto, se dibujan sobre otros elementos que compartan el mismo espacio y se superponen. Para obtener más información, consulta Canvas.ZIndex. Observa que el valor de alfa (transparencia) se respeta por lo que, aunque los elementos se superpongan, el contenido que se muestra en las áreas superpuestas podría mezclarse si el valor de alfa del que está situado más arriba no es el máximo.

Usa el panel Canvas con moderación. Aunque resulta conveniente poder controlar con precisión la posición de los elementos de la interfaz de usuario en algunos escenarios, un panel de diseño con una posición fija puede hacer que el área de la interfaz de usuario sea menos adaptativa a los cambios generales de tamaño de la ventana de la aplicación. El cambio de tamaño de la ventana de la aplicación podría ser el resultado de un cambio de orientación del dispositivo, de la división de las ventanas de la aplicación o de un cambio de monitor, entre otros escenarios.

StackPanel

El panel StackPanel es un sencillo panel de diseño que organiza los elementos secundarios en una única línea que se puede orientar horizontal o verticalmente. Puedes usar la propiedad Orientation para especificar la dirección de los elementos secundarios. El valor predeterminado de Orientation es Vertical. El uso de controles de StackPanel es típico en escenarios donde quieres organizar una pequeña subsección de la interfaz de usuario en la página.

El siguiente XAML muestra cómo crear un StackPanel vertical de elementos.


<StackPanel Margin="20">
  <Rectangle Fill="Red" Width="100" Height="100" Margin="10" />
  <Rectangle Fill="Blue" Width="100" Height="100" Margin="10" />
  <Rectangle Fill="Green" Width="100" Height="100" Margin="10" />
  <Rectangle Fill="Purple" Width="100" Height="100" Margin="10" />
</StackPanel>

El XAML anterior genera resultados similares a la siguiente ilustración.

ejemplo de diseño

Anidar paneles para usar más de un StackPanel es una técnica de diseño habitual. Por ejemplo, puedes crear una barra lateral y un área de contenido principal con un StackPanel horizontal, y apilar los elementos en el contenido principal con un StackPanel vertical. Ten en cuenta que si anidas los paneles, solo el panel primario más inmediato interpretará las propiedades adjuntas de los elementos de la interfaz de usuario que especifican características de diseño a un elemento primario.

Cuadrícula

El panel Grid permite organizar los controles en diseños de varias filas y varias columnas. Puedes especificar las definiciones de fila y columna de un panel Grid con las propiedades RowDefinitions y ColumnDefinitions que se declaran dentro del elemento Grid (usa la sintaxis del elemento de propiedad en XAML). Puedes colocar objetos en celdas específicas de la Grid a través de las propiedades adjuntas Grid.Column y Grid.Row. Puedes distribuir el espacio dentro de una columna o una fila usando variación de tamaño Autoo proporcional. El contenido se puede distribuir a lo largo de varias filas y columnas con las propiedades adjuntas Grid.RowSpan y Grid.ColumnSpan.

El siguiente ejemplo de XAML muestra cómo crear una Grid con tres filas y dos columnas. La altura de las filas primera y tercera es lo suficientemente grande como para contener el texto. La altura de la segunda fila rellena el resto de altura que queda disponible. El ancho de las columnas se divide por igual dentro del ancho disponible del contenedor.


<Grid Margin="12,0,12,0">

  <Grid.RowDefinitions>
    <RowDefinition Height="auto" />
    <RowDefinition />
    <RowDefinition Height="auto" />
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>

  <TextBox Text="1st row 1st column" FontSize="60" Grid.Column="0" Grid.Row="0" />
  <TextBox Text="3rd row 1st column" FontSize="60" Grid.Column="0" Grid.Row="2" />

  <Button Content="1st row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="0" />
  <Button Content="3rd row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="2" />

</Grid>

Este código produce un resultado similar a la siguiente ilustración.

ejemplo de diseño

VariableSizedWrapGrid

VariableSizedWrapGrid proporciona un panel de diseño de tipo cuadrícula en el que cada mosaico o celda puede tener un tamaño variable según el contenido. En una VariableSizedWrapGrid, los elementos se organizan en filas o en columnas que 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 realizar el ajuste. Las dimensiones de celda se especifican con ItemHeight y ItemWidth (valores en píxeles). Los elementos secundarios pueden usar las propiedades adjuntas VariableSizedWrapGrid.ColumnSpan y VariableSizedWrapGrid.RowSpan (valores como recuentos de celdas) para ajustar cuántas celdas variables debe usar el elemento secundario (el valor predeterminado es 1). Para obtener más información, consulta VariableSizedWrapGrid.

Paneles para ItemsControl

WrapGrid y VirtualizingStackPanel son paneles para fines especiales que solo se pueden usar para mostrar elementos en un ItemsControl. Para obtener más información, consulta WrapGrid. ItemsStackPanel y ItemsWrapGrid son paneles similares con restricciones sobre dónde se pueden usar (un ItemsControl con varios elementos).

Notas sobre migración:  Windows Presentation Foundation (WPF) tiene una clase VirtualizingStackPanel que se puede usar como panel de uso general sin restricciones sobre dónde se puede usar. Si vas a migrar código XAML que usaba VirtualizingStackPanel, tendrás que cambiar el control de datos de los elementos para que sea ListView y, después, se producirá la virtualización de los elementos de tu lista gracias al VirtualizingStackPanel contenido en la plantilla predeterminada.

Temas relacionados

Canvas
StackPanel
Grid
VariableSizedWrapGrid
Guía básica para crear aplicaciones con C#, C++ o VB
Inicio rápido: agregar controles de diseño
Agregar controles ListView, SemanticZoom y otros controles de datos

 

 

Mostrar:
© 2014 Microsoft