Building Universal Windows Apps với C#/XAML, dựa trên một khóa học cùng tên trên MVA, hướng dẫn các bạn xây dựng ứng dụng Universal bằng C# và XAML.

Đối tượng: Lập trình viên Windows Store, Windows Phone.

Các khóa học tham khảo:

Bài 4: Layout controls

Panel Control Mô tả
Canvas
  • Các control bên trong được bố trí tự do dựa trên thuộc tính Canvas.TopCanvas.Left
  • Phân lớp trên dưới dựa theo thuộc tính Canvas.ZIndex.
  • Khi panel thay đổi kích thước không làm thay đổi kích thước của các control bên trong.
  • Control con có thể to hơn hoặc hiển thị một phần trong Canvas
StackPanel
  • Control con đính lên theo thứ tự từ trên xuống hoặc từ dưới lên
  • Nếu không set cứng giá trị thì control con sẽ mở rộng cho vừa với kích thước StackPanel theo chiều rộng (width) hoặc chiều cao (height) nếu OrientationHorizontal
  • Nội dung bên trong có thể làm tràn SlackPanel, nhưng chỉ hiển thị một phần nếu nó to hơn panel.

Nghĩa là ta cần có ScrollViewer nếu muốn xem hết nội dung bên trong của một SlackPanel chứa quá nhiều control

Grid
  • Sắp xếp các control theo cột và dòng.
  • Vị trí của control được định nghĩa ứng với thuộc tính Grid.RowGrid.Column
  • Control có thể được mở rông sang nhiều cột hoặc nhiều dòng với thuộc tính Grid.RowSpanGrid.ColumnSpan
  • Nếu không set cứng các thuộc tính quy định kích thước thì control sẽ tự fill đầy ô của Grid
  • Nội dung bên trong không thể làm tràn Grid, chỉ hiển thị một phần nếu nó to hơn panel.
VariableSizedWrapGrid
  • Các control bên trong được sắp xếp lần lượt theo dòng và cột và sẽ tự động wrap sang dòng mới hoặc cột mới nếu đã fill đủ dòng/cột theo thuộc tính MaximumRowsOrColumns của Grid.
  • Các control sắp xếp theo cột/dòng tương ứng với thuộc tính Orientation của Grid
  • Tương tự chúng có thê mở rộng sang nhiều dòng/cột với thuộc tính VariableSizedWrapGrid.RowSpanVariableSizedWrapGrid.ColumnSpan
  • Kích thước của từng ô được quy định bởi thuộc tính ItemHeightItemWidth.
  • Nội dung bên trong không thể làm tràn Grid, chỉ hiển thị một phần nếu nó to hơn panel.

Canvas

[xml]<Canvas Width="120" Height="120">
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20"/>
<Rectangle Fill="Green" Canvas.Left="40" Canvas.Top="40"/>
<Rectangle Fill="Yellow" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>[/xml]

StackPanel

[xml] <StackPanel>
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue"/>
<Rectangle Fill="Green"/>
<Rectangle Fill="Yellow"/>
</StackPanel>
[/xml]

Grid

[xml]<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue" Grid.Row="1"/>
<Rectangle Fill="Green" Grid.Column="1"/>
<Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="1"/>
</Grid>[/xml]

VariableSizedWrapGrid

[xml] <VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue" Height="80"
VariableSizedWrapGrid.RowSpan="2"/>
<Rectangle Fill="Green" Width="80"
VariableSizedWrapGrid.ColumnSpan="2"/>
<Rectangle Fill="Yellow" Height="80" Width="80"
VariableSizedWrapGrid.RowSpan="2"
VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>[/xml]

Kết hợp chúng lại

[xml] <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<Style TargetType="Rectangle">
<Setter Property="Height" Value="100"/>
<Setter Property="Width" Value="100"/>
<Setter Property="Margin" Value="20"/>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>

<StackPanel Grid.RowSpan="2">
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue"/>
<Rectangle Fill="Green"/>
<Rectangle Fill="Yellow"/>
</StackPanel>

<TextBlock Text="Text…" FontSize="72" Grid.Column="1"
VerticalAlignment="Bottom"/>

<StackPanel Grid.Row="2" Grid.Column="1"
Background="DarkGray"
Height="420" VerticalAlignment="Top">
<Canvas Width="220" Height="220">
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20"/>
<Rectangle Fill="Green" Canvas.Left="40" Canvas.Top="40"
Canvas.ZIndex="4"/>
<Rectangle Fill="Yellow" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>
<StackPanel Orientation="Horizontal">
<Rectangle Fill="Red"/>
<Rectangle Fill="Blue"/>
<Rectangle Fill="Green"/>
<Rectangle Fill="Yellow"/>
</StackPanel>
</StackPanel>
</Grid>
[/xml]