[UWP - How To] Crear formularios de Login y Registro

febrero 28, 2017 Christian Amado 0 Comentarios

Con UWP estamos hablando de un proyecto que puede ejecutarse en múltiples plataformas, por lo tanto, siempre es conveniente tener preparados estos formularios.

En este ejemplo, me baso en lo referente a los formularios y la navegación entre ellos. En este caso no se va a conectar a ninguna base de datos. Haremos hard coding de los accesos a modo de captar la idea.

Registro

Creamos la página de registro a la aplicación (normalmente esto llama a un servicio como Windows Live, Gmail u otro para las autenticaciones).

La página Registro.xaml quedaría de la siguiente manera:

<Page
    x:Class="UWP_Blog.Registro"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWP_Blog"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <TextBlock Grid.Column="0" Grid.Row="0" Margin="5" Text="Usuario: " />
        <TextBlock Grid.Column="0" Grid.Row="1" Margin="5" Text="Email: " />
        <TextBlock Grid.Column="0" Grid.Row="2" Margin="5" Text="Contraseña: " />
        <TextBlock Grid.Column="0" Grid.Row="3" Margin="5" Text="Confirmación: " />

        <TextBox Grid.Column="1" Grid.Row="0" Margin="5" />
        <TextBox Grid.Column="1" Grid.Row="1" Margin="5" />
        <TextBox Grid.Column="1" Grid.Row="2" Margin="5" />
        <TextBox Grid.Column="1" Grid.Row="3" Margin="5" />

        <StackPanel Grid.Column="1" Grid.Row="4" HorizontalAlignment="Stretch" Orientation="Horizontal">
            <Button Margin="5" Content="Registrar" Click="Registrar_Click" />
            <Button Margin="5" Content="Cancelar" Click="Cancelar_Click" />
        </StackPanel>
    </Grid>
</Page>

Inicio de sesión

Creamos la página de Inicio de Sesión de la aplicación (normalmente esto también llama a un servicio como Windows Live, Gmail u otro para las autenticaciones).

La página Login.xaml quedaría de la siguiente manera:

<Page
    x:Class="UWP_Blog.Login"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWP_Blog"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <TextBlock Grid.Column="0" Grid.Row="0" Margin="5" Text="Usuario: " />
        <TextBlock Grid.Column="0" Grid.Row="1" Margin="5" Text="Contraseña: " />

        <TextBox Name="txtUsuario" Grid.Column="1" Grid.Row="0" Margin="5" />
        <TextBox Name="txtContrasena" Grid.Column="1" Grid.Row="1" Margin="5" />

        <StackPanel Grid.Column="1" Grid.Row="2" HorizontalAlignment="Stretch" Orientation="Horizontal">
            <Button Margin="5" Content="Iniciar" Click="Login_Click" />
        </StackPanel>
    </Grid>
</Page>

Página inicial

Esta página se puede visualizar una vez que el usuario ha iniciado sesión exitosamente.

La página MainPage.xaml quedaría de la siguiente manera:

<Page
    x:Class="UWP_Blog.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWP_Blog"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Loaded="Page_Loaded">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Name="txtIngreso" Margin="10" FontSize="20" />
    </Grid>
</Page>

Navegación

Para que la navegación entre páginas funcione debemos incluir esta pequeña línea de código en nuestras páginas creadas:

this.Frame.Navigate(typeof(MainPage));

De esta manera he mostrado una forma de navegar entre páginas en un proyecto UWP, faltaría enlazarlo a un servicio de autenticación para que nuestros formularios se hagan efectivos.