UWP 基礎頁面切換

前言

使用一個簡單的範例介紹如何切換頁面, 基本上會用到Frame的Navigate()作為頁面切換的方法, 以及實作OnNavigatedTo 處理頁面切換時的動作

假設今天我們要設計一支程式, 在主頁面(MainPage)上顯示顧客(Person)資料, 並且提供按鈕(Edit), 讓使用者按下去之後, 切換主頁面到編輯頁面(EditPage)修改資料, 使用情境如下：

情境一：使用者在主頁(MainPage)點擊Edit按鈕

情境二：使用者在編輯頁(EditPage)點擊Save按鈕

Data Model

• 我們首先建立一個Person的類別來表示顧客資訊

	public class Person:INotifyPropertyChanged
	{
	private string name;
	private int id;
	public string Name { get => name; set { name = value; NotifyPropertyChanged("Name"); } }
	public int Id { get => id; set { id = value; NotifyPropertyChanged("Id"); } }
	public event PropertyChangedEventHandler PropertyChanged;
	public void NotifyPropertyChanged(string propertyName)
	{
	PropertyChangedEventHandler handler = PropertyChanged;
	if (handler != null)
	{
	PropertyChangedEventArgs args = new PropertyChangedEventArgs(propertyName);
	handler(this, args);
	}
	}
	}

view raw Person.cs hosted with ❤ by GitHub

MainPage Code-Behind

• 我們在這邊宣告Person, 用來作UI元件的 Data Binding的目標物件
• 將DataContext 設為 this (作為UI元件的Data Binding的來源)
• 實作Edit按鈕的Click Event handler, 在這個函式內我們從Window.Current.Content取得 root frame 的實體, 然後呼叫它的 Navigate 方法去切換頁面並且把現在的Person資訊傳給EditPage
• 複寫(override) OnNavigatedTo 處理當頁面被切換回MainPage時, 我們要去更新Person

	public sealed partial class MainPage : Page
	{
	private Person person;
	public Person Person { get => person; set => person = value; }
	public MainPage()
	{
	DataContext = this;
	person = new Person
	{
	Id = 21354361,
	Name = "Andy Lai"
	};
	this.InitializeComponent();
	}
	private void Button_Click(object sender, RoutedEventArgs e)
	{
	Frame rootFrame = Window.Current.Content as Frame;
	rootFrame.Navigate(typeof(EditPage),person);
	}
	protected override void OnNavigatedTo(NavigationEventArgs e)
	{
	if(e.Parameter is Person)
	{
	var parm = e.Parameter as Person;
	person = parm;
	}
	base.OnNavigatedTo(e);
	}
	}

view raw MainPage.cs hosted with ❤ by GitHub

MainPage.xaml

• 我們在這邊建立兩個TextBlock並且綁定Code-behind裡的Person.Name, 和Person.Id

	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
	<Grid.RowDefinitions>
	<RowDefinition Height="Auto" />
	<RowDefinition Height="Auto" />
	<RowDefinition Height="Auto" />
	<RowDefinition Height="Auto" />
	</Grid.RowDefinitions>
	<TextBlock Grid.Row="0" Text="Profile" />
	<StackPanel Grid.Row="1" Orientation="Horizontal">
	<TextBlock Text="Id" Margin="5"/>
	<TextBlock Text="{Binding Path=Person.Id, Mode=TwoWay}" Margin="5"/>
	</StackPanel>
	<StackPanel Grid.Row="2" Orientation="Horizontal">
	<TextBlock Text="Name" Margin="5"/>
	<TextBlock Text="{Binding Path=Person.Name, Mode=TwoWay}" Margin="5"/>
	</StackPanel>
	<Button Grid.Row="3" Content="Edit" Margin="5" Click="Button_Click"/>
	</Grid>

view raw MainPage.xaml hosted with ❤ by GitHub

EditPage Code-Behind

• 這邊做的事情其實跟MainPage差不多, 宣告Person, 設定DataContext
• 複寫OnNavigatedTo, 拿MainPage傳過來的Person更新EditPage現在的
• 實作按鈕Click Event handler處理頁面切換的動作並傳遞更新後的Person給MainPage

	public sealed partial class EditPage : Page
	{
	private Person person;
	public Person Person { get => person; set => person = value; }
	public EditPage()
	{
	DataContext = this;
	this.InitializeComponent();
	}
	protected override void OnNavigatedTo(NavigationEventArgs e)
	{
	if(e.Parameter is Person)
	{
	this.person = (Person)e.Parameter;
	}
	base.OnNavigatedTo(e);
	}
	private void Button_Click(object sender, RoutedEventArgs e)
	{
	Frame rootFrame = Window.Current.Content as Frame;
	rootFrame.Navigate(typeof(MainPage), person);
	}
	}

view raw EditPage.cs hosted with ❤ by GitHub

EditPage.xaml

• 在這個頁面供TextBox顯示MainPage傳過來的Person資訊, 以及提供按鈕Save去切換頁面, 然後將更新後的Person回傳給MainPage

	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
	<Grid.RowDefinitions>
	<RowDefinition Height="Auto" />
	<RowDefinition Height="Auto" />
	<RowDefinition Height="Auto" />
	<RowDefinition Height="Auto" />
	</Grid.RowDefinitions>
	<TextBlock Grid.Row="0" Text="Edit" />
	<StackPanel Grid.Row="1" Orientation="Horizontal">
	<TextBlock Text="Name" Margin="5"/>
	<TextBox Text="{Binding Path=Person.Name, Mode=TwoWay}" Width="140" />
	</StackPanel>
	<Button Grid.Row="2" Content="Save" Margin="5" Click="Button_Click"/>
	</Grid>

view raw EditPage.xaml hosted with ❤ by GitHub