Silverlight – Step by Step (phần 5)

Thuộc tính Opacity
Thuộc tính Opacity cho phép bạn kiểm soát độ trong suốt của một đối tượng UIElement. Bạn có thể đặt giá trị cho thuộc tính Opacity từ 0 đến 1. Đối tượng càng trong suốt nếu giá trị càng gần về 0, nếu đặt là 0 thì đối tượng sẽ hoàn toàn trong suốt, giá trị mặc nhiên của thuộc tính này là 1.0.

Ví dụ sau đây sẽ tạo 2 hình họa với các thuộc tính Opacity khác nhau:

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

  <Rectangle Opacity="1.0" Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>
  <Rectangle Opacity="0.6" Height="100" Width="100" Canvas.Left="70" Canvas.Top="70"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

Thuộc tính OpacityMask
Thuộc tính OpacityMask cho phép bạn kiểm soát độ trong suốt trong các phần khác nhau của một đối tượng UIElement. Lấy ví dụ, bạn có thể dùng OpacityMask để làm đối tượng mờ dần từ phải sang trái. Thuộc tính OpacityMask nhận vào một đối tượng Brush. Bút vẽ được áp dụng vào đối tượng và kênh alpha (kênh xác định độ trong suốt) sẽ được dùng để xác định độ trong suốt của pixel tương ứng. Nếu một phần nào đó của bút vẽ là trong suốt thì nó cũng sẽ làm cho thành phần tương ứng trong suốt.
Bạn có thể dùng bất kỳ kiểu bút vẽ nào để dùng OpacityMask, tuy nhiên LinearGradientBrush, RadialGradientBrush, và ImageBrush là những kiểu thường dùng nhất.
Ví dụ sau sẽ áp dụng một LinearGradientBrush bản đồ trong suốt vào một đối tượng Rectangle.

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Rectangle Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
    <Rectangle.OpacityMask>
      <LinearGradientBrush>
        <GradientStop Offset="0.25" Color="#00000000"/>
        <GradientStop Offset="1" Color="#FF000000"/>       
      </LinearGradientBrush>
    </Rectangle.OpacityMask>
  </Rectangle>
</Canvas>

Thuộc tính Clip
Thuộc tính Clip cho phép bạn vẽ các phần của một đối tượng một cách chọn lọc. Để dùng thuộc tính Clip, bạn phải cung cấp một đối tượng Geometry (đối tượng hình học) mô tả phần bạn muốn vẽ. Tất cả những phần nằm bên ngoài hình này đều sẽ bị ẩn đi, hay được gọi là “bị xén”.

Ví dụ sau đây dùng một RectangleGeometry để mô tả vùng xén cho một đối tượng Ellipse. Kết quả là, chỉ có phần nào bên trong vùng được định nghĩa bởi RectangleGeometry được hiển thị, những phần còn lại sẽ bị xén.

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

  <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue">
    <Ellipse.Clip>
      <RectangleGeometry Rect="0, 0, 100, 100"/>
    </Ellipse.Clip>
  </Ellipse>
</Canvas>

Thuộc tính RenderTransform
Thuộc tính RenderTransform cho phép bạn dùng đối tượng Transform để quay (rotate), làm xiên (skew), đổi tỷ lệ (scale) hoặc dịch chuyển (translate) một đối tượng. Danh sách sau sẽ mô tả các đối tượng Transform khác nhau mà bạn có thể dùng với thuộc tính RenderTransform.
– RotateTransform: Quay một đối tượng theo một góc nào đó.
– SkewTransform: Làm xiên đối tượng bởi một khoảng theo chiều X hoặc chiều Y.
– ScaleTransform: Phóng to hoặc thu nhỏ một đối tượng theo chiều cao hoặc chiều rộng bởi một khoảng cho trước.
– TranslateTransform: Dịch chuyển đối tượng theo chiều dọc hoặc chiều ngang bởi một khoảng cho trước.
Ngoài ra còn có một kiểu biến hình đặc biệt, TransformGroup, bạn có thể dùng để áp dụng nhiều phép biến hình lên một đối tượng nào đó. Chẳng hạn bạn có thể quay rồi sau đó làm xiên một đối tượng.
Ví dụ sau đây biểu diễn các đối tượng Transform khác nhau bằng cách áp dụng chúng lên các đối tượng Rectangle khác nhau.

<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >
  <Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10"
      Fill="Black">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45"/>
    </Rectangle.RenderTransform>
  </Rectangle>

  <Rectangle Height="100" Width="100" Canvas.Left="130" Canvas.Top="10"
      Fill="red">
    <Rectangle.RenderTransform>
      <SkewTransform AngleX="30"/>
    </Rectangle.RenderTransform>
  </Rectangle>

  <Rectangle Height="100" Width="100" Canvas.Left="10" Canvas.Top="190"
      Fill="blue">
    <Rectangle.RenderTransform>
      <ScaleTransform ScaleX="1.3" ScaleY=".5"/>
    </Rectangle.RenderTransform>
  </Rectangle>

  <Rectangle Height="100" Width="100" Canvas.Left="160" Canvas.Top="130"
      Fill="Green">
    <Rectangle.RenderTransform>
      <TransformGroup>
        <RotateTransform Angle="45"/>
        <ScaleTransform ScaleX=".5" ScaleY="1.2"/>
        <SkewTransform AngleX="30"/>
      </TransformGroup>
    </Rectangle.RenderTransform>
  </Rectangle>

</Canvas>