Tutorial: Crear un diseño basándose en la posición absoluta

En la posición absoluta, los elementos secundarios se organizan especificando sus ubicaciones exactas con relación a su elemento primario. Por ejemplo, los controles se organizan en un panel especificando las coordenadas izquierda y superior de los controles con relación al panel. Para obtener más información, vea Diseño con posición absoluta y dinámica.

WPF Designer for Visual Studio proporciona un control de panel Canvas que admite la posición absoluta. Puede utilizar el control de panel Canvas para colocar los elementos en posición absoluta en las aplicaciones.

Importante

Siempre que sea posible, es preferible usar un diseño dinámico. Los diseños dinámicos son los más flexibles, se adaptan a los cambios realizados en el contenido, por ejemplo, cuando se localizan y permiten que el usuario final pueda controlar al máximo el entorno. Para ver ejemplos de diseños dinámicos, vea Tutorial: Crear una aplicación cuyo tamaño pueda ser modificado mediante WPF Designer y Tutorial: Crear un diseño dinámico.

En este tutorial realizará las siguientes tareas:

• Crear una aplicación de WPF.

• Agregar un control de panel Canvas a la aplicación.

• Agregar controles al panel.

• Probar el diseño.

En la ilustración siguiente se muestra la apariencia que tendrá la aplicación.

Nota

Los cuadros de diálogo y comandos de menú que se ven pueden diferir de los descritos en la Ayuda, en función de los valores de configuración o de edición activos. Para cambiar la configuración, elija la opción Importar y exportar configuraciones del menú Herramientas. Para obtener más información, vea Trabajar con valores de configuración.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

• Visual Studio 2010

Crear el proyecto

El primer procedimiento es crear el proyecto para la aplicación.

Para crear el proyecto

1. Cree un nuevo proyecto de aplicación de WPF en Visual Basic o en Visual C# denominado AbsoluteLayout. Para obtener más información, vea Cómo: Crear un nuevo proyecto de aplicación de WPF.

   Nota

   En este tutorial, no escribirá ningún código. El lenguaje que elija para el proyecto será el lenguaje que se utilice para las páginas de código subyacente de la aplicación.

   MainWindow.xaml se abre en WPF Designer.

2. En la Vista de diseño, seleccione la ventana. Para obtener más información, vea Cómo: Seleccionar y mover elementos en la superficie de diseño.

3. En la ventana Propiedades, establezca las siguientes propiedades de Window:

   Propiedad	Valor
   Width	400
   Height	200

   Sugerencia
   También puede utilizar el asa de ajuste de tamaño para cambiar el tamaño de la ventana en la Vista de diseño.

4. (Opcional) Para bloquear el tamaño de la ventana, utilice uno de los métodos siguientes:

   1. En la ventana Propiedades, defina la siguiente propiedad para Window:

      Propiedad	Valor
      ResizeMode	NoResize

   2. En la ventana Propiedades, establezca las siguientes propiedades de Window:

      Propiedad	Valor
      MinWidth	400
      MinHeight	200
      MaxWidth	400
      MaxHeight	200

5. En el menú Archivo, haga clic en Guardar todo.

Agregar un control de panel

De forma predeterminada, la nueva aplicación de WPF contiene un Window con un panel Grid. Para crear un diseño basado en la posición absoluta, debe utilizar un panel Canvas. En este procedimiento, quitará la clase Grid predeterminada y agregará una clase Canvas.

Para agregar un control de panel

1. En la Vista de diseño, seleccione la cuadrícula.

2. Presione la tecla SUPR para eliminar Grid.

3. En el Cuadro de herramientas, en el grupo Controles, arrastre un control Canvas hasta Window.

4. En la ventana Propiedades, establezca la propiedad Height de Canvas en Automático.

   Canvas se expande para rellenar el alto de Window.

5. En la ventana Propiedades, establezca la propiedad Width de Canvas en Automático.

   Canvas se ajusta para rellenar el ancho de Window.

6. En el menú Archivo, haga clic en Guardar todo.

Agregar controles al panel

A continuación va a agregar controles al panel y a usar las propiedades adjuntas Left y Top de Canvas para colocarlos en posición absoluta.

Para agregar controles al panel

1. En el Cuadro de herramientas, en el grupo Común, arrastre un control Label hasta Canvas.

2. En la ventana Propiedades, establezca las siguientes propiedades de Label:

   Propiedad	Valor
   Content	Name:
   Canvas.Left	20
   Canvas.Top	20
   Width	120
   Height	23

3. En el Cuadro de herramientas, en el grupo Común, arrastre un control Label hasta Canvas.

4. En la ventana Propiedades, establezca las siguientes propiedades de Label:

   Propiedad	Valor
   Content	Password:
   Canvas.Left	20
   Canvas.Top	60
   Width	120
   Height	23

5. En el Cuadro de herramientas, en el grupo Común, arrastre un control TextBox hasta Canvas.

6. En la ventana Propiedades, establezca las siguientes propiedades de TextBox:

   Propiedad	Valor
   Canvas.Left	160
   Canvas.Top	20
   Width	200
   Height	23

7. En el Cuadro de herramientas, en el grupo Común, arrastre un control TextBox hasta Canvas.

8. En la ventana Propiedades, establezca las siguientes propiedades de TextBox:

   Propiedad	Valor
   Canvas.Left	160
   Canvas.Top	60
   Width	200
   Height	23

9. En el Cuadro de herramientas, en el grupo Común, arrastre un control Button hasta Canvas.

10. En la ventana Propiedades, establezca las siguientes propiedades de Button:

    Propiedad	Valor
    Content	OK
    Canvas.Left	196
    Canvas.Top	120
    Width	75
    Height	23

11. En el Cuadro de herramientas, en el grupo Común, arrastre un control Button hasta Canvas.

12. En la ventana Propiedades, establezca las siguientes propiedades de Button:

    Propiedad	Valor
    Content	Cancel
    Canvas.Left	283
    Canvas.Top	120
    Width	75
    Height	23

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

Probar el diseño

Finalmente, se ejecuta la aplicación y se comprueba que los controles respetan la posición absoluta.

Para probar el diseño

1. (Opcional) Si ha bloqueado el tamaño de la ventana en un paso anterior, debe desbloquearlo para realizar este procedimiento. En la ventana Propiedades, establezca las siguientes propiedades de Window:

   Propiedad	Valor
   MinWidth	0
   MinHeight	0
   MaxWidth	Infinity
   MaxHeight	Infinity
   ResizeMode	CanResize

2. En el menú Depurar, haga clic en Iniciar depuración.

   La aplicación se inicia y aparece la ventana.

3. Cambie el tamaño de la ventana.

   Los controles respetan la posición absoluta y no cambian el tamaño ni la posición.

4. Cierre la ventana.

Resultado final

A continuación se muestra el archivo MainWindow.xaml completo:

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="200" Width="400" ResizeMode="CanResize" Name="MainWindow" MinWidth="0" MinHeight="0" MaxWidth="Infinity" MaxHeight="Infinity">
    <Canvas Height="Auto" Name="Canvas1" Width="Auto">
        <Label Canvas.Left="20" Canvas.Top="20" Height="23" Width="120" Name="Label1">Name:</Label>
        <Label Canvas.Left="20" Canvas.Top="60" Height="23" Width="120" Name="Label2">Password:</Label>
        <TextBox Canvas.Left="160" Canvas.Top="20" Height="23" Width="200" Name="TextBox1" />
        <TextBox Canvas.Left="160" Canvas.Top="60" Height="23" Width="200" Name="TextBox2" />
        <Button Canvas.Left="196" Canvas.Top="120" Height="23" Width="75" Name="Button1">OK</Button>
        <Button Canvas.Left="283" Canvas.Top="120" Height="23" Width="75" Name="Button2">Cancel</Button>
    </Canvas>
</Window>

Vea también

Tareas

Cómo: Crear un diseño basándose en la posición absoluta

Conceptos

Alineación en WPF Designer

Sistema de diseño

Información general sobre WPF y Silverlight Designer

Otros recursos

Tutoriales sobre diseño