Silverlight – Step by Step (phần 3)

Thêm một đối tượng vào Canvas
Một Canvas chứa và đặt vị trí cho các đối tượng khác. Để thêm một đối tượng vào Canvas, bạn hãy chèn nó vào giữa cắp thẻ <Canvas>. Ví dụ sau sẽ thêm một hình ellipse và trong một Canvas. Vì Canvas là đối tượng gốc nên tốt hơn hết là bạn nên khai báo các thuộc tính về namespace (xmlns) cần thiết cho nó.

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Ellipse
     Height="200" Width="200"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

 
Một Canvas có thể chứa một số bất kỳ các đối tượng khác, thậm chí cả các Canvas khác.

Đặt vị trí cho một đối tượng
Để đặt vị trí cho một đối tượng trong Canvas, bạn đặt các thuộc tính Canvas.Left và Canvas.Top trên đối tượng đó. Thuộc tính Canvas.Left chỉ ra khoảng cách từ đối tượng đế cạnh bên trái của Canvas chứa nó, và Canvas.Top chỉ ra khoảng cách đến cạnh trên của Canvas. Ví dụ sau cũng vẫn dùng đối tượng ellipse trong cùng ví dụ trước như đặt lại ví trí của nó là 30 pixel (điểm trên màn hình) tính từ bên trái và 30 pixel tính từ phía trên của Canvas.
<Canvas
xmlns=”http://schemas.microsoft.com/client/2007&#8243;
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”&gt;
<Ellipse
Canvas.Left=”30″ Canvas.Top=”30″
Height=”200″ Width=”200″
Stroke=”Black” StrokeThickness=”10″ Fill=”SlateBlue” />
</Canvas>

Hình minh họa sau sẽ giúp bạn hiểu hơn về hệ tọa độ được dùng trong Canvas và vị trí của hình ellipse trong ví dụ trước.

z-order
Thuật ngữ z-order được dùng để chỉ độ sâu (chiều thứ 3 trên hệ tọa độ xyz), hay nói cách khác là nếu có nhiều đối tượng nằm chồng lên nhau thì z-order sẽ xác định đối tượng nào nằm trên, đối tượng nào nằm dưới
Mặc nhiên, z-order của các đối tượng trong một Canvas sẽ được xác định bởi thứ tự chúng được khai báo. Đối tượng nào được khai báo sau sẽ nằm lên trên đối tượng được khai báo trước. Ví dụ sau sẽ tạo ra 3 ellipse, bạn sẽ thấy đối tượng được khai báo sau cùng (màu xanh lá cây) sẽ nằm lên trên các đối tượng khác.

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Ellipse
      Canvas.Left="5" Canvas.Top="5"
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Silver" />

  <Ellipse
      Canvas.Left="50" Canvas.Top="50"
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />      

  <Ellipse
      Canvas.Left="95" Canvas.Top="95"
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Lime" />     

</Canvas>

Bạn có thể thay đổi điều này bằng cách đặt lại thuộc tính Canvas.ZIndex của đối tượng bên trong Canvas, giá trị càng cao thì sẽ nằm càng gần về phía trước, và càng thấp thì càng nằm ra sau. Ví dụ sau cũng sẽ tương tự như cái trước, chỉ có một thay đổi là các giá trị của z-order đã được đặt ngược lại, bạn sẽ thấy trong trường hợp này, hình ellipse màu bạc sẽ nằm lên trên cùng.

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Ellipse
      Canvas.ZIndex="3"
      Canvas.Left="5" Canvas.Top="5"
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Silver" />

  <Ellipse
      Canvas.ZIndex="2"
      Canvas.Left="50" Canvas.Top="50"
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="DeepSkyBlue" />      

  <Ellipse
      Canvas.ZIndex="1"
      Canvas.Left="95" Canvas.Top="95"
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="Lime" />     

</Canvas>

Chiều rộng và chiều cao
Canvas, hình họa và nhiều thành phần khác đều có thuộc thuộc tính Width và Height cho phép chỉ ra kích thước của nó. Ví dụ sau sẽ tạo một hình ellipse cao 200 pixel và rộng 200 pixel, nhớ là không được dùng giá trị theo kiểu phần trăm %.

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse
      Canvas.Left="30" Canvas.Top="30"
      Height="200" Width="200"
      Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>


Ví dụ tiếp theo đặt Width và Height của đối tượng Canvas cha thành 200 và đặt màu nền cho nó là Lime.
<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="200" Height="200"
   Background="LimeGreen">

  <Ellipse
    Canvas.Left="30" Canvas.Top="30"
    Height="200" Width="200"
    Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>


Khi chạy ví dụ này, hình chữ nhật màu xanh lá cây chính là Canvas, phần màu trắng là phần còn lại của Silverlight plug-in không bị che phủ bởi Canvas. Bạn sẽ thấy rằng phần nằm ngoài Canvas của hình ellipse sẽ không bị xén mất.
Nếu không đặt thì giá trị mặc nhiên của Width và Height sẽ là 0.

Các Canvas lồng nhau
Một Canvas có thể chứa những Canvas khác. trong ví dụ sau bạn sẽ thấy một Canvas lại chứa 2 Canvas khác bên trong.

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas Height="50" Width="50" Canvas.Left="30" Canvas.Top="30"
      Background="blue"/>

  <Canvas Height="50" Width="50" Canvas.Left="130" Canvas.Top="30"
      Background="red"/>
</Canvas>