Tutorial: Crear un diseo dinmico

[Esta documentacin se proporciona solo para fines preliminares y est sujeta a cambios en versiones posteriores. Se incluye temas en blanco como marcadores]. En posicin dinmica, los elementos secundarios se organizan especificando cmo deberan estar organizados y cmo deberan ajustarse en relacin con sus elementos primarios. Tambin puede establecer ventanas y controles para que se expandan automticamente cuando su contenido se expanda. Para obtener ms informacin, veaDiseo con posicin absoluta y dinmica. WPF Designer para Visual Studio proporciona muchos controles Panel que admiten la posicin dinmica. Los controles de panel se pueden combinar agregando un control de panel como elemento secundario de otro control. Puede usar los siguientes controles de panel para colocar los elementos en sus aplicaciones dinmicamente: Grid DockPanel WrapPanel StackPanel UniformGrid

Importante

Siempre que sea posible, es preferible usar un diseo dinmico. Los diseos dinmicos son los ms flexibles, contenido, por ejemplo, cuando se localizan y permiten que el usuario final pueda controlar al mximo el ent absoluto, vea Tutorial: Crear un diseo basndose en la posicin absoluta.
En este tutorial realizar las siguientes tareas: Crear una aplicacin de WPF. Configurar el control de panel Grid predeterminado. Agregar controles al panel. Probar el diseo. En la ilustracin siguiente se muestra la apariencia que tendr la aplicacin.

Note

Los cuadros de dilogo y comandos de men que se ven pueden diferir de los descritos en la Ayuda, en funci edicin activos. Para cambiar la configuracin, elija Importar y exportar configuraciones en el men Herr vea Valores de configuracin de Visual Studio.

Requisitos previos
Necesita los componentes siguientes para completar este tutorial:

Crear el proyecto
El primer procedimiento es crear el proyecto para la aplicacin.

Para crear el proyecto

1. Cree un nuevo proyecto de aplicacin de WPF en Visual Basic o en Visual C# denominado DynamicLayout. Para obtener ms informacin, vea Cmo: Crear un nuevo proyecto de aplicacin de WPF.

Note

En este tutorial, no escribir ningn cdigo. El lenguaje que elija para el proyecto ser el lenguaje que subyacente de la aplicacin.
2. 3. 4. MainWindow.xaml se abrir en WPF Designer. En la Vista de diseo, seleccione la ventana. Para obtener ms informacin, vea Cmo: Seleccionar y mover elementos en la superficie de diseo. En la ventana Propiedades, defina las propiedades siguientes para Window:

Propiedad. Ancho Alto SizeToContent

Tip

Valor 400 200

WidthAndH

Tambin puede utilizar el asa de ajuste de tamao para cambiar el tamao de la ventana en la Vista d
5. En el men Archivo, haga clic en Guardar todo.

Configurar el control de panel de cuadrcula predeterminado

De forma predeterminada, la nueva aplicacin de WPF contiene un Window con un panel Grid. En este procedimiento se agregan cuatro filas y cuatro columnas a la cuadrcula. El ancho de cada columna se establece en *, para que el ancho disponible est dividido uniformemente entre las cuatro columnas. El alto de tres de las filas se establece en Auto, para que se dimensionen para ajustar el contenido. El alto de una de las filas se establece en *, para que use el alto disponible restante.

Para agregar un control de panel

1. 2. En la Vista de diseo, seleccione la cuadrcula. (Opcional) En la ventana Propiedades, busque la propiedad ShowGridLines y active la casilla. Cuando la aplicacin se ejecute, las lneas de la cuadrcula aparecern en la ventana. Esto resulta til para depurar, pero debe desactivar la casilla de la propiedad ShowGridLines para el cdigo de produccin. En la ventana Propiedades, busque la propiedad ColumnDefinitions y haga clic en el botn de puntos suspensivos en la columna del valor de propiedad. Aparecer el cuadro de dilogo Editor de colecciones. a. Haga clic en Agregar cuatro veces para agregar cuatro columnas. b. Establezca la propiedad Width de la primera fila en Auto. c. Establezca la propiedad Width de la segunda fila en *. d. Establezca la propiedad Width de la tercera fila en Auto. e. Establezca la propiedad Width de la cuarta fila en Auto. f. Haga clic en Aceptar para cerrar el Editor de colecciones y volver a WPF Designer. Ahora hay cuatro columnas en la cuadrcula, pero slo aparece una columna. Las columnas cuya propiedad Width est establecida en Auto se ocultan temporalmente porque no tienen ningn contenido. Para el propsito de este tutorial, esto est bien. Pero para evitarlo en el futuro, puede utilizar el ajuste del tamao mediante asterisco mientras trabaja, y cambiar a Auto cuando haya terminado. En la ventana Propiedades, busque la propiedad RowDefinitions y haga clic en el botn de puntos suspensivos en la columna del valor de propiedad. Aparecer el cuadro de dilogo Editor de colecciones. a. Haga clic en Agregar cuatro veces para agregar cuatro filas. b. Establezca la propiedad Height de la primera fila en Auto. c. Establezca la propiedad Height de la segunda fila en Auto. d. Establezca la propiedad Height de la tercera fila en *. e. Establezca la propiedad Height de la cuarta fila en Auto. f. Haga clic en Aceptar para cerrar el Editor de colecciones y volver a WPF Designer. Ahora hay cuatro filas en la cuadrcula, pero slo aparece una fila. Las filas cuya propiedad Height est establecida en Auto se ocultan temporalmente porque no tienen ningn contenido. Para el propsito de este tutorial, esto est bien. Pero para evitarlo en el futuro, puede utilizar el ajuste del tamao mediante asterisco mientras trabaja, y cambiar a Auto cuando haya terminado.

3.

4.

5.

En el men Archivo, haga clic en Guardar todo.

Agregar controles al panel

A continuacin va a agregar controles al panel y a usar las propiedades adjuntas Column y Row de Grid para colocarlos dinmicamente.

Para agregar controles al panel

1. 2. En el Cuadro de herramientas, en el grupo Comn, arrastre un control Label hasta Grid. En la ventana Propiedades, establezca las siguientes propiedades de Label:

Propiedad. Content Grid.Column Grid.ColumnSpan Grid.Row Grid.RowSpan Ancho Alto HorizontalAlignment VerticalAlignment Margin
3. 4. En el Cuadro de herramientas, en el grupo Comn, arrastre un control Label hasta Grid. En la ventana Propiedades, establezca las siguientes propiedades de Label:

Valor

Nombre: 0 1 0 1 Auto 23 Stretch Top

20,20,10

Propiedad. Content Grid.Column Grid.ColumnSpan Grid.Row

Valor

Password 0 1 1

Grid.RowSpan Ancho Alto HorizontalAlignment VerticalAlignment Margin

5. 6. En el Cuadro de herramientas, en el grupo Comn, arrastre un control TextBox hasta Grid. En la ventana Propiedades, establezca las siguientes propiedades de TextBox:

1 Auto 23 Stretch Top

20,10,10

Propiedad. Grid.Column Grid.ColumnSpan Grid.Row Grid.RowSpan Ancho Alto HorizontalAlignment VerticalAlignment Margin
7. 8. En el Cuadro de herramientas, en el grupo Comn, arrastre un control TextBox hasta Grid. En la ventana Propiedades, establezca las siguientes propiedades de TextBox:

Valor 1 3 0 1 Auto Auto Stretch Stretch

10,20,20

Propiedad. Grid.Column Grid.ColumnSpan Grid.Row

Valor 1 3 1

Grid.RowSpan Ancho Alto HorizontalAlignment VerticalAlignment Margin

9. En el Cuadro de herramientas, en el grupo Comn, arrastre un control Button hasta Grid. 10. En la ventana Propiedades, establezca las siguientes propiedades de Button:

1 Auto Auto Stretch Stretch

10,10,20

Propiedad. Content Grid.Column Grid.ColumnSpan Grid.Row Grid.RowSpan Ancho Alto HorizontalAlignment VerticalAlignment Margin
11. En el Cuadro de herramientas, en el grupo Comn, arrastre un control Button hasta Grid. 12. En la ventana Propiedades, establezca las siguientes propiedades de Button:

Valor OK 2 1 3 1 75 23

Stretch

Stretch

10,10,

Propiedad. Content Grid.Column

Valor

Cance 3

Grid.ColumnSpan Grid.Row Grid.RowSpan Ancho Alto HorizontalAlignment VerticalAlignment Margin

13. En el men Archivo, haga clic en Guardar todo.

1 3 1 75 23

Stretch

Stretch

6,10,2

Probar el diseo
Finalmente se ejecuta la aplicacin y se comprueba que el diseo cambia dinmicamente a medida que el usuario cambia el tamao de la ventana y a medida que el contenido de los controles se expande ms all del tamao de los controles.

Para probar el diseo

1. En el men Depurar, haga clic en Iniciar depuracin. La aplicacin se inicia y aparece la ventana. 2. En el cuadro de texto Nombre, escriba de forma aleatoria para rellenar el cuadro de texto. Al llegar al fin del cuadro de texto, el cuadro de texto y la ventana se expandirn para ajustar el texto que est escribiendo. 3. Cierre la ventana. 4. En el men Depurar, haga clic en Iniciar depuracin. La aplicacin se inicia y aparece la ventana. 5. Cambie el tamao de la ventana tanto vertical como horizontalmente. Las columnas se expandirn uniformemente para usar el espacio disponible. Los cuadros de texto se ajustan para rellenar las columnas expandidas. Tres filas mantienen su alto y la cuarta fila se expandir para usar el espacio disponible. 6. Cierre la ventana. 7. En la Vista de diseo, seleccione la etiqueta Nombre. 8. En la ventana Propiedades, cambie la propiedad Content a Please enter your full name here:. En la Vista de diseo, la etiqueta se expande para ajustar el texto. 9. En el men Depurar, haga clic en Iniciar depuracin. La aplicacin se inicia y aparece la ventana. El control de etiqueta muestra el texto ms largo. 10. Cierre la ventana.

Resultado final
A continuacin se muestra el archivo MainWindow.xaml completo: XAML <Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="200" Width="400" SizeToContent="WidthAndHeight"> <Grid ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Label Grid.Column="0" Grid.Row="0" Margin="20,20,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label1">Name:</Label> <Label Grid.Column="0" Grid.Row="1" Margin="20,10,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label2">Password:</Label> <TextBox Grid.Column="1" Grid.Row="0" Margin="10,20,20,10" Grid.ColumnSpan="3" Height="Auto" VerticalAlignment="Stretch" Name="TextBox1" /> <TextBox Grid.Column="1" Grid.Row="1" Margin="10,10,20,10" Grid.ColumnSpan="3" Name="TextBox2" /> <Button Grid.Column="2" Grid.Row="3" Margin="10,10,6,20" Width="75" Height="23" HorizontalAlignment="Stretch" Name="Button1">OK</Button> <Button Grid.Column="3" Grid.Row="3" Margin="6,10,20,20" Width="75" Height="23" Name="Button2">Cancel</Button> </Grid> </Window>

Pasos siguientes
Puede realizar pruebas para aprender a lograr diferentes efectos con diseos dinmicos reemplazando el panel Grid de este tutorial por los paneles siguientes:

DockPanel WrapPanel StackPanel UniformGrid