Crear una aplicación de dibujo con WPF

Artículo
10/07/2008

Actualización: noviembre 2007

En esta lección, obtendrá información sobre cómo crear una aplicación de Windows Presentation Foundation (WPF) que le permita dibujar imágenes. Crear una aplicación de WPF es como crear una aplicación de formularios Windows Forms: los controles del Cuadro de herramientas se arrastran a la superficie de diseño y, a continuación, se escribe el código para administrar los eventos de los controles.

Para obtener una demostración en vídeo, vea Video How to: Creating a Drawing Application by Using WPF.

Inténtelo.

Para crear una aplicación de WPF

En el menú Archivo, haga clic en Nuevo proyecto.

Aparecerá el cuadro de diálogo Nuevo proyecto. Este cuadro de diálogo muestra la lista de los diversos tipos de aplicación predeterminados que puede crear con Visual Basic Express.
Seleccione Aplicación WPF como el tipo de proyecto.
Cambie el nombre de la aplicación a Panel de entrada manuscrita y, a continuación, haga clic en Aceptar.

Visual Basic Express crea una nueva carpeta para el proyecto. La carpeta tiene el mismo nombre que el título del proyecto. Visual Basic Express también muestra la nueva ventana de WPF, llamada Ventana1, en vista Diseño. Puede ir al editor de código en cualquier momento si hace clic con el botón secundario en la superficie de diseño y hace clic en Ver código. De manera predeterminada, el editor XAML aparece bajo el diseñador, pero la vista XAML puede mostrarse a pantalla completa si hace clic con el botón secundario en la superficie de diseño y selecciona Ver XAML.

Para diseñar la interfaz de usuario.

Si la ventana Propiedades no está visible, en el menú Ver haga clic en Ventana Propiedades. Esta ventana muestra las propiedades del formulario o control actualmente seleccionado. Puede cambiar los valores de las propiedades existentes en esta ventana.
Cambie el tamaño de la ventana de WPF estableciendo la propiedad Height en 550 y la propiedad Width en 370 desde la ventana Propiedades.
Cambie la propiedad de título de la ventana de WPF a Panel de entrada manuscrita.
Cambie la propiedad Background de la ventana de WPF al color marrón; para ello, haga clic en Brown en el cuadro desplegable y, a continuación, presione ENTRAR.

Nota:

Opcionalmente, puede modificar directamente el marcado XAML si agrega un atributo Background y establece su valor en Brown: Background="Brown"
Para abrir el Cuadro de herramientas, en el menú Vista, haga clic en el Cuadro de herramientas.
Haga clic con el botón secundario en el Cuadro de herramientas y, después, haga clic en Elegir elementos.

Se abrirá el cuadro de diálogo Elegir elementos del cuadro de herramientas.
En la ficha Componentes WPF del cuadro de diálogo Elegir elementos del cuadro de herramientas, desplácese hacia abajo hasta InkCanvas y selecciónelo para activar la casilla.
Haga clic en Aceptar para agregar el control InkCanvas al Cuadro de herramientas.
Arrastre un control InkCanvas del Cuadro de herramientas a la superficie de diseño.
Establezca las siguientes propiedades del control InkCanvas en la ventana Propiedades:

Propiedad

Valor

Width

Auto

Height

Auto

HorizontalAlignment

Expandir

VerticalAlignment

Expandir

Márgenes

9, 9, 9, 68
Cambie el color del control InkCanvas a amarillo estableciendo su propiedad Background en LightYellow.

El color de fondo del control InkCanvas aparecerá como amarillo claro en tiempo de ejecución.
Arrastre dos controles Button a la ventana de WPF y colóquelos bajo el control InkCanvas. Coloque button1 a la izquierda y button2 a la derecha.
Seleccione button1 y cambie el marcado XAML en la vista XAML como se muestra en el marcado siguiente. Este marcado establece la propiedad Text en Clear.
```
<Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" 
    Name="Button1" VerticalAlignment="Bottom" 
    Width="75">Clear</Button>
```
Seleccione button2 y cambie el marcado XAML como se muestra en el marcado siguiente. Este marcado establece la propiedad Text en Close.
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
    Name="Button2" VerticalAlignment="Bottom" 
    Width="75">Close</Button>
```
La aplicación WPF debería parecerse a la aplicación Panel de entrada manuscrita de la ilustración siguiente.

Aplicación WPF Panel de entrada manuscrita

Nota:
Opcionalmente, puede modificar directamente el marcado XAML si agrega un atributo Background y establece su valor en Brown: Background="Brown"

Propiedad	Valor
Width	Auto
Height	Auto
HorizontalAlignment	Expandir
VerticalAlignment	Expandir
Márgenes	9, 9, 9, 68

Para agregar código a los controladores de eventos de los botones

Haga doble clic en Borrar y, a continuación, agregue el código siguiente al controlador de eventos Click generado:
```
    Me.InkCanvas1.Strokes.Clear() 
```
Vuelva a la vista Diseño; para ello, haga clic con el botón secundario en el editor de código y seleccione Diseñador.
Haga doble clic en Cerrar y, a continuación, agregue el código siguiente al controlador de eventos Click generado:
```
    Me.Close()
```
Presione F5 para ejecutar el proyecto.
Cuando la aplicación se inicie, dibuje una imagen en el control InkCanvas. Si comete algún error, puede hacer clic en Borrar para volver a empezar.
Haga clic en Cerrar para salir de la aplicación.