Windows Store và Page: Navigation Điều hướng trang truyền List Object trên Windows Store Apps

Yêu cầu: Windows 10 và Visual Studio 2015

- Truyền List Object từ Page 1 sang Page 2

//Truyền List Object
private void btnSend_Click(object sender, RoutedEventArgs e)
{

    var myList = new List<string>() {"Dog", "Panda","Cat",};

    this.Frame.Navigate(typeof(Page2), myList);
}

//Nhận List Object
protected override void OnNavigatedTo(NavigationEventArgs e)
{

    var myList = e.Parameter as List<string>;

    this.lblResult.Text = "";

    foreach (string val in myList)
    {
        this.lblResult.Text = this.lblResult.Text + " " + val;
    }

}

- Quay lại project của Visual Studio trên Windows Store Apps

- Tạo mới một trang mới

- Trang mới Page 2 có tên BlankPage1.xaml

- Cấu trúc của project đã có hai trang MainPage và BlankPage1

MainPage.xaml

Windows Store 2017

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

    <Grid>
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="#FF50C53D" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Button x:Name="btnNext" Content="Next &gt;&gt;" HorizontalAlignment="Left" Margin="510,446,0,0" VerticalAlignment="Top" FontSize="48" Click="btnNext_Click"/>
        <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="513,180,0,0" TextWrapping="Wrap" Text="Page 1" VerticalAlignment="Top" FontSize="72"/>
        <TextBox x:Name="inputName1" HorizontalAlignment="Left" Margin="230,330,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="67" Width="200" FontSize="36"/>
        <TextBox x:Name="inputName2" HorizontalAlignment="Left" Margin="530,330,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="67" Width="200" FontSize="36"/>
        <TextBox x:Name="inputName3" HorizontalAlignment="Left" Margin="830,330,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="67" Width="200" FontSize="36"/>
    </Grid>
</Page>

- Click double vào Button Next đê tạo sự kiện cho trang MainPage

MainPage.xaml.cs

Windows Store 2017

using System;
using System.Collections;
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;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace App1
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void btnNext_Click(object sender, RoutedEventArgs e)
        {
            var myList = new List<string>() { this.inputName1.Text, this.inputName2.Text, this.inputName3.Text, };

            this.Frame.Navigate(typeof(BlankPage1), myList);
        }
    }
}

 - Xây dựng Page 2 BlankPage1

BlankPage1.xaml

Windows Store 2017

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

    <Grid>
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="#FF742EB9" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Button x:Name="btnBack" Content="&lt;&lt; Back" HorizontalAlignment="Left" Margin="542,382,0,0" VerticalAlignment="Top" FontSize="48" Click="btnBack_Click"/>
        <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="542,160,0,0" TextWrapping="Wrap" Text="Page 2" VerticalAlignment="Top" FontSize="72"/>
        <TextBlock x:Name="lblResult" HorizontalAlignment="Left" Margin="502,292,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="46"/>

    </Grid>
</Page>

- Click Double vào Button Back để tạo sự kiện cho Page 2

BlankPage1.xaml.cs

Windows Store 2017

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;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace App1
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class BlankPage1 : Page
    {
        public BlankPage1()
        {
            this.InitializeComponent();
        }

        private void btnBack_Click(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(MainPage));
        }
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            var myList = e.Parameter as List<string>;

            this.lblResult.Text = "";

            foreach (string val in myList)
            {
                this.lblResult.Text = this.lblResult.Text + " " + val ;
            }
        }
    }
}

Tác giả: Dương Hữu Đại