Si tenemos que implementar una aplicación sencilla es posible que la misma tenga una única página como hemos trabajado en conceptos anteriores.
Es muy común que una aplicación requiera de varias interfaces visuales. Esta funcionalidad está resuelta cuando trabajamos en la plataforma universal de Windows mediante la clase Frame y la definición de otros objetos de la clase Page.
Problema
Implementar una aplicación que tenga dos interfaces visuales: una que permita mostrar un formulario de login y otra que muestre el nombre del programador y versión de la aplicación.
Como primer paso creamos un nuevo proyecto llamado "Proyecto19" seleccionando desde el menú de opciones del Visual Studio: Archivo -> Nuevo -> Proyecto.
Lo primero que haremos es crear dos páginas además de la que se crea por defecto: MainPage.xaml
Para crear una página seleccionamos desde el menú de opciones del Visual Studio: Proyecto -> Agregar nuevo elemento...
En el diálogo que aparece seleccionamos "Página en blanco" e indicamos el nombre del archivo a crear (Login.xaml):
Lo mismo hacemos para crear la segunda página (Acercade.xaml):
Desde el "Explorador de soluciones" podemos ver y seleccionar cada uno de los archivos creados:
Lo primero que codificaremos es el archivo "MainPage.xaml" que tiene la siguiente interfaz visual:
El código fuente XAML es:
<Page
x:Class="Proyecto19.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Proyecto19"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" ></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Button x:Name="boton1" Content="Login" Margin="5,5,5,5" Click="boton1_Click"/>
<Button x:Name="boton2" Content="Acerca De" Margin="5,5,5,5" Click="boton2_Click"/>
</StackPanel>
<Frame x:Name="frame1" Grid.Row="1"/>
</Grid>
</Page>
Como vemos disponemos un Grid con dos filas, en la primer fila disponemos un StackPanel con dos botones para poder seleccionar que página mostrar.
Lo nuevo lo encontramos en la segunda fila del Grid donde definimos un objeto de tipo Frame que tendrá como objetivo mostrar la página que le indiquemos luego en el código C#:
<Frame x:Name="frame1" Grid.Row="1"/>
El código fuente C# que debemos asociar al archivo MainPage.xaml es el archivo MainPage.xaml.cs:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// La plantilla de elemento Página en blanco está documentada en https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0xc0a
namespace Proyecto19
{
/// <summary>
/// Página vacía que se puede usar de forma independiente o a la que se puede navegar dentro de un objeto Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
frame1.Navigate(typeof(Login));
}
private void boton1_Click(object sender, RoutedEventArgs e)
{
frame1.Navigate(typeof(Login));
}
private void boton2_Click(object sender, RoutedEventArgs e)
{
frame1.Navigate(typeof(Acercade));
}
}
}
En el constructor indicamos que el Frame muestre la página Login por defecto, es decir que cuando se inicia la aplicación aparece el formulario de Login:
public MainPage()
{
this.InitializeComponent();
frame1.Navigate(typeof(Login));
}
Si se presiona el botón de "Login" luego se ejecuta:
private void boton1_Click(object sender, RoutedEventArgs e)
{
frame1.Navigate(typeof(Login));
}
Si se presiona el botón "Acerca De" luego se ejecuta el código:
private void boton2_Click(object sender, RoutedEventArgs e)
{
frame1.Navigate(typeof(Acercade));
}
El archivo Login.xaml:
<Page
x:Class="Proyecto19.Login"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Proyecto19"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Background="#F5C178">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Ingreso al sistema" HorizontalAlignment="center" FontSize="35" FontFamily="Tahoma" />
<Grid Grid.Row="1" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Nombre de usuario:" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" Margin="10,10,10,10" />
<TextBox x:Name="usuario" Width="150" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" Margin="10,10,10,10" />
<TextBlock Text="Clave usuario:" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right" Margin="10,10,10,10" />
<PasswordBox x:Name="clave" Width="150" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" Margin="10,10,10,10" />
<Button x:Name="boton1" Content="Confirmar" Grid.Row="2" Grid.Column="1" Margin="10,10,10,10" />
</Grid>
</Grid>
</Page>
Por último el arhivo Acercade.xaml:
<Page
x:Class="Proyecto19.Acercade"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Proyecto19"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<StackPanel VerticalAlignment="Center">
<TextBlock Text="Programador: xxxxxxxxxxxxx" FontSize="25" Margin="10,10,10,10" HorizontalAlignment="Center"/>
<TextBlock Text="Versión 1.0" FontSize="20" Margin="10,10,10,10" HorizontalAlignment="Center"/>
</StackPanel>
</Grid>
</Page>
Ahora cuando ejecutamos la aplicación según el botón que presionamos podemos ver:
La página que se muestra al presionar el botón "Acerca de" es:
Como podemos observar la página MainPage.xaml siempre está visible, solo varía la que indicamos en el Frame.
Este proyecto lo puede descargar en un zip desde este enlace :Proyecto19.zip