Crear un nuevo proyecto denominado “Login” del tipo WPF (.NET Framework).

Establece el alto y ancho de la pantalla en Height="500" Width="350"

Cambiar las siguientes propiedades al formulario

Insertar un rectángulo dentro de la pantalla y agregar un efecto con degradiente de la siguiente

manera:
Agregar una carpeta al proyecto llamada Assets y guardar una imagen representativa.

Insertar la imagen dentro del formulario y fijar los siguientes valores a las propiedades
mostradas

Insertar un nuevo rectángulo después de la imagen. Cambiar las propiedades siguientes:

Width="280" Height="240" Fill="White" VerticalAlignment="Bottom" Margin="0,100"
RadiusY="10" RadiusX="10"
En el cuadro de propiedades, dirigirse a la categoría “Apariencia”, Clic en el botón NUEVO de la
propiedad “Effect” y seleccionar “DropShadowEffect”.

Siempre en la misma categoría y con el rectángulo seleccionado, cambiar el valor de las

siguientes propiedades:

Insertar el paquete Nuget de Material Design. Clic derecho en el nombre del proyecto y
seleccionar “Administrar Paquetes Nuget”

Al darle clic en el botón Instalar, se iniciará el proceso de instalación y mostrará un cuadro de

diálogo en donde solo debemos dar clic en Aceptar y esperar a que finalice el proceso.

Ir al sitio web (http://materialdesigninxaml.net) de donde copiaremos el siguiente código

Agregar en la línea 6 la siguiente instrucción para reconocer Material Design en la pantalla:

xmlns:materialDesign=”http://materialdesigninxaml.net/winfx/xaml/themes”

Insertar una Grid abajo del rectángulo anterior con las siguientes propiedades:
Y dentro del grid agregar un label

Siempre dentro del grid, abajo del grid anterior agregar un StackPanel el cual incluya un
TextBox y un PasswordBox como se muestra acontinuacion:

Fuera del grid anterior agregar un botón con las siguientes propiedades:

Debajo de botón anterior insertar un TextBlock

Ejecutar y verificar que el proyecto se ejecuta correctamente. Según la imagen mostrada:

Agregar una nueva ventana WPF

Agregar los siguiente al titulo

Agregar la línea de código de material design

xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

Insertar dentro del grid un rectángulo con las siguientes propiedades:

Insertar un grid antes del rectángulo anterior

Debajo de rectángulo anterior insertar una label con las propiedades siguientes:

Insertar un Stack panel como se muestra a continuación:

Dentro del stackpanel insertar lo siguiente:

Descargar los iconos respectivamente para cada botón

Para el siguiente paso vamos a insertar un groupBox con las siguientes propiedades:

Dentro del groupBox anterior insertamos un stackpanel el cual tendrá dos textBox y dos
passwordBox como se muestra a continuación:
Dentro del mismo stackPanel insertamos un nevo stackPanel el cual usaremos para mostrar los
registros, el StackPanel incluirá lo siguiente:

Nuestra ventana WPF debería verse asi

 Para el siguiente paso utilizaremos una base de datos y haremos la conexión, crear una base de
datos utlizando el siguiente script
create database POEWPF
Go
use POEWPF
go
create table USUARIOS(
USUARIOID INT IDENTITY(1,1) PRIMARY KEY,
NOMBRECOMPLETO VARCHAR(50) NOT NULL,
CORREO VARCHAR(50) NOT NULL,
CLAVE VARBINARY(1000) NOT NULL);

GO
create function FNENCONTRARUSURARIO(
@CORREO VARCHAR (5),
@CLAVE VARCHAR(50))

RETURNS INT
AS
BEGIN

declare @ENCONTRADO INT=0;

SELECT
@ENCONTRADO=COUNT(*) FROM USUARIOS WHERE CORREO =@CORREO AND
CONVERT (VARCHAR,DECRYPTBYPASSPHRASE('POE2022!',CLAVE))=@CLAVE
RETURN (@ENCONTRADO);
END

Posterior a crear la base de datos regresamos a nuestro proyecto y seguimos el siguiente

proceso:

Damos doble click sobre properties, seleccionamos configuración, creamos la variable

conexionDB, selecionamos el tipo cadena de conexión, el ámbito será asigando
automáticamente

4 5 1
2 3
6
7
Para el valor seleccionar las opciones como se muestran en la captura, damos click en probar
conexión y luego aceptar.

Para continuar agregamos las siguientes librearías en MainWindow.xaml.cs

Creamos la conexión usando la variable creada

Creamos un método para encontrar el usuario

Para el siguiente paso creamos dos variables para el control del estado de edición o adición en
frmUsuarios.xaml.cs

Creamos una variable de tipo entero para almacenar temporalmente el id del usuario

Creamos el método para mostrar usuarios

Ahora necesitamos un método para habilitar los objetos por lo que procedemos a crear el
siguiente método

De igual forma creamos el método para limpiar los campos

Lo siguiente seria crear un método para el control de los botones de acción de esta forma
garantizamos que solo estén habilitados los botones cuando sea necesario

Creamos un evento para llamar los métodos que hemos creado antes
Ahora procedemos a programar los botones con sus respectivas funciones