mauroDev.NINJA

Entradas recientes


Comentarios recientes


Archivos


Categorías


Meta


Pasando parámetros entre pantallas

Mauricio AndrésMauricio Andrés

Hola y Bienvenidos de nuevo!

En el post anterior hablamos de cómo podíamos en Windows 10 navegar entre pantallas utilizando el método Navigate de nuestro Frame y en esta ocasión continuaremos con ese proyecto pero ahora a la navegación le agregaremos parámetros que podremos utilizar una vez que lleguemos a la otra pantalla. Recuerda que puedes descargar el código del proyecto anterior aquí .

Vamos a ir a nuestro MainPage.xaml y editaremos el TextBlock en la linea número 13 aproximadamente, y lo transformaremos en un TextBox para que pueda recibir escritura, también le asignaremos un nombre conveniente para el ejemplo “tb_Name”, quedaría mas o menos así.

<TextBox x:Name="tb_Name"
                      Text="Tu Nombre" 
                       HorizontalAlignment="Center"
                       FontSize="45"
                       FontWeight="Light"/>

Luego en nuestro code behind MainPage.xaml.cs modificaremos nuestra navegación agregando como parámetro el texto de nuestro TextBox declarado anteriormente en nuestra pantalla.

private void btn_Avanzar_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(Page2), tb_Name.Text);
        }

Eso es todo lo que necesitamos para enviar nuestro parámetro a la pantalla Page2. Ahora, en nuestra segunda pantalla debemos recibir este parametro, manipularlo y luego presentarlo en pantalla, para esto haremos lo siguiente.
En Page2.xaml modificaremos el TextBlock de la línea 13 de tu proyecto, y lo transformaremos en un TextBox, de la siguiente manera, recuerda darle un nombre.

<TextBlock x:Name="tb_passedName"
                       HorizontalAlignment="Center"
                       FontSize="45"
                       FontWeight="Light"
                           TextWrapping="Wrap"
                           TextAlignment="Center"/>

Ahora, en nuestro code behind (Page2.xaml.cs) sobreescribiremos el método OnNavigatedTo de nuestra clase Page2, entregandole nuestro parámetro y declarando una pequeña funcionalidad dentro de ésta, abajo del código te explico su función.

Page2.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            string myName = e.Parameter as string;

            if (!string.IsNullOrWhiteSpace(myName))
            {
                tb_passedName.Text = "Bien hecho! " + myName;
            }
            else
            {
                tb_passedName.Text = "Algo malo pasó :( inténtalo de nuevo!";
            }
        }

A nuestro metodo OnNavigatedTo le hemos asignado como argumento NavigationEventArgs e, el cual trae entre otras cosas el parámetro de nuestro TextBox en MainPage, tomamos nuestro parámetro y se lo asignamos a una variable local myName y lo casteamos como string. Luego, si nuestro string es nulo, esta vacío, o sólo es espacios en blanco, le asignará a nuestro TextBox un mensaje de error, en el caso contrario, si nuestro parámetro ingresado es correcto, nos mostrará en pantalla lo que sea que hayamos ingresado en MainPage.

Gracias a esto, ahora podremos pasar cualquier objeto a la pantalla a donde navegamos. Pero hey!, me lanzó un error cuando trato de pasar más de un parametro en método Navigate.

Eso es correcto, el método Navigate sólo soporta un objeto como parámetro, lo que hacemos en este caso es crear una clase que contenga todos los parámetros que queramos pasar entre pantallas.

Volvamos a nuestro MainPage y agreguemos otro TextBox a la pantalla para nuestro apellido, abajo de nuestro nombre, de la siguiente manera.

<TextBox x:Name="tb_LastName"
                      Text="Tu Apellido" 
                       HorizontalAlignment="Center"
                       FontSize="45"
                       FontWeight="Light"
                         Margin="0,10,0,0"/>

Ahora necesitamos crear una clase para declarar nuestros parámetros de nombre y apellido, para esto haremos click derecho sobre nuestro proyecto -> Agregar -> Clase, y la llamaremos Datos.cs
Declararemos dos variables de tipo string para nuestro nombre y apellido, quedaría mas o menos así.
Datos.cs

  class Datos
    {
        public string myName { get; set; }
        public string myLastName { get; set; }
    }

Ahora en MainPage.xaml.cs inicializaremos un objeto de tipo Datos y en el evento Click de nuestro botón Avanzar asignaremos a myName y myLastName los TextBox correspondientes a cada uno. Finalmente en nuestro metodo Navigate, asignaremos como parámetro nuestro objeto myData, toda nuestra clase MainPage debería quedar así.

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace PassingDataInNavigation
{
    public sealed partial class MainPage : Page
    {
        Datos myData = new Datos();
        public MainPage()
        {
            InitializeComponent();           
        }

        private void btn_Avanzar_Click(object sender, RoutedEventArgs e)
        {
            myData.myName = tb_Name.Text;
            myData.myLastName = tb_LastName.Text;
            Frame.Navigate(typeof(Page2), myData);
        }
    }
}

Lo único que resta por hacer es editar es nuestro Page2, a nuestra vista le agregaremos un campo para mostrar el apellido.

                <TextBlock x:Name="tb_passedLastName"
                           HorizontalAlignment="Center"
                           FontSize="45"
                           FontWeight="Light"
                           TextWrapping="Wrap"
                           TextAlignment="Center"/>

Finalmente, en nuestro code behind de Page2, modificaremos nuestro método OnNavigatedTo, ya que ahora no recibimos un parámetro de tipo TextBox, sino que un objeto de tipo Datos.

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            Datos passedData = e.Parameter as Datos;
            string myName = passedData.myName;
            string myLastName = passedData.myLastName;

            if (!string.IsNullOrWhiteSpace(myName)) 
            {
                tb_passedName.Text = "Bien hecho! " + myName;
                tb_passedLastName.Text = myLastName;
            }
            else
            {
                tb_passedName.Text = "Algo malo pasó :( inténtalo de nuevo!";
                tb_passedLastName.Text = "No ingresaste apellido :(";
            }
        }

Hora de probar!

Elige el emulador de Windows Mobile, y al momento de ejecutar deberías ver algo como esto, luego de que hayas comprobado que todo anda bien, pruebalo con los distintos simuladores y comienza a modificar el código a gusto, puedes probar creando nuevas pantallas, otro tipo de campos y nuevas clases de objetos! 🙂

Windows_Mobile_1
Windows_Mobile_1

Hasta aquí hemos llegado por el momento, espero que hayas aprendido una forma simple y eficaz de pasar datos entre diferentes pantallas de tu aplicación, vimos que podemos pasar incluso más de un parámetro, creando un objeto que abarque todo lo que queramos transferir.

Recuerda que puedes descargar el código de ejemplo aquí abajo, y como siempre estoy atento a tus consultas y sugerencias, comparte esto con tus amigos, hasta la próxima!

Descarga el Código desde GitHub

I love to make impact through #coding and #technology, I'm a #software #developer and #musician!

Comments 0
There are currently no comments.