Comunidad de diseño web y desarrollo en internet online

WPF (Windows Presentation Foundation) en Visual Basic.NET

Crearemos una aplicación de Windows Presentation Foundation (WPF) que nos permita dibujar imágenes con el ratón. 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 se escribe el código para administrar los eventos de los controles. Es (casi) lo mismo. Recuerda descargar Visual Basic 2008 y leer el tutorial de Visual Basic .NET antes de continuar.

Aplicación WPF de dibujo con Visual Basic .NET


Para empezar, hacemos clic en Nuevo proyecto y ahí le damos a Aplicación WPF como tipo de proyecto. Si quereis le cambiáis el nombre al Proyecto y, a continuación, hacemos clic en Aceptar.


Nos muestra la nueva ventana de WPF, llamada Window1, en vista Diseño.

De manera predeterminada, el editor XAML aparece bajo el diseñador, pero la vista XAML puede mostrarse a pantalla completa si hacemos clic con el botón secundario en la superficie de diseño y seleccionamos Ver XAML.


Para diseñar la interfaz de usuario, vamos a colorear un poco la ventana, y vamos a introducir algunos controles para que todo funcione como queremos.

Si la ventana Propiedades no está visible, en el menú Ver hacemos clic en Ventana Propiedades. Esta ventana muestra las propiedades del formulario o control actualmente seleccionado.

Cambiamos el tamaño de la ventana de WPF estableciendo la propiedad Height en 550 y la propiedad Width en 350 desde la ventana Propiedades.


Cambiamos la propiedad de título de la ventana de WPF a Panel de entrada manuscrita.

Y la propiedad Background de la ventana de WPF al color "Aquamarine"; para ello, haga clic en Aquamarine en el cuadro desplegable.


Opcionalmente, puede modificar directamente el color de la aplicación desde el panel XAML si agregamos un atributo Background y establece su valor en Brown: Background="Aquamarine".


Y al cambiarle el color nos quedará asi:


Hacemos clic con el botón secundario en el Cuadro de herramientas(Panel de la Izquierda) y, después, clic en Elegir elementos.


Se abrirá el cuadro de diálogo Elegir elementos del cuadro de herramientas.En la ficha Componentes WPF, nos movemos hacia abajo hasta el control "InkCanvas" y lo seleccionamos para activar la casilla. Hacemos clic en Aceptar para agregar el control InkCanvas al Cuadro de herramientas.



Arrastramos ese control desde el Cuadro de herramientas a la superficie de diseño:


Y establezemos las siguientes propiedades del control InkCanvas:

  • Width -> Auto
  • Height -> Auto
  • HorizontalAlignment -> Stretch
  • VerticalAlignment -> Stretch
  • Márgenes -> 9, 9, 9, 52







Cambiamos el color del control InkCanvas a Azul, estableciendo su propiedad Background en "Blue".

El color de fondo del control InkCanvas aparecerá como azul durante el tiempo de ejecución, mientras la aplicación no se esté ejecutando no cambiará el color y permanecerá el color Aquamarine que elegimos para la Ventana principal.



Arrastramos dos controles Button a la ventana de WPF y los situamos bajo el control InkCanvas. Ponemos el button1 a la izquierda y el button2 más a la derecha.


Seleccionamos el button1 y vamos a cambiarle el nombre desde el marcado XAML en la vista XAML como se muestra en el marcado siguiente:

Código :

<Button Height="23" HorizontalAlignment="Left" Margin="14,0,0,12" Name="Button1" VerticalAlignment="Bottom" Width="75">Limpiar</Button>

Seleccionamos button2 y volvemos a cambiar lo mismo:

Código :

<Button Height="23" Margin="105,0,148,12" Name="Button2" VerticalAlignment="Bottom">Cerrar</Button>



La aplicación WPF debería parecerse a la aplicación siguiente:


Para agregar código a los controladores de eventos de los botones hacemos lo mismo que cuando añadimos código a los controles de los Windows Forms, doble clic en los botones.
Hacemos doble clic en el botón Limpiar y, a continuación, escribimos el código siguiente al controlador de eventos Click generado:

Código :

Me.InkCanvas1.Strokes.Clear()


Volvemos a la vista Diseño, doble clic en el botón Cerrar y, a continuación, agregamos el código siguiente al controlador de eventos Click generado:

Código :

Me.Close()



Presionamos F5 para ejecutar el proyecto o le damos al "Play" y nos mostrará nuestra ventana, dónde podremos dibujar a mano alzada, aunque será bastante difícil. Si cometemos algún error, hacemos clic en Borrar y listo!Hacemos clic en Cerrar para salir de la aplicación.



Espero que os haya gustado la primera aplicación WPF y que no os haya resultado difícil.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate