Silverlight – StackPanel

StackPanel được dùng để chứa những controls khác liên tiếp nhau.

2 button được sắp xếp theo chiều dọc trong StackPanel

XAML:

<StackPanel x:Name="Root" Background="LightSkyBlue">      <Button Content=”Button”> </Button> <Button Content=”Button”></Button> </StackPanel>

Chúng ta còn có thể sắp xếp chúng theo chiều ngang hoặc dọc (mặc định) thông qua thuộc tính Orientation

XAML:

<StackPanel x:Name="Root" Background="LightSkyBlue" Orientation="Horizontal">      <Button Content=”Button”></Button> <Button Content=”Button”></Button> </StackPanel>

Ta có thể chỉnh lại height và width của button:

<StackPanel x:Name="Root" Background="LightSkyBlue" Orientation="Horizontal"> <Button Content="Button" Height="30" Width="70"></Button> <Button Content="Button" Height="30" Width="70"></Button> </StackPanel>

ta được như vầy:

Thêm thuộc tính VerticalAlign:

<StackPanel x:Name="Root" Background="LightSkyBlue" Orientation="Horizontal"> <Button Content="Button" Height="30" Width="70" VerticalAlignment="Top">            </Button> <Button Content="Button" Height="30" Width="70" VerticalAlignment="Top">            </Button> </StackPanel>

 

Silverlight – Canvas

Canvas là 1 layout control cho phép chứa những controls khác.
Những controls khi thêm vào trong Canvas có thể sử dụng Canvas.Left và Canvas.Right để chỉ ra vị trí của nó trong Canvas

XMAL của hình:
     <Canvas x:Name="LayoutRoot" Background="LightSkyBlue">
          <TextBlock Text="Text tại (55,15)" Canvas.Left="55" Canvas.Top="15" FontSize="25">
          <Canvas Background="LightCyan" Canvas.Left="25" Canvas.Top="70" Height="120" Width="275">
               <TextBlock Text="Canvas tại (25,70)" Canvas.Left="10">
          <Button Content="Nút tại (25,30)" Canvas.Left="25" Canvas.Top="30"></Button>
          </Canvas>
     </Canvas>

Controls được thêm còn có thêm 1 thuộc tính nữa là Canvas.ZIndex. Controls nào có Canvas.ZIndex cao hơn sẽ được nằm trên.
Ví dụ

Button nằm trên Canvas thứ 2 do có Canvas.ZIndex lớn hơn

XMAL:
<Canvas Background="LightCyan" Canvas.Left="30" Canvas.Top="30" Height="50" Width="85" Canvas.ZIndex="0">
<Button Content="Button" Canvas.Left="68" Canvas.Top="22" Canvas.ZIndex="1"></Button>
</Canvas>


Ngược lại