Ch03 Layout

Overview Grid StackPanel Canvas

容器(Container)控制項：Layout Dynamic layout Grid 將控制項安排在一個表格中 StackPanel 將控制項依據由上到下由左到右安排 Absolute layout Canvas 將控制項依據座標安排 https://msdn.microsoft.com/en-us/library/windows/apps/jj207042(v=vs.105).aspx

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是一個長方形的控制項

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

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

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

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

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

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

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

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

StackPanel

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

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

Canvas

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

補充

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.