SliverLight 練習1

使 UIElement 逐漸進入視野并從視野中逐漸消失

此示例示範如何使用 Silverlight 動畫通過對屬性值進行動畫處理，使 Rectangle 逐漸進入視野并從視野中逐漸消失。本示例使用 DoubleAnimation（一種生成 Double 值的動畫類型）對 Rectangle 的 Opacity 屬性進行動畫處理。是以，Rectangle 将逐漸進入視野并逐漸從視野中消失。若要檢視您将演練的動畫的預覽，請單擊下面的連結來運作示例，然後單擊矩形開始運作動畫。

示例的第一部分建立一個 Rectangle 元素，并将其顯示在 StackPanel 中。

<StackPanel>

  <Rectangle MouseLeftButtonDown="Mouse_Clicked"

    x:Name="MyAnimatedRectangle"

    Width="100" Height="100" Fill="Blue" />

</StackPanel>

Opacity

建立 DoubleAnimation

由于 屬性的類型是 Double，是以需要一個生成 Double 值的動畫。DoubleAnimation 就是這樣一種動畫；它可以建立兩個 Double 值之間的過渡。若要指定 DoubleAnimation 的起始值，可設定其 From 屬性。若要指定其終止值，可設定其 To 屬性。

<DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" 
  AutoReverse="True" RepeatBehavior="Forever"/>
      

Storyboard

建立示範圖闆

若要向對象應用動畫，請建立 對象并使用 TargetName 和 TargetProperty 附加屬性指定要進行動畫處理的對象和屬性。

<Storyboard>
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle"
    From="1.0" To="0.0" Duration="0:0:1" 
    AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
      

将示範圖闆與事件相關聯

此時您已經指定了動畫的目标對象以及動畫的行為方式；接下來您需要指定何時開始播放動畫。可以使用事件執行此操作。

<StackPanel>
  <StackPanel.Resources>
    <!-- Animates the rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
  </StackPanel.Resources>
        
<Rectangle MouseLeftButtonDown="Mouse_Clicked"
  x:Name="MyAnimatedRectangle"
  Width="100" Height="100" Fill="Blue" />
      
        
 </StackPanel>      

c#      

// When the user clicks the Rectangle, the animation
// begins.
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
    myStoryboard.Begin();
}
      

 完整的示例       
         
   
    
下面的示例示範了完整的 XAML 标記，這些标記用于建立在加載時逐漸進入視野并從視野中逐漸消失的矩形。

    
<UserControl x:Class="animation_ovw_intro.Page"
  xmlns="http://schemas.microsoft.com/client/2007" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  Width="400" Height="300">

  <StackPanel>
    <StackPanel.Resources>
      <!-- Animates the rectangle's opacity. -->
      <Storyboard x:Name="myStoryboard">
        <DoubleAnimation
          Storyboard.TargetName="MyAnimatedRectangle"
          Storyboard.TargetProperty="Opacity"
          From="1.0" To="0.0" Duration="0:0:1" 
          AutoReverse="True" 
          RepeatBehavior="Forever" />
       </Storyboard>
    </StackPanel.Resources>

    <Rectangle MouseLeftButtonDown="Mouse_Clicked"
      x:Name="MyAnimatedRectangle"
      Width="100" Height="100" Fill="Blue" />

  </StackPanel>
</UserControl>

    
 

    
C#

    
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
    myStoryboard.Begin();
}