---
# System prepended metadata

title: UWP教學(二)
tags: [Button_Click, Navigate]

---

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

UWP教學(二)
===
![downloads](https://img.shields.io/github/downloads/atom/atom/total.svg)
![build](https://img.shields.io/appveyor/ci/:user/:repo.svg)
![chat](https://img.shields.io/discord/:serverId.svg)

## 目錄

[TOC]

## 前言

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

目標
---
![](https://i.imgur.com/IUP2jGa.png)
![](https://i.imgur.com/FyhQOIS.png)


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


Navigate
---
```xaml=
<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 事件。

``` xaml=
<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 函式
---
```c#=
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`
