Login Cap 5- Pantalla de Bienvenida con Efecto Desvanecer (Fade in- Fade out) + Loading- C#, VB.Net y WinForm

INTRODUCCIÓN:

Hola, bienvenido al quinto capítulo del tutorial “Login Completo” en  C#, 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 mostrar un formulario de bienvenida o saludo después de iniciar sesión, al abrir: con efecto de entrada gradual (Fade In), al salir: con efecto de desvanecimiento (Fade Out), la pantalla de bienvenida solo se mostrará por 3 segundos (Puede mostrarlo por mas o menos tiempo). Este tutorial no tiene nada que ver con la arquitectura de software, es solo un tema de diseño y personalización, Sin embargo, mostrar un saludo de bienvenida puede tener ciertos efectos como aumentar los ánimos del usuario. Puede ver este tutorial en YouTube.

En los capítulos anteriores, se diseñó el formulario login plano modernista,  validar el usuario y contraseña del usuario al iniciar sesión, mostrar los datos del usuario en la interfaz gráfica, cerrar sesión, aplicar seguridad, privilegios de usuario y recuperar la contraseña del usuario mediante email.

 Puede ver todos los capítulos en los siguientes enlaces:

TUTORIAL:

Paso 1: Crear Formulario de Bienvenida

• En capa de presentación, agregamos un nuevo formulario para mostrar un mensaje de bienvenida o saludo. Pueden hacer el diseño que mas prefieran.
• Agregamos dos Temporizadores desde la caja de herramientas (Control TIMER).
  El primer temporizador (timer1) se va a encargar de hacer aparecer el formulario gradualmente, y el segundo temporizador (timer2) se va a encargar de desvanecer el formulario y finalmente cerrarlo.
• Opcional, agregamos una barra de progreso (Control ProgressBar) o una barra de progreso circular (Control CircularProgressBar-> lo puedes descargar desde Nuget).

Paso 2: Ajustar propiedades de controles

• Una vez terminado el diseño, ajustamos las propiedades de los controles de la siguiente manera.

Configuro el intervalo en 30 porque haré que ejecute el evento tick cada 30 milisegundos, hasta cumplir 100 repeticiones, es decir, el formulario se mostrará 3 segundos, luego se cerrará. Puedes cambiar estos valores, si deseas mostrar por mas o menos tiempo.

Paso 3: Codificar Formulario

• Una vez terminado los últimos ajustes en el diseño. Creamos el evento Tick de timer1 y timer2 (Doble clic en el control timer para crear el evento).
  -En el primer temporizador (timer1) codificaremos para que el formulario aparezca gradualmente.
  -En el segundo temporizador (timer2) codificaremos para desvanecer el formulario y finalmente cerrarlo.
  -Para ello, aumentamos (+) o disminuimos (-) la OPACIDAD del formulario en cada tick del temporizador.

• Creamos el evento load del formulario, mostramos el nombre completo del usuario que inicia sesión (Los datos obtenemos de la clase estática Cache de Usuario de la capa común). Inicializamos la opacidad en 0, y iniciamos el temporizador 1.

• Todo ello, codificamos de la siguiente manera.

FormWelcome.cs / .vb

public partial class FormWelcome : Form
{	
  private void timer1_Tick(object sender, EventArgs e)
  {
    if (this.Opacity < 1) this.Opacity += 0.05;
    circularProgressBar1.Value += 1;
    circularProgressBar1.Text = circularProgressBar1.Value.ToString();
    if (circularProgressBar1.Value == 100) {
      timer1.Stop();
      timer2.Start();
    }
  }

  private void timer2_Tick(object sender, EventArgs e)
  {
    this.Opacity -= 0.1;
    if (this.Opacity == 0) {

      timer2.Stop();
      this.Close();
    }
  }

  private void FormWelcome_Load(object sender, EventArgs e)
  {
    lblUsername.Text = UserCache.FirstName + ", " + UserCache.LastName;
    this.Opacity = 0.0;
    //Inicializamos estas propiedades de la barra de progreso, mediante codigo.(Opcional)
    circularProgressBar1.Value = 0;
    circularProgressBar1.Minimum = 0;
    circularProgressBar1.Maximum = 100;
    //Iniciamos el temporizador 1.
    timer1.Start();
  }
}

Imports Common

Public Class FormWelcome

    Private Sub FormWelcome_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        lblUsername.Text = ActiveUser.firstName & ", " & ActiveUser.lastName 'Mostramos los datos del usuario'
        CircularProgressBar1.Value = 0
        Me.Opacity = 0 'Iniciamos la opacidad en 0'
        Timer1.Start() 'Iniciamos el temporizador 1'
    End Sub

    Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
        CircularProgressBar1.Value += 1
        CircularProgressBar1.Text = CircularProgressBar1.Value.ToString()
        If Me.Opacity < 1 Then
            Me.Opacity += 0.05
        End If

        If CircularProgressBar1.Value = 100 Then
            Timer1.Stop()
            Timer2.Start()
        End If
    End Sub

    Private Sub Timer2_Tick(sender As Object, e As EventArgs) Handles Timer2.Tick
        Me.Opacity -= 0.1
        If Me.Opacity = 0 Then
            Timer2.Stop()
            Me.Close()
        End If
    End Sub
End Class

Paso Final: Invocar desde el Formulario Login

• Una vez terminado lo anterior, como ultimo paso, invocamos el formulario de bienvenida desde el botón iniciar session del Login.

private void btnlogin_Click(object sender, EventArgs e)
{
  if (txtuser.Text != "Username" && txtuser.TextLength > 2)
  {
    if (txtpass.Text != "Password")
    {
      UserModel user = new UserModel();
      var validLogin = user.LoginUser(txtuser.Text, txtpass.Text);
      if (validLogin == true)
      {
        this.Hide();
        FormWelcome welcome = new FormWelcome();
        welcome.ShowDialog();
        FormMainMenu mainMenu = new FormMainMenu();
        mainMenu.Show();
        mainMenu.FormClosed += Logout;

      }
      else {
        msgError("Incorrect username or password entered. \n   Please try again.");
        txtpass.Text = "Password";
        txtpass.UseSystemPasswordChar = false;
        txtuser.Focus();
      }
    }
    else msgError("Please enter password.");
  }
  else msgError("Please enter username.");
}

Private Sub btnLogin_Click(sender As Object, e As EventArgs) Handles btnLogin.Click

    Dim userModel As New UserModel()
    Dim validLogin = userModel.Login(txtUser.Text, txtPass.Text)

    If validLogin = True Then
'-----Agregamos estos codigos antes de mostrar el formulario principal-----'
        Me.Hide()
        Dim formwelcome As New FormWelcome()
        formwelcome.ShowDialog()
'----------------------------------------------------------------'
        Dim frm As New FormPrincipal()
        frm.Show()
        AddHandler frm.FormClosed, AddressOf Me.Logout

    Else
        MessageBox.Show("Incorrect username or password entered." + vbNewLine + "Please try again.")
        txtPass.Clear()
        txtPass.Focus()
    End If

End Sub

Eso es todo 🙂

Puede ver este tutorial en YouTube

C#

VB.Net

DESCARGAS:

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# o 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:

C# (C-Sharp)

VB.NET (Visual Basic)