UWP 開發入門小筆記（1）
鏈接：[ 全文章目錄 ]
零、介紹
鏈接：教程來源
因爲是用來服務課程設計… …所以不能保證深度。
這是筆記，這是筆記，這是筆記。請配合視頻食用。
一、系列介紹[p1]
1.使用c#（界面用XAML語言）
2.使用win10
3.課內使用的模擬器是：hyper-v
課內鏈接：
【已失效】鏈接：入門者的c#基礎課程：http://bit.do/csharp-fundamentals
【已失效】windows10開發者指南：http://bit.do/developers-guide-to-windows-10
微軟dev中心：http://dev.windows.com
二、創建第一個屬於自己的UWP應用[p2]
（一）一個button的屬性：
Name屬性[Name]：這個button的名字
Content屬性[Content]：在界面上顯示的字
水平對齊[HorizontalAlignment]：外邊距時看與左端的距離，還是與右端的距離
垂直對齊[VerticalAlignment]：外邊距時看與頂端的距離，還是與底端的距離
外邊距[Margin]：格式 “左端距離, 上端距離, 右端距離, 下端距離”（看水平與垂直距離的選擇，外邊距的表達也會不一樣）
（二）修改屬性的三種方法
1、設計界面
2、XAML編輯器
3、屬性窗口
（三）字號（以後會細講）
在XAML裏的字號表示的是在設備上的單位，獨立像素；
屬性窗口裏的值，代表了像素點的個數，單位是每英寸72個像素點。
三、UWP開發話題概覽[p3]
（一）WPF、ASP.net
（二）手機模擬器和GPS在p59+（不在電腦軟件要求之內）
（三）視頻中提及的控件
輸入控件
button：按鈕
textbox：輸入框
drop down list box：下拉框
顯示控件
text block：文本框
排版控件
grid：網格（從第8節課開始學習網格、StackPanel）
（四）SDK[軟件開發工具包]（software development kit）
（五）學習適應性佈局（第37課+）
（六）c#中新的關鍵詞
async
await
task
（七）XAML的基礎：xml（可擴展標記語言）
（八）javascript物件標註[javascript object notation]
四、什麼是XAML[p4]
1.XAML是一種XML的特殊用法，都要符合schema（綱要[schema]：爲元素定義合適的名字以及屬性【一種協議】）
就是MainPage.xaml中前面帶uri的幾段
2.XAML用來簡單的創建類的實例，併爲它們的屬性賦值【比直接用c#寫簡單很多】
註釋：左邊："<!- -" ；右邊："- ->"
五、理解類型轉換器[p5]
類型轉換器[Type converter]：是一個包含能將字符串轉爲顯式聲明值的過程的類型，找到與字符串之匹配的枚舉值【某種意義上將XAML語言轉換成c#】
六、理解默認屬性、複雜屬性和屬性元素語法[p6]
默認屬性[default properties]：把一個元素放在另一個元素中
（對於Button組件，Content屬性是它的默認屬性）
XML中沒有結束標籤的元素稱爲自閉合元素，如自閉合換行符
完整形式爲
複雜屬性：一個控件的屬性不能用一個簡單的XAML性質來表達
Gradient Brush（梯度刷/漸變）
七、理解XAML綱要和命名空間聲明[p7]
就是MainPage.xaml中前面帶uri[Uniform Resource Indicator]（不是URL）的幾段，但是這些uri是無法打開的
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
//定義所有UI Element、GridView、Button以及它們的所有屬性
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
//定義XAML的所有通用規則
xmlns:local="using:HelloWorld"
//不是綱要，只是命名空間
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
//被設計器[designer]所使用，用來代表你在這裏看到的設計界面的樣子
mc:Ignorable="d"
//忽略上面d的那個命名空間
八、網格佈局[Layout]控件[p8]
XAML控件是爲佈局服務的，幾乎所有空間都會有一個Content Property(內容屬性)，內容屬性只能被設置爲另一個對象的實例
對於佈局控件而言，爲了容納更多控件，所以其沒有內容屬性，而由一個子屬性來代替。這裏的佈局控件，就是一種能容納XAML控件的特殊集合類，稱爲 “UI元素集合”
（一）做一個有兩行的網格控件
全屏幕默認是一行一列一格
兩種創建行並設置其高度的方法
1、有三種語法可以用來確定行和列的尺寸
關聯佈局——自動標尺：
...
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>//屬性元素語法
<RowDefinition Height="Auto" /> //第零行需要足夠高來放放在這裏的控件
<RowDefinition Height="*" /> //星號標尺，佔據其他所有空餘可用高度
</Grid.RowDefinitions>
<Rectangle Height="100" Fill="Beige" Grid.Row="0" />//米色塊的高度爲100，放在第0行
<Rectangle Grid.Row="1" Fill="SteelBlue" />//藍色的塊放在第1行，上面定義了互補
//Grid.Row（Grid.Column）是附屬屬性[Attached Properties]，用來指定它的對象本來沒有定義的屬性的值（長方形對象裏面沒有座標屬性）
</Grid>
...
關聯佈局——星號標尺：
...
<Grid.RowDefinitions>//屬性元素語法
<RowDefinition Height="1*" /> //要1份
<RowDefinition Height="2*" /> //要2份
<RowDefinition Height="3*" /> //要3份
//所以行總共被分爲6份
</Grid.RowDefinitions>
...
餘量[Margin]，按像素確定寬和高【不常用】
...
<Grid.RowDefinitions>//屬性元素語法
<RowDefinition Height="100" /> //直接用數值
<RowDefinition Height="200" />
<RowDefinition Height="300" />
</Grid.RowDefinitions>
...
（二）補充
例子：座標賦值（行列用星號標尺3等分）
不提供行列信息時默認爲0
例子：對齊（垂直對齊和水平對齊）&餘量（外邊距）【數值是像素值】
垂直對齊和水平對齊將控件拉向其邊界
餘量（外邊距）將控件推離其邊界
九、StackPanel佈局控件（比Grid更方便）
不用考慮分辨率問題。
控制和管理佈局，默認是從上到下，水平上從左到右；
類似於HTML的Div。
（一）栗子1
像一個一個從上到下的橫木條。
（二）栗子2
（三）栗子3
（四）StackPanel與Grid的區別
1、一些控件，例如Rectabgle和Image，在Grid裏默認是100%*100%
2、Grid格子裏的控件默認自動居中
3、Grid格中可以把控件重疊
綜上，Grid可以很好的做適應性佈局
但爲了方便起見，推薦用StackPanel， 除非在給頁面做整體佈局用Grid。
十、【複習】[p4~p8]：XAML和佈局控件[p10]（略）
十一、【作業1】做一個好看的佈局[p11~p12]
（一）要求：
1.只用Grid網格
2.5’’phone，1920*1080，300%scale
3.headline用48pt，其他文字用10或20pixels
4.左邊字垂直居中
（二）課內的答案
<Grid Margin="10, 0, 0, 0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="ACME Sales Corp" FontSize="48" Grid.ColumnSpan="3" Margin="0, 0, 0, 20" />//Grid.ColumnSpan橫跨列
<TextBlock Grid.Row="1" Text="First Name:" VerticalAlignment="Center" />
<TextBox Grid.Row="1" Grid.Column="1" Margin="0, 0, 0, 10"/>
<TextBlock Grid.Row="2" Text="Last Name:" VerticalAlignment="Center" />
<TextBox Grid.Row="2" Grid.Column="1" Margin="0, 0, 0, 10"/>
<TextBlock Grid.Row="3" Text="Email:" VerticalAlignment="Center" />
<TextBox Grid.Row="3" Grid.Column="1" Margin="0, 0, 0, 10"/>
<Button Grid.Row="4" Grid.Column="1" Content="Save"/>
</Grid>
（三）我的答案
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<TextBlock FontSize="48">ACME Sales Corp</TextBlock>
<TextBlock Grid.Row="1" VerticalAlignment="Center">Frist Name:</TextBlock>
<TextBox Grid.Row="1" VerticalAlignment="Top" HorizontalAlignment="Center" Width="300" TextChanged="TextBox_TextChanged"/>
<TextBlock Grid.Row="2" VerticalAlignment="Center">Last Name:</TextBlock>
<TextBox Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Center" Width="300" TextChanged="TextBox_TextChanged"/>
<TextBlock Grid.Row="3" VerticalAlignment="Center">Email:</TextBlock>
<TextBox Grid.Row="3" VerticalAlignment="Top" HorizontalAlignment="Center" Width="300" TextChanged="TextBox_TextChanged"/>
<Button Grid.Row="4" VerticalAlignment="Top" HorizontalAlignment="Stretch" Content="Save"/>
</Grid>
十二、【作業2】做一個好看的佈局[p13~p14]
（一）要求：
1.只能用StackPanel
2.13.3Desktop(1280*720)100%Scale
3.headline 48pt，第一列的textblock寬250像素，第二列500像素寬，第三列300像素寬，margin10~20
4.lorem ipsum亂碼生成鏈接
（二）課內的答案
...
<StackPanel>
<TextBlock Text="Lorem Ipsum" FontSize="48" Margin="0, 0, 0, 20"/>
<StackPanel Orientation="Horizontal">
<TextBlock Width="250" TextWrapping="Wrap" Margin="0, 0, 20, 0">
第一段文本
</TextBlock>
<TextBlock Width="500" TextWrapping="Wrap" Margin="0, 0, 20, 0">
第二段文本
</TextBlock>
<StackPanel Orientation="Horizontal">
<Rectangle Fill="Blue" Width="200" Height="200" VerticalAlignment="Top"/>
<StackPanel>
<Rectangle Fill="Red" Width="100" Height="100"/>
<Rectangle Fill="Yellow" Width="100" Height="100"/>
</StackPanel>
</StackPanel>
</StackPanel>
</StackPanel>
...
（三）我的答案
...
<StackPanel>
<StackPanel Margin="20, 0, 0, 0">
<TextBlock FontSize="48" Height="Auto">Lorem Ipsum</TextBlock>
<StackPanel Orientation="Horizontal">
<TextBlock Width="250" TextWrapping="WrapWholeWords" Text="第一段文本" />
<TextBlock Width="500" TextWrapping="WrapWholeWords" Margin="20,0,20,0" Text="第二段文本" />
<StackPanel Width="300" Orientation="Horizontal">
<Rectangle Fill="Blue" Width="200" Height="200" VerticalAlignment="Top"/>
<StackPanel Orientation="Vertical">
<Rectangle Fill="Red" Width="100" Height="100" />
<Rectangle Fill="Yellow" Width="100" Height="100" />
</StackPanel>
</StackPanel>
</StackPanel>
</StackPanel>
</StackPanel>
...