---
title: 'UWP教學(二)'
disqus: hackmd
---

UWP教學(二)
===

## 目錄

[TOC]

## 前言

UWP 教學(一)做好了切版與按鈕，在這篇教學裡要說明如何設定事件

目標
---

以上是咖啡點餐頁面的第二頁及第三頁，在這篇教學裡要學習的就是如何轉換頁面。這個行為 UWP 裡稱為 Navigate。
其中跳轉頁面是使用上方四個按鈕，每個按鈕對應到的是不同頁面。

Navigate
---

<Grid Grid.Row="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <Frame Name="MyFrame"></Frame>
    <Image Source="Assets/background.jpg" Grid.Column="1" Stretch="UniformToFill" />
</Grid>

上一篇教學最後的<Frame Name="MyFrame"></Frame> 就是接下來頁面會改變的部分，要在點擊上方按鈕時，跳轉頁面，首先在 Button 裡加上 Click 事件。

<Button Name="Donuts_Button"
        Click="Donuts_Button_Click"
        Grid.Column="0">
        <StackPanel Orientation="Horizontal">
            <Image Source="Assets/donut-icon.png" />
            <TextBlock Text="Donut" Foreground="White" />
        </StackPanel>
</Button>
<Button Name="Coffee_button"
        Click="Coffee_button_Click"
        Grid.Column="1">
        <StackPanel Orientation="Horizontal">
            <Image Source="Assets/coffee-icon.png" />
            <TextBlock Text="Coffee" Foreground="White" />
        </StackPanel>
</Button>

> 先設定 Button Name，在設定 Click 時會自動跳出 Click 名稱選項 Donuts_Button_Click ， 四個 Button 皆相同。

>在專案裡新增 DonutPage.xaml、CoffeePage.xaml、CompletePage.xaml、SchedulePage.xaml 四個頁面。

>

Click 函式
---

public MainPage()
{
    this.InitializeComponent();
    MyFrame.Navigate(typeof(DonutPage));
}

private void Donuts_Button_Click(object sender, RoutedEventArgs e)
{
    MyFrame.Navigate(typeof(DonutPage));
}

private void Coffee_button_Click(object sender, RoutedEventArgs e)
{
    MyFrame.Navigate(typeof(CoffeePage));
}

private void Schedule_button_Click(object sender, RoutedEventArgs e)
{
    MyFrame.Navigate(typeof(SchedulePage));
}

private void Complete_button_Click(object sender, RoutedEventArgs e)
{
    MyFrame.Navigate(typeof(CompletePage));
}

> 以上程式碼位於 MainPage.xaml.cs

> MainPage() 函式初始化第一頁是 DonutPage，this.InitializeComponent();
MyFrame.Navigate(typeof(DonutPage));
表示 MainPage.xaml 裡的 MyFrame 被放入 DonutPage 這個頁面。

> Click 事件寫法 & Navigate 到此結束囉! 進入下一章節吧!

###### tags: `Button_Click` `Navigate`