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

Actualización: noviembre 2007

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.

Windows Presentation Foundation (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.

Nota 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 la configuración activa o la edición. Para cambiar la configuración, elija la opción Importar y exportar configuraciones en el menú Herramientas. Para obtener más información, vea Valores de configuración de Visual Studio.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

• Visual Studio 2008

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.

   Window1.xaml se abrirá en WPF Designer.

2. En la vista 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, defina las propiedades siguientes para 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 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, defina las siguientes propiedades para 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 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 expande 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 asociadas 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, defina las propiedades siguientes para Label:

   Propiedad	Valor
   Contenido	Nombre:
   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, defina las propiedades siguientes para Label:

   Propiedad	Valor
   Contenido	Contraseña:
   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, defina las propiedades siguientes para 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, defina las propiedades siguientes para 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, defina las propiedades siguientes para Button:

    Propiedad	Valor
    Contenido	Aceptar
    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, defina las propiedades siguientes para Button:

    Propiedad	Valor
    Contenido	Cancelar
    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, defina las siguientes propiedades para 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 Window1.xaml completo:

<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="200" Width="400" ResizeMode="CanResize" Name="Window1" 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 Designer

Otros recursos

Tutoriales sobre diseño