Ch03 Layout.

Presentation on theme: "Ch03 Layout."— Presentation transcript:

1 Ch03 Layout

2 Overview Grid StackPanel Canvas

3 容器(Container)控制項：Layout
Dynamic layout Grid 將控制項安排在一個表格中 StackPanel 將控制項依據由上到下由左到右安排 Absolute layout Canvas 將控制項依據座標安排

4 Grid- RowDefinitions RowDefinitions定義此Grid的Row要如何安排
Auto指調整成此row中控制項的大小 *指此row使用剩下的空間 Grid.Row=“0”為此控制項使用第1個RowDefinition when only numbers are present, it represents that number of pixels. Generally, it's not a good idea to use exact pixels in layouts for widths and heights because of the likelihood that screens -- even Windows Phone screens, can have different dimensions. Instead, it's preferable to use relative values like Auto and star sizing for layout. Control widths and heights are assumed to be 100% unless otherwise specified. That's why the rectangles take up the entire "cell" width. This Rectangle是一個長方形的控制項

5 練習CH03-01 請完成上一張投影片的程式碼

6 Grid- ColumnDefinitions
ColumnDefinitions定義此Grid的Column要如何安排 Grid.Column=“0”為此控制項使用第1個ColumnDefinition when only numbers are present, it represents that number of pixels. Generally, it's not a good idea to use exact pixels in layouts for widths and heights because of the likelihood that screens -- even Windows Phone screens, can have different dimensions. Instead, it's preferable to use relative values like Auto and star sizing for layout. Control widths and heights are assumed to be 100% unless otherwise specified. That's why the rectangles take up the entire "cell" width. This

7 練習CH03-02 請完成上一張投影片的程式碼

8 練習CH03-03 請完成右邊UI的layout 紅色高度:藍色高度:綠色高度=1:2:3

9 Grid- RowDefinitions and ColumnDefinitions
當沒有指定Grid.Row or Grid.Column時，代表第一個row (row 0) or 第一個欄(column 0).

10 練習CH03-04 請完成上一張投影片的程式碼

11 StackPanel 安排控制項的方向： Horizontal為水平方向，由左到右 Vertical為垂直方向，由上到下
VerticalAlignment：垂直對齊 Top Bottom Center Stretch HorizontalAlignment：水平對齊 Left Right Orientation has a default value of "Vertical"

12 練習CH03-05 請完成上一張投影片的程式碼

13 StackPanel

14 練習CH03-06 請完成上一張投影片的程式碼

15 練習CH03-07 200x200 請完成右邊的layout

16 Canvas

17 練習CH03-08 請完成上一張投影片的程式碼

18 補充

19 Grid- RowDefinitions and ColumnDefinitions
<Grid> <Rectangle Fill="Blue" Height="100" Width="100" HorizontalAlignment="Left" VerticalAlignment="Top" /> <Rectangle Fill="Red" HorizontalAlignment="Right" VerticalAlignment="Bottom" /> <Rectangle Fill="Green“ HorizontalAlignment="Center" VerticalAlignment="Center" /> <Rectangle Fill="Yellow" VerticalAlignment="Top" Margin="100,100"/> <Rectangle Fill="White" VerticalAlignment="Bottom" Margin="50,0,0,50"/> </Grid> Margins are defined ... as a series of numeric values separated by commas. This convention was borrowed from Cascading Style Sheets. Margin="10,20,30,40“ Means, 10 pixels from the left boundary, 20 pixels from the top boundary, 30 pixels from the right boundary, 40 pixels from the bottom boundary.