Continue reading “Silverlight – Step by Step (phần 8)” →

Đố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.

Continue reading “Silverlight – Step by Step (phần 5)” →

Continue reading “Silverlight – Step by Step (phần 3)” →

Bước 1: tạo một đối tượng Canvas và khai báo namespace

Mở file myxaml.xaml mà bạn đã tạo trong bài trước, tạo một Canvas và khai báo namespace cho Silverlight và XAML bằng cách copy đoạn mã sau vào file XAML của bạn:

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

</Canvas>

Mỗi file XAML Silverlight bắt đầu với một thẻ <Canvas>, trong đó có một thuộc tính xmlns dùng để khai báo namespace của Silverlight, và một thuộc tính khác là xmlns:x dùng để khai báo namespace cho XAML.

Bước 2: Vẽ lên trên đối tượng Silverlight

Cắt và dán doạn mã lệnh sau vào trong file XAML của bạn, giữa cặp thẻ <Canvas> rồi lưu lại.

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

Bước 3: Xem nội dung XAML của bạn

Để xem nội dung hiển thị bởi XAML, nháy đúp vào file HTML. Bạn sẽ nhìn thấy một hình tròn màu tím với viền đen đậm.

<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>

Nếu máy của bạn có cài đặt WPF thi khi nháy đúp lên file XAML sẽ làm cho WPF chạy chứ không phải là Silverlight. Nhưng cũng đừng lo lắng về điều này, vì file XAML được đặt cùng chỗ với file HTML trên Web server nên người dùng không thể nháy đúp vào được.

Xin chúc mừng! Bạn đã tạo ra được ứng dụng Silverlight đầu tiên !!!