WPF的示例(1)详细注解--故事板及触发器

 

<Grid>
        <StackPanel>
             <!-- StackPanel面版的背景色设置 -->
             <StackPanel.Background>
   <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
   <GradientStop Color="#FFFFB5D6" Offset="0"/>
   <GradientStop Color="#F0087272" Offset="1"/>
  </LinearGradientBrush>
       </StackPanel.Background>
 
       <Canvas Width="400" Height="200" >
      <!-- Canvas面版的背景色设置 -->
        <Canvas.Background>
  <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
   <GradientStop Color="#FFA6B5D6" Offset="0"/>
   <GradientStop Color="#FFE87272" Offset="1"/>
  </LinearGradientBrush>
 </Canvas.Background>
        
     <!-- 旋转时当背景的三个Rectangle位置坐标（分别从左到右） --> 
       <Rectangle Canvas.Top="80" Canvas.Left="50" Fill="Blue" Width="50" Height="50" Stroke="Black"
          StrokeThickness="5" Opacity="0.25" />
       <!-- Rectangle中代表的属性值含义：  Canvas.Top：Rectangle左上角到Canvas顶部的距离；Canvas.Left：Rectangle左上角到Canvas左边的距离；Fill:设置Rectangle内的填充色；Width:Rectangle的宽度；Height:Rectangle的高度；Stroke:Rectangle的边框颜色；StrokeThickness：Rectangle的边框粗细；Opacity：Rectangle的透明度 -->
       <Rectangle Canvas.Top="80" Canvas.Left="180" Fill="Blue" Width="50" Height="50" Stroke="Black"
          StrokeThickness="5" Opacity="0.25" />
       <Rectangle Canvas.Top="80" Canvas.Left="300" Fill="Blue" Width="50" Height="50" Stroke="Black"
          StrokeThickness="5" Opacity="0.25" />

    <!-- 表面旋转的三个Rectangle -->
       <Rectangle
          Canvas.Top="80" Canvas.Left="50" Fill="Blue"
          Width="50" Height="50" Stroke="Black"
          StrokeThickness="5">
      <!-- 使Rectangle变形 -->
          <Rectangle.RenderTransform>   
      <!-- RotateTransform使Rectangle旋转，并给这个要旋转的Rectangle起个名字，设置它的初始角度，及中心坐标 -->
          <RotateTransform x:Name="MyCenteredRotation"
              Angle="0" CenterX="25" CenterY="25" />
          </Rectangle.RenderTransform>
       </Rectangle>
       <Rectangle
          Canvas.Top="80" Canvas.Left="180" Fill="Blue"
          Width="50" Height="50" Stroke="Black"
          StrokeThickness="5">
          <Rectangle.RenderTransform>
            <RotateTransform x:Name="MyRotationAboutOrigin"
              Angle="0" CenterX="0" CenterY="0" />
          </Rectangle.RenderTransform>
       </Rectangle>
  
       <Rectangle
          Canvas.Top="80" Canvas.Left="300" Fill="Blue"
          Width="50" Height="50" Stroke="Black"
          StrokeThickness="5">
          <Rectangle.RenderTransform>
           <RotateTransform x:Name="MyAnimatedCenterRotation"
            Angle="0" CenterX="0" CenterY="0" />
         </Rectangle.RenderTransform>
       </Rectangle>  
     </Canvas>
 <!-- 控制部分 -->
     <StackPanel Orientation="Horizontal">  
          <!-- 四个控制按键 -->
        <Button Name="startButton" Content="Start" />
        <Button Name="pauseButton" Content="Pause" />   
        <Button Name="resumeButton" Content="Resume" />     
        <Button Name="stopButton" Content="Stop" /> 
        <!-- 触发器及故事板的组合 -->
        <StackPanel.Triggers>    
           <!-- 很好翻译了：在按键startButton被点击的时候触发 -->
           <EventTrigger SourceName="startButton" RoutedEvent="Button.Click">
              <!-- 事件触发以后做什么呢？由故事板来解决，它来产生动画效果。 -->
              <BeginStoryboard Name="myBeginStoryboard">
                 <!-- 瞧瞧！这个故事板里有几个”故事“， 有五个！ -->
                 <Storyboard Name="myStoryboard">
                    <!-- 对！这就是一个故事。那么这个故事写的是什么呢？ -->
                    <!-- 首先，故事的主角要找到，它是上面Rectangle的一个实例MyCenteredRotation。这个故事表现主角的那一个方面呢，那就是Angle.当然故事发生的时候在4秒内MyCenteredRotation的Angle由0度增长到360度，换言之就是旋转两圈。并且永远这样旋转下去（RepeatBehavior="Forever"），下面的故事雷同。-->
                    <DoubleAnimation Storyboard.TargetName="MyCenteredRotation"
                       Storyboard.TargetProperty="Angle"    
                       From="0" To="360" RepeatBehavior="Forever" Duration="0:0:4"/>

                    <DoubleAnimation Storyboard.TargetName="MyRotationAboutOrigin"
                       Storyboard.TargetProperty="Angle"    
                       From="0" To="360" RepeatBehavior="Forever" Duration="0:0:4"/>

     <!-- 大牌明星MyAnimatedCenterRotation有三场戏要拍 -->
                    <DoubleAnimation
                       Storyboard.TargetName="MyAnimatedCenterRotation"
                       Storyboard.TargetProperty="Angle"    
                       From="0" To="360" RepeatBehavior="Forever" Duration="0:0:4"/>
     <!-- 下面两场可是在同时进行哟！ --> 
                     <DoubleAnimation Storyboard.TargetName="MyAnimatedCenterRotation"
                       Storyboard.TargetProperty="CenterX"    
                       From="0" To="50" RepeatBehavior="Forever" Duration="0:0:16"/>  
                    <DoubleAnimation Storyboard.TargetName="MyAnimatedCenterRotation"
                       Storyboard.TargetProperty="CenterY"    
                       From="0" To="50" RepeatBehavior="Forever" Duration="0:0:16"/>                        
                 </Storyboard>
              </BeginStoryboard>
          </EventTrigger>      
           
          <!-- 同理可证：pauseButton被点击的时候故事全部暂停 ：PauseStoryboard -->
          <EventTrigger SourceName="pauseButton" RoutedEvent="Button.Click" >
             <PauseStoryboard BeginStoryboardName="myBeginStoryboard">
             </PauseStoryboard>
          </EventTrigger>   
          <!-- 同理可证：pauseButton被点击的时候故事全部重新开始 ：ResumeStoryboard -->
          <EventTrigger RoutedEvent="Button.Click" SourceName="resumeButton">
             <ResumeStoryboard BeginStoryboardName="myBeginStoryboard">
             </ResumeStoryboard>
          </EventTrigger>  
          <!-- 同理可证：pauseButton被点击的时候故事全部重新完全停掉 ：StopStoryboard -->    
          <EventTrigger RoutedEvent="Button.Click" SourceName="stopButton">
             <StopStoryboard BeginStoryboardName="myBeginStoryboard">
             </StopStoryboard>
          </EventTrigger>               
              
        </StackPanel.Triggers>       
      </StackPanel>
   </StackPanel>
    </Grid>