Tutorial

Formulario Windows con

Visual C++ 2015

(Visual C++ CLR, MFC, Win32 y ATL)

 Índice

• Presentación – 4
• Visual C++ 2015 CLR – 12
• Visual C++ 2105 MFC – 30
• Visual C++ 2105 Win32 – 41
• Enlaces – 57
• Autor y versión – 60

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 2

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 3
 Presentación

• Desde Visual Studio 2012 han complicado un poco las cosas para
crear un Windows Form con Visual C++ CLR, cada versión cambian
detalles que en el fondo está bien por dentro, lo que es más difícil
acceder a él.
• Se presenta un tutorial pequeño paso a paso para saber como crear
un Windows Form.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 4

 Presentación
• Observando las opiniones que he visto por Internet, si vas a usar Visual C++
CLR que opta por la plataforma .net, mejor te centras en Visual C#.
• MFC, Win32 y ATL a parte de ser más complicado, se suele usar para tener
mejor rendimiento, kernel, driver y un largo etc, requiere más tiempo
haciendo códigos.
• Si optas por hacer una interfaz sencilla para controlar dispositivos externos
en el puerto serie como microcontroladores PIC, placas de Arduino,
Raspberry Pi o cualquier otro con el protocolo RS232, mejor usar Visual C++
CLR, C# o Visual Basic .net por su facilidad y comodidad.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 5

 Presentación
• Dependiendo de sus necesidades.
El uso de CLR le proveerá a usted con la más expresiva conjunto de bibliotecas (el todo .NET Framework), en el
costo de la restricción de su archivo ejecutable para exigir el .NET Framework para ser instalado en tiempo de
ejecución, así como la limitación a la plataforma de Windows (sin embargo, todos los 4 de los enumerados
tecnologías son solo para Windows, por lo que la limitación de la plataforma es, probablemente, el menos
problemático). Hablando de CLR, MFC, Win32 y ATL.
Sin embargo, CLR requiere el uso de C++/CLI extensiones para el lenguaje C++, así que, en esencia, la
necesidad de aprender algo más de las características de lenguaje con el fin de utilizar este. Al hacerlo,
obtendrá muchos "extras" tales como el acceso a la .red de bibliotecas, lleno de recolección de basura, etc.
ATL Y MFC son un poco más complicado de decidir. Le indico a la página de MSDN para elegir, para decidir
entre ellos. Sobre ATL y MFC es que usted no necesita .NET Framework, sólo el VC/MFC tiempos de ejecución
para ser instalado para su implementación.
El uso de Win32 directamente proporciona a los más pequeños ejecutables, con el menor número de
dependencias, pero es más trabajo para escribir código y tiempo.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 6

 Presentación

• En esta versión he trabajado con el Sistema operativo Windows 7 de

64 bits y Visual Studio Community 2015.
• Enlace para descargar Visual Studio Community 2015 (Gratuito).

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 7

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 8
 Herramientas comunes

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 9

Herramientas comunes

• Puedes descargar Visual Studio

Community 2015 con un ejecutable a
travéz de Internet o descargarte una ISO
para grabarlo en un DVD.
• Antes de instalar, seleccionamos las
Herramientas comunes para Visual C++
2015 como indica en la imagen.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 10

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 11
 Visual C++ 2015 CLR

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 12

 Visual C++ 2015 CLR

• Cuando tengas Visual Studio Community

2015 ya ejecutado, creamos un proyecto
nuevo.
• ArchivoNuevoProyecto…
• Mirar imagen grande en la página
siguiente.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 13

 Visual C++ 2015 CLR

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 14

 Visual C++ 2015 CLR

• Le ventana Nuevo proyecto está abierta y

seguimos en orden lo que indica la imagen.
• 1) Visual C++ en Plantillas.
• 2) CLR.
• 3) Proyecto vacío de CLR.
• 4) Ponemos el nombre que queramos, en
este caso lo he llamado Proyectazo.
• 5) Pulsamos Aceptar.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 15

 Visual C++ 2015 CLR

• En el “Explorador de soluciones” seleccionamos el nombre de nuestro proyecto, en este caso

Proyectazo como el primer paso.
• En la barra de herramientas Proyecto, luego Agregar un nuevo elemento tal como indica en la imagen
de abajo.
Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 16
 Visual C++ 2015 CLR

• Como muestra la imagen de abajo. Cloqueamos en Visual C++  UI y Señalamos Windows Forms, le
he añadido como nombre en el tercer paso Form_Principal, puedes poner cualquier nombre, al final,
pulsa Aceptar.
Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 17
 Visual C++ 2015 CLR

• En mi caso puede ver que hay un mensaje

de error como muestra en esta imagen y
en la página siguiente.
• No preocuparse, aún no hemos acabado.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 18

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 19
 Visual C++ 2015 CLR

• Cierra la pestaña pulsando la X. En la página siguiente lo volverás a abrir con el formulario.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 20

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 21
 Visual C++ 2015 CLR

• Indicamos en el “Explorador de soluciones”,

hacemos clic en el botón derecho del ratón y
luego pulsamos “Propiedades”.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 22

 Visual C++ 2015 CLR

• Sigue el procedimiento indicado abajo, en

Subsistema tiene que ser Windows
(/SUBSYSTEM:WINDOWS), luego pulsas
aplicar.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 23

 Visual C++ 2015 CLR

• Vete a la pestaña “Avanzadas”, Punto de

entrada escribes main.
• Finalmente el botón Aceptar.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 24

 Visual C++ 2015 CLR

• Escribe los códigos necesarios como muestra en la imagen, pero antes, mira la página siguiente
que se ve más grande y mejor.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 25

 Visual C++ 2015 CLR

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 26

 Visual C++ 2015 CLR

• En la página siguiente muestra el proyecto

del formulario.
• Puedes añadirle un label, cambiar de título
al formulario como prueba.
• Luego pulsas F5 para compilar.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 27

 Visual C++ 2015 CLR

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 28

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 29
 Visual C++ 2015 MFC

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 30

 Visual C++ 2015 MFC

• Cuando tengas Visual Studio Community

2015 ya ejecutado, creamos un proyecto
nuevo.
• ArchivoNuevoProyecto…
• Mirar imagen grande en la página
siguiente.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 31

 Visual C++ 2015 MFC

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 32

 Visual C++ 2015 MFC

• Le ventana Nuevo proyecto está abierta y

seguimos en orden lo que indica la imagen.
• 1) Visual C++ en Plantillas.
• 2) MFC.
• 3) Aplicación MFC.
• 4) Ponemos el nombre que queramos, en
este caso lo he llamado Proyecto_MFC.
• 5) Pulsamos Aceptar.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 33

 Visual C++ 2015 MFC

• Aparece una ventana de información que te

indica rápidamente qué es lo que puedes crear
con el asistente.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 34

 Visual C++ 2015 MFC
• En el grupo de opciones debemos elegir "Basada
en cuadros de diálogo", alternativamente
tenemos la opción de utilizar diálogos HTML, ese
tipo de diálogo utiliza controles HTML.
• Luego debemos elegir como vamos a utilizar la
librería MFC:

• Si usamos MFC como un archivo compartido

nuestra aplicación (.exe) ocupará poco espacio
será portable hacia cualquier sistema operativo
Windows que tenga instalado Visual C++ Runtime.
• En cambio si usamos MFC como una biblioteca
estática nuestra aplicación contiene todo lo
necesario para ejecutarse, puede llegar a ocupar
muchos megas y puede portarse a otros sistemas
Windows que incluso no tengan instalado Visual
C++ Runtime.
• No usar Bibliotecas Unicode, a menos que sean
completamente necesarias.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 35

 Visual C++ 2015 MFC
Marco grueso. Si esta activada la propiedad "Border" del diálogo es
"Resizing", y si no es "Dialog Frame“

•Cuadro minimizar: Propiedad "Minimize Box" = True/False

•cuadro Maximizar: Propiedad "Maximize Box" = True/False

•Minimizado: Inicia la ventana minimizada.

•
Agrega esta linea de código en la función OnInitDialog:
ShowWindow(SW_MINIMIZE);

•Maximizado: Inicia la ventana maximizada.

Agrega esta línea de código en la función OnInitDialog:
ShowWindow(SW_MAXIMIZE);

•Menú del sistema: Es el menú que aparece cuando hacemos clic derecho
sobre la barra de título.

•Cuadro de diálogo Acerca de: Es un dialogo que muestra información de la

aplicación, conocida también como "About... ", a diferencia de las
aplicaciones SDI/MDI no tenemos un menú, es por eso que el asistente
agrega un segmento de código que permite visualizar este diálogo.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 36

 Visual C++ 2015 MFC

• Lo dejamos así para tener todo limpio para

este ejemplo.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 37

 Visual C++ 2015 MFC

• Tendremos un diálogo que nos va a mostrar

las clases que van a generarse, en este
punto podemos elegir las clases bases, es
muy importante hacerlo por que luego va a
ser un poco tedioso hacer cambios.
• En la página siguiente muestra el proyecto
del formulario.
• Puedes añadirle un label, cambiar de título al
formulario como prueba.
• Luego pulsas F5 para compilar.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 38

 Visual C++ 2015 MFC

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 39

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 40
 Visual C++ 2015 Win32

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 41

 Visual C++ 2015 Win32

• Cuando tengas Visual Studio Community

2015 ya ejecutado, creamos un proyecto
nuevo.
• ArchivoNuevoProyecto…
• Mirar imagen grande en la página
siguiente.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 42

 Visual C++ 2015 Win32

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 43

 Visual C++ 2015 Win32

• Le ventana Nuevo proyecto está abierta y

seguimos en orden lo que indica la imagen.
• 1) Visual C++ en Plantillas.
• 2) Win32.
• 3) Aplicación Win32.
• 4) Ponemos el nombre que queramos, en
este caso lo he llamado Proyecto_Win32.
• 5) Pulsamos Aceptar.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 44

 Visual C++ 2015 Win32

• Aparecerá información.
• Pulsa Siguiente.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 45

 Visual C++ 2015 Win32

• En Opciones adicionales, marca Proyecto

vacío.
• Luego Finalizar.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 46

 Visual C++ 2015 Win32

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 47

 Visual C++ 2015 Win32

• Selecciona Archivo C++ (.cpp).

• Como nombre he puesto
Mensaje_texto.cpp.
• Pulse Aceptar.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 48

 Visual C++ 2015 Win32

• En el Explorador de soluciones se ha
creado en Archivos de código fuente el
elemento Mensaje_texto.cpp.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 49

 Visual C++ 2015 Win32

• La explicación paso por paso de cada

código lo explica en el enlace.
• Solo nos centramos en el código fuente
final en el cual insertaremos dentro del
elemento Mensaje_texto.cpp.
• He modificado el nombre del texto, • Ver enlace.
coordenada del texto, del formulario y el
título del formulario.
• Código fuente en las siguientes páginas.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 50

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 51
Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 52
Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 53
Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 54
 Visual C++ 2015 Win32

• Pulsamos F5 para compilar y

comprobamos el formulario.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 55

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 56
 Enlaces
Enlaces de descargas del ejemplo, foros y otras
informaciones.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 57

 Enlaces

Descripción Descargar
• Por si quieres ver detalles del programa de este • Enlace
ejemplo, o no hayas la solución desde el
tutorial, aquí dejo un enlace de descarga de
• Enlace
ejemplo.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 58

 Enlaces

• Visual Studio Community 2015: Web principal para la descarga.

• MSDN: Foro oficial sobre Visual Studio.
• TechNet: Foro oficial sobre Sistemas Operativos Windows.
• Blog: Electrónica PIC, encontrarás tutoriales relacionado con Visual Studio y
electrónica.

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 59

 Autor
Ángel Acaymo M. G.

Versión 2.0
Contacto: [email protected]

Electrónica PIC - http://electronica-pic.blogspot.com.es 11/12/2015 60