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

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

- Điều hướng page 1 sang page 2

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

- 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 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,366,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"/>

    </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.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)
        {
            this.Frame.Navigate(typeof(BlankPage1));
        }
    }
}

- Xây dựng 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"/>

    </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));
        }
    }
}