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

UWP 教學(一)
===

## 目錄

[TOC]

## 前言
> 教學影片
> [https://space.bilibili.com/18340402/channel/detail?cid=1436](https://)
> 程式碼下載
> [https://github.com/Windows-Readiness/AbsoluteBeginnersWin10](https://)

這篇教學文是跟著微軟 Bob 教學影片的學習紀錄，前 32 部教學影片主要在講解前端排版設定等程式碼寫法，這篇文章以咖啡點餐的範例將前端基礎做個講解。

那就開始學習UWP吧(微軟大法好XDD)!

1. 下載 visual studio 2017
2. 建立一個空白專案
3. 然後就開始吧

目標
---


圖片為最後要完成的目標
版面切分為:
1. 上下兩部分
2. 上為四個分頁按鈕
3. 下分成左右兩半 左:右 = 2:1

版面基本配置
---
版面配置分成兩種
1. Grid
> 先規劃好空間，再放入內容
> 可重疊
2. StackPanel
> 直接放入內容，會按照順序排列
> 可以設定水平或是垂直排列
> 不會重疊

>以上兩種方式會混合使用，咖啡點餐案例都會使用到

<Grid.RowDefinitions>
    <RowDefinition Height="100" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

> RowDefinitions 設定版面縱向分成幾部分:
1. <RowDefinition Height="*"/>
2. "*"表示分成幾等分
3. 若設定為 1 * 2 * 3 *
<RowDefinition Height="*" />
<RowDefinition Height="2*" />
<RowDefinition Height="3*" />
表示由上至下分成3部分，且每一部分的比例分別為1:2:3
4. 在這個案例當中，只要分成2部分，100pixel為按鈕，* 表示其餘部分。

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

> ColumnDefinitions 設定橫向分為幾部分
1. 以上表示由左至右切割成四等分
2. 分給四個按鈕
3. 以下為按鈕配置方式

<Button Name="Donuts_Button"
        Grid.Column="0">
    <StackPanel Orientation="Horizontal">
        <Image Source="Assets/donut-icon.png" />
        <TextBlock Text="Donut" Foreground="White" />
    </StackPanel>
</Button>
<Button Name="Coffee_button"
        Grid.Column="1">
    <StackPanel Orientation="Horizontal">
        <Image Source="Assets/coffee-icon.png" />
        <TextBlock Text="Coffee" Foreground="White" />
    </StackPanel>
</Button>
<Button Name="Schedule_button"
        Grid.Column="2">
    <StackPanel Orientation="Horizontal">
        <Image Source="Assets/schedule-icon.png" />
        <TextBlock Text="Schedule" Foreground="White" />
    </StackPanel>
</Button>
<Button Name="Complete_button"
        Grid.Column="3">
    <StackPanel Orientation="Horizontal">
        <Image Source="Assets/Complete-icon.png" />
        <TextBlock Text="Complete" Foreground="White" />
    </StackPanel>
</Button>

1. > 每一個按鈕對應到的是
> Grid.Column="0"
> Grid.Column="1"
> Grid.Column="2"
> Grid.Column="3"
> Grid的配置方式就是降紫 要把它擺在第幾個就給他幾號

2. > 這裡有 StackPanel 的配置
> <StackPanel Orientation="Horizontal" > 水平排列 (Vertical是垂直)
> 這裡的水平排列是給每個按鈕裡的縮圖與文字
> StackPanel 就是簡單方便，分橫的跟直的

<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>

> 將(一)的下半部<Grid Grid.Row="1">切分
如圖所示左右 2:1
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />

:::info
版面配置介紹到這結束囉!進入下一個教學吧!
:::

###### tags: `Grid` `StackPanel`