INTRODUCCIÓN:
Hola, bienvenido al primer capítulo del tutorial “Login Completo” en C#, SQL Server, WinForms, Programación Orientada a Objetos (POO) y Arquitectura en Capas, con buenas prácticas y estrategias (Nivel intermedio).
En muchas ocasiones nos cansamos de los formularios clásicos de Windows, y deseamos realizar una interfaz gráfica de usuario 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 este tutorial aprenderá como diseñar un formulario de inicio de sesión con aspecto plano, moderno, transparente y crear el efecto placeholder o watermark en el control TextBox. Puede ver este tutorial en Youtube.
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:
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 C# y asígnele el nombre que desee. Yo lo nombraré FlatLoginWatermark. Si desea, cambie el nombre de Form1.cs a FormLogin.cs.
Paso 2: Diseñe el Formulario de Inicio de Sesion.
- 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.
FormLogin:
-FormBorderStyle= None
-Opacity= 90 %
-Size= 780, 330
-BackColor= 39, 57, 80
-StartPosition= Center Screem
TextBox User y Pass
-BackColor= 39, 57, 80
-BorderStyle= None
-Font= Century Gothic 12 pt
-ForeColor= Silver
-Size= 408, 20
-Text (User)= Usuario
-Name=txtuser
-Text (Pass)= Contraseña
-Name=txtpass
Panel 1
-BackColor=0, 100, 182
-Dock=Left
-Name= Panel1
Button Login
-BackColor= 33, 53, 73
-FlatStyle= Flat
-FlatAppearance.BorderColor= 85, 159, 127
-FlatAppearance. MouseDownBackColor = 20, 20, 20
-FlatAppearance.MouseOverBackColor = 70, 118, 126
-ForeColor=LightGray
-Name=btnLogin
Size=408, 40
-Text= ACCEDER
Picture Box Minimize and Close
-Cursor= Hand
-Name(Minimize)= btnMinimizar
-Name(Close)= btnCerrar
Paso 3: Añadir Placeholder/ Marca de agua a TextBoxs
- Creamos el evento Enter y Leave de TextBox Usuario(txtuser) y TextBox Contraseña (txtpass). Propiedades->eventos->doble click en Enter-> lo mismo para crear el evento Leave, tanto para txtuser y txtpass.
- Una vez creado los 4 eventos, agregamos los siguientes codigos en los respectivos eventos y controles.
private void txtuser_Enter(object sender, EventArgs e) { if (txtuser.Text == "Usuario") { txtuser.Text = ""; txtuser.ForeColor = Color.LightGray; } } private void txtuser_Leave(object sender, EventArgs e) { if (txtuser.Text == "") { txtuser.Text = "Usuario"; txtuser.ForeColor = Color.Silver; } } private void txtpass_Enter(object sender, EventArgs e) { if (txtpass.Text == "Contraseña") { txtpass.Text = ""; txtpass.ForeColor = Color.LightGray; txtpass.UseSystemPasswordChar = true; } } private void txtpass_Leave(object sender, EventArgs e) { if (txtpass.Text == "") { txtpass.Text = "Contraseña"; txtpass.ForeColor = Color.Silver; txtpass.UseSystemPasswordChar = false; } }
Paso 4: Añadir Función de Minimizar y Cerrar
- Creamos el evento Click de Minimizar (btnMinimizar) y Cerrar (btnCerrar). Agregamos los siguientes códigos.
private void btncerrar_Click(object sender, EventArgs e) { Application.Exit(); } private void btnminimizar_Click(object sender, EventArgs e) { this.WindowState = FormWindowState.Minimized; }
Paso 5: Añadir Función de Mover / Arrastrar el Formulario
- Importamos la librería Runtime.InteropServices.
using System.Runtime.InteropServices;
- Agregamos el siguiente fragmento de código.
[DllImport("user32.DLL", EntryPoint = "ReleaseCapture")] private extern static void ReleaseCapture(); [DllImport("user32.DLL", EntryPoint = "SendMessage")] private extern static void SendMessage(System.IntPtr hwnd, int wmsg, int wparam, int lparam);
- Una vez echo lo anterior, creamos el evento MouseDown de Pânel1 y el propio Formulario (FormLogin), (Para que el formulario se pueda mover (Redimensionar) de cualquier parte), e invocamos los métodos anteriores creados.
private void panel1_MouseDown(object sender, MouseEventArgs e) { ReleaseCapture(); SendMessage(this.Handle, 0x112, 0xf012, 0); } private void FormLogin_MouseDown(object sender, MouseEventArgs e) { ReleaseCapture(); SendMessage(this.Handle, 0x112, 0xf012, 0); }
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.
Y 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 C#, 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: