Silverlight – Step by Step (phần 6)


Đối tượng Image cho phép bạn hiển thị hình ảnh bitmap trong Silverlight.

Đối tượng Image
Đối tượng Image cho phép bạn hiển thị các hình ảnh JPG hoặc PNG một cách dễ dàng trong Silverlight. Để hiển thị một hình ảnh, đặt thuộc tính Source của đối tượng hình ảnh để chỉ đường dẫn đến file hình ảnh. Ví dụ sau đây dùng đối tượng Image để hiển thị một ảnh 141×131. Vì giá trị của thuộc tính Width và Height không được chỉ định nên nó sẽ được hiển thị với giá trị gốc của nó.

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

Thuộc tính Stretch
Khi kích thước của hình ảnh và kích thước chỉ định cho đối tượng Image khác nhau, thuộc tính Stretch sẽ xác định cách hình ảnh thay đổi kích thước để khớp với đối tượng Element. Thuộc tính Stretch nhận một trong các giá trị sau: None, Fill, Uniform, UniformToFill. Ví dụ sau sẽ biểu diễn các giá trị None, Uniform, and Fill.

 
<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Background="White">
  <Image Source="star.png" Stretch="None"
     Height="100" Width="200" Canvas.Left="100" />

  <Image Source="star.png" Stretch="Fill"
     Height="100" Width="200" Canvas.Top="100" Canvas.Left="100" />   

  <Image Source="star.png" Stretch="Uniform"
     Height="100" Width="200" Canvas.Top="200" Canvas.Left="100" /> 

  <TextBlock Canvas.Left="5" Canvas.Top="0">None</TextBlock>
  <TextBlock Canvas.Left="5" Canvas.Top="100">Fill</TextBlock>
  <TextBlock Canvas.Left="5" Canvas.Top="200">Uniform</TextBlock> 
</Canvas>

Để có thông tin về ảnh hưởng của các giá trị khác nhau của thuộc tính Stretch, xem thêm trong Silverlight SDK.

Cách khác để hiển thị hình ảnh bitmap
Để dùng một bitmap như hình nền của một đối tượng, dùng ImageBrush. Xem thêm trong phần 4.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s