NAM GIÀ

Các bước cơ bản để làm một hoạt hình
Bước 1: Chọn một đối tượng để làm hoạt hình
Bước đầu tiên là bạn phải chọn một đối tượng nào đó để làm hoạt hình, ví dụ bạn có thể chọn một hình ellipse. Ví dụ sau sẽ tạo một hình ellipse với nền đen.

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse x:Name="ellipse"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
      Fill="black" />
</Canvas>

Nhớ là hình ellipse đã được đặt tên là ellipse: x:Name="ellipse"
Hình ellipse này cần phải được đặt tên, (chi tiết hơn, bạn cần đặt tên cho nó để sau này có thể tham chiếu lại trong một hoạt cảnh được định nghĩa ở nơi khác trong file XAML). Giờ bạn đã có một đối tượng để tạo hoạt hình, bước tiếp theo là tạo một EventTrigger để chạy hoạt hình này.

Bước 2: tạo một EventTrigger
Một EventTrigger cho phép thực hiện một thao tác khi có một sự kiện nào đó xảy ra. Sự kiện này được chỉ ra bởi thuộc tính RoutedEvent, và vì bạn muốn EventTrigger bắt đầu một hoạt hình nên hành động mà nó sẽ làm sẽ là một BeginStoryboard.
Bạn cũng cần quyết định sự kiện nào sẽ kích hoạt hoạt cảnh (animation) của bạn. Trong Silverlight 1.0, việc chọn lựa tương đối đơn giản, vì các đối tượng EventTrigger chỉ hỗ trợ một sự kiện duy nhất là Loaded. Đặt giá trị cho thuộc tính RoutedEvent thành Canvas.Loaded sẽ làm hoạt hình chay khi Canvas chính được nạp. Bạn có thể xem ví dụ sau:

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          
          
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  
  <Ellipse x:Name="ellipse"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
      Fill="black"/>
</Canvas>

Giờ bạn đã sẵn sàng để tạo một StoryBoard và một hoạt hình.

Bước 3: Tạo StoryBoard và hoạt hình
Một StoryBoard có thể được dùng để mô tả và điều khiển một hoặc nhiều hoạt hình. Trong ví dụ này, chúng ta sẽ dùng một hoạt hình đơn. Trong Silverlight, bạn có thể xây dựng hoạt hình bằng việc sử dụng các thuộc tính của một đối tượng. Dùng DoubleAnimation để thay đổi thuộc tính Canvas.Left của đối tượng Ellipse. Bạn dùng DoubleAnimation bởi vì Canvas.Left có kiểu Double.
Để một hoạt cảnh hoạt động, bạn cần chỉ ra tên của đối tượng trong thuộc tính TargetName (Storyboard.TargetName="ellipse"), tên thuộc tính sẽ được thay đổi trong TargetProperty (Storyboard.TargetProperty="(Canvas.Left)"), một giá trị để cập nhật (To="300"), và khoảng thời gian mà việc thay đổi diễn ra (Duration="0:0:1"). Thuộc tính Duration chỉ ra khoảng thời gian mà hoạt cảnh diễn ra từ lúc đầu cho đến lúc kết thúc. Giá trị 0:0:1 có nghĩa là 0 giờ, 0 phút và 1 giây.

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation 
              Storyboard.TargetName="ellipse"
              Storyboard.TargetProperty="(Canvas.Left)"
              To="300" Duration="0:0:1" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  <Ellipse x:Name="ellipse"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
      Fill="black"/>
</Canvas>

Bạn dùng DoubleAnimation là vì thuộc tính mà chúng ta đang dùng để tạo hoạt hình (Canvas.Left) có kiểu Double.
Vậy là bạn đã tạo ra hoạt hình Silverlight đầu tiên, giờ đây chắc hẳn bạn đã thấy Silverlight thú vị hơn rất nhiều

Các kiểu hoạt hình khác
Silverlight cũng hỗ trợ tạo hoạt hình bằng việc chuyển đổi (animating) màu sắc (ColorAnimation) và điểm (PointAnimation).