+Login Cap 1- Diseñar Formulario Login Plano Moderno Transparente y Botón Circular- Visual Basic y WinForm

INTRODUCCIÓN:

Hola, bienvenido al primer capítulo del tutorial “Login Completo” en Visual Basic, SQL Server, WinForms, Programación Orientada a Objetos (POO) y Arquitectura en Capas, con buenas prácticas y estrategias (Nivel intermedio).

En este tutorial aprenderá como diseñar un formulario de inicio de sesión con aspecto plano, modernista, transparente y un botón circular, en muchas ocasiones nos cansamos de los formularios clásicos de Windows, y deseamos realizar una interfaz gráfica de usuario muy chida y lokaso¡¡ totalmente personalizado…, pero no sabemos cómo hacerla; déjame decirte que realmente es muy sencillo, solamente necesitas creatividad y un poco de lógica.

En los capítulos siguientes, se realizará la validación de usuario y contraseña, seguridad, permisos de usuario, recuperar contraseña de usuario mediante email y finalmente editar perfil de usuario. Puede ver todos los capítulos en los siguientes enlaces:

Bueno empecemos a codificar el formulario de inicio de sesión moderno y plano con VB. Puede ver este tutorial en Youtube.

TUTORIAL:

Paso 1: Crear proyecto de aplicación de Windows Forms

• En Visual Studio, crea un proyecto nuevo de aplicación de Windows Form en Visual Basic  y asígnele el nombre que desee. Aquí lo he nombrado FlatLoginForm. Si desea, cambie el nombre de Form1.cs a FormLogin.cs.

Paso 2: Diseñe el Formulario de Inicio de sesión

• Diseñe el Formulario Login de la siguiente manera, la configuración de las propiedades se describen abajo.

• Descripción de las propiedades del formulario y controles de usuario.

Paso 3: Cambiar alto de TextBox

• Ahora, personalizaremos el alto de los textboxs mediante código, esto no es posible mediante el diseñador, también indicamos que Text box Contraseña esconda las caracteres. En el código, agregamos el siguiente método:

Private Sub CustomizeComponents()
	'txtUsername
	txtUser.AutoSize = False
	txtUser.Size = New Size(350, 30)
	'txtPassword
	txtPass.AutoSize = False
	txtPass.Size = New Size(350, 30)
	txtPass.UseSystemPasswordChar = True
End Sub

• Doble Clic en el formulario para crear el evento load del formulario e invocamos el método anterior.

Private Sub FormLogin_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    CustomizeComponents()
End Sub

Paso 4: Convertir botón de iniciar sesión a botón circular

• Finalmente, personalizamos el botón de iniciar sesión a un botón circular. Creamos el evento Paint del botón: Propiedades->eventos->doble click en Paint.

• Una vez creado el evento, agregamos el siguiente código.

Private Sub btnLogin_Paint(sender As Object, e As PaintEventArgs) Handles btnLogin.Paint
	Dim buttonPath As Drawing2D.GraphicsPath = New Drawing2D.GraphicsPath()
	Dim myRectangle As Rectangle = btnLogin.ClientRectangle
	myRectangle.Inflate(0, 30)
	buttonPath.AddEllipse(myRectangle)
	btnLogin.Region = New Region(buttonPath)
End Sub

Paso 5: Añadir funcion de cerrar y minimizar el formulario

• Doble clic en el icono de minimizar y cerrar para crear el evento Click; una vez creado agrega el siguiente código en Cerrar: Application.Exit(), en minimizar: Me.WindowState = FormWindowState.Minimized, tiene que quedar de la siguiente manera:

Private Sub btnClose_Click(sender As Object, e As EventArgs) Handles btnClose.Click
	Application.Exit()
End Sub
Private Sub btnMinimize_Click(sender As Object, e As EventArgs) Handles btnMinimize.Click
	Me.WindowState = FormWindowState.Minimized
End Sub

Paso 6: Añadir funcion de arrastrar o mover el formulario / Drag Form

• Importamos la librería Runtime.InteropServices.

Imports System.Runtime.InteropServices

• Agregamos el siguiente fragmento de código.

<DllImport("user32.DLL", EntryPoint:="ReleaseCapture")>
Private Shared Sub ReleaseCapture()
End Sub
<DllImport("user32.DLL", EntryPoint:="SendMessage")>
Private Shared Sub SendMessage(hWnd As IntPtr, wMsg As Integer, wParam As Integer, lParam As Integer)
End Sub

• Creamos el evento MouseDown del panel barra de título e invocamos los métodos anteriores, de la siguiente manera.

Private Sub titleBar_MouseDown(sender As Object, e As MouseEventArgs) Handles titleBar.MouseDown
	ReleaseCapture()
	SendMessage(Me.Handle, &H112&, &HF012&, 0)
End Sub

• También podemos mover el formulario de cualquier parte o en caso que no uses una barra de título, de la misma forma, creas el evento MouseDown del formulario e invocas los métodos.

Private Sub FormLogin_MouseDown(sender As Object, e As MouseEventArgs) Handles MyBase.MouseDown
	ReleaseCapture()
	SendMessage(Me.Handle, &H112&, &HF012&, 0)
End Sub

PD:
<DllImport(«user32.DLL», EntryPoint:=»ReleaseCapture»)>
<DllImport(«user32.DLL», EntryPoint:=»SendMessage»)>
Significa que el método declarado a continuación no está en .NET, sino en un archivo DLL externo (nativo). 
En este caso, se encuentra en el archivo User32.dll, que es un componente estándar de Windows. El cual nos permite utilizar los eventos/método del sistema operativo, en este caso capturar las señales del mouse.
¿Como funciona?
Es un conocido hack (&HF012& no es un syscommand documentado, no es parte del API).
SendMessage notifica al handler de la ventana (en este caso el formulario), mediante un WM_SYSCOMMAND (&H112&), que comenzará a ser arrastrado (&HF012&), cuando sea haga click  sobre el panel1, y se mueva el ratón sin soltar el botón.

Eso es todo 🙂

Puede ver este tutorial en Youtube:

DESCARGAS:

Descargar Iconos utilizados

Descargar Proyecto (Código Fuente)

Descargar Proyecto Login Completo + CRUD

La descarga del proyecto (No es gratis) incluye las funciones realizadas en los 6 capítulos del proyecto LOGIN COMPLETO EN VB.NET, sin embargo, el proyecto tiene un código fuente totalmente modernizado y optimizado, además de incluir CRUD completo con manejo de imágenes, validación de datos duplicados, entre otros. Todo ello con SQL Server, WinForm, Programación Orientada a Objetos (POO) y Arquitectura en Capas, con buenas prácticas y estrategias, tanto de nivel intermedio o avanzado. Puedes descargar las versiones de demostración y obtener los proyectos desde lo botones a continuación: