Windows通用应用程序开发(三)

<Rectangle Height="50" Width="50" Fill="#CCCCCCFF" Stroke="Blue" StrokeThickness="2" Canvas.Left="100" Canvas.Top="100">
                    <Rectangle.RenderTransform>
                        <TranslateTransform X="50" Y="50"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
            </PivotItem>

<Canvas height="200" Width="200">
	<!--以Polyline 对象的左上角(0,0)为旋转点将其旋转了45°-->
	<Polyline Points="25,25,0,50,25,75,50,50,25,25,25,0" Stroke="Blue"
StrokeThickness="10" Canvas.Left="75" Canvas.Top="50">
	<Polyline.RenderTransform>
		<RotateTransform CenterX="0" CenterY="0" Angle="45"/>
	</Polyline.RenderTransform>
</Canvas>
<Canvas Height="200" Width="200">
                        <Polyline Points="25,25,0,50,25,75,50,50,25,25,25,0"
                                  Stroke="Blue" StrokeThickness="10" Canvas.Left="75" Canvas.Top="50">
                            <Polyline.RenderTransform>
                                <RotateTransform CenterX="25" CenterY="50" Angle="45"/>
                            </Polyline.RenderTransform>
                        </Polyline>
                    </Canvas>

<Canvas Height="200" Width="200">
                       <Rectangle Height="50" Width="50" Fill="#CCCCCCFF" Stroke="Blue" StrokeThickness="2" Canvas.Left="100" Canvas.Top="100">
                           <Rectangle.RenderTransform>
                               <ScaleTransform CenterX="0" CenterY="0" ScaleX="2" ScaleY="2"/>
                           </Rectangle.RenderTransform>
                           
                       </Rectangle>
                       <Rectangle Height="50" Width="50" Fill="#CCCCCCFF" Canvas.Left="100" Canvas.Top="100" Stroke="Blue" StrokeThickness="2">
                           <Rectangle.RenderTransform>
                               <ScaleTransform CenterX="25"
                                               CenterY="25"
                                               ScaleX="2"
                                               ScaleY="2"/>
                           </Rectangle.RenderTransform>
                       </Rectangle>
                   </Canvas>

<Rectangle height="50" width="50" Fill="#CCCCCCFF" Stroke="Blue" Strokethickness="2"
Canvas.Left="100" Canvas.Top="100">
	<Rectangle.RenderTransform>
		<SkewTransform CenterX="0" CenterY="0" AngleX="45" AngleY="0"/>
	</Rectangle.RenderTransform>
</Rectangle>

<Button RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center">Click
                   <Button.RenderTransform>
                       <TransformGroup>
                           <ScaleTransform ScaleY="3"/>
                           <RotateTransform Angle="45"/>
                       </TransformGroup>
                   </Button.RenderTransform>
               </Button>

<MatrixTransform Matrix="M11,M12,M21,M22,OffsetX,OffsetY"/>
<Button MinWidth="100">Click
                    <Button.RenderTransform>
                        <MatrixTransform x:Name="myMatrixTransform">
                            <MatrixTransform.Matrix>
                                <Matrix OffsetX="10" OffsetY="100" M11="3" M12="2"/>
                            </MatrixTransform.Matrix>
                        </MatrixTransform>
                    </Button.RenderTransform>
                </Button>

<Grid x:Name="SanWeiContentPanel" Margin="12,0,12,0">
                   <Grid.RowDefinitions>
                       <RowDefinition Height="*"/>
                       <RowDefinition Height="Auto"/>
                   </Grid.RowDefinitions>
                   <!--旋转的对象-->
                   <TextBlock Grid.Row="0" Text="3D" FontSize="120" Foreground="Red" HorizontalAlignment="Center" VerticalAlignment="Center">
                       <TextBlock.Projection>
                           <PlaneProjection x:Name="planeProjection"/>
                       </TextBlock.Projection>
                   </TextBlock>
                   <StackPanel Grid.Row="1">
                       <StackPanel Orientation="Horizontal">
                           <RadioButton x:Name="rotationRadioButton" Content="Rotation" Checked="rotationRadioButton_Checked"/>
                           <RadioButton x:Name="centerOfRotationRadioButton"
                                        Content="CenterOfRotation" Checked="centerOfRotationRadioButton_Checked"/>
                           
                       </StackPanel>
                       <TextBlock x:Name="infoTextBlock" TextWrapping="Wrap"/>
                       <TextBlock x:Name="xTextBlock" Text="沿着X轴旋转"/>
                       <Slider x:Name="xSlider" Minimum="0" Maximum="100" ValueChanged="xSlider_ValueChanged"/>
                       <TextBlock x:Name="yTextBlock" Text="沿着Y轴旋转"/>
                       <Slider x:Name="ySlider" Minimum="0" Maximum="100" ValueChanged="ySlider_ValueChanged"/>
                       <TextBlock x:Name="zTextBlock" Text="沿着Z轴旋转"/>
                       <Slider x:Name="zSlider" Minimum="0" Maximum="100" ValueChanged="zSlider_ValueChanged"/>

                   </StackPanel>
               </Grid>

//X滑块的滑动事件
       private void xSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
       {
           if (centerOfRotationRadioButton.IsChecked==false)
           {
               //Slider控制的值范围是0-100,所以旋转的角度控制在0-360
               double xValue = e.NewValue * 360 / 100;
               planeProjection.RotationX = xValue;
           }
           else
           {
               //中心点的坐标控制在0-1的值范围中变动
               planeProjection.CenterOfRotationX = e.NewValue / 100;
               
           }
       }

       private void ySlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
       {
           if (centerOfRotationRadioButton.IsChecked==false)
           {
               double yValue = e.NewValue * 360 / 100;
               planeProjection.RotationY = yValue;
           }
           else
           {
               planeProjection.CenterOfRotationY = e.NewValue / 100;

           }
       }

       private void zSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
       {
           if (centerOfRotationRadioButton.IsChecked==false)
           {
               double zValue = e.NewValue * 360 / 100;
               planeProjection.RotationZ = zValue;
           }
           else
           {
               planeProjection.CenterOfRotationZ = e.NewValue / 100;

           }
       }

            <PivotItem Header="SanweiPingyi">
                <Grid x:Name="SanweiContentPanel" Margin="12,0,12,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <!--平移的对象-->
                    <TextBlock Grid.Row="0" Text="3D" FontSize="120" Foreground="red"
                               HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBlock.Projection>
                            <PlaneProjection x:Name="pingyiProjection" RotationX="45"/>
                        </TextBlock.Projection>
                    </TextBlock>
                    <StackPanel Grid.Row="1">
                        <StackPanel Orientation="Horizontal">
                            <RadioButton x:Name="globalRadioButton" Content="GlobalOffset" Checked="rotationRadioButton_Checked"/>
                            <RadioButton x:Name="localRadioButton"
                                         Content="LocalOffset" Checked="centerOfRotationRadioButton_Checked"/>

                        </StackPanel>
                        <TextBlock x:Name="infoTextBlock1" TextWrapping="Wrap"/>
                        <TextBlock x:Name="xTextBlock1" Text="沿着X轴旋转"/>
                        <Slider x:Name="xSlider1" Minimum="0" Maximum="100" ValueChanged="xSlider_ValueChanged1"/>
                        <TextBlock x:Name="yTextBlock1" Text="沿着Y轴旋转"/>
                        <Slider x:Name="ySlider1" Minimum="0" Maximum="100" ValueChanged="ySlider_ValueChanged1"/>
                        <TextBlock x:Name="zTextBlock1" Text="沿着Z轴旋转"/>
                        <Slider x:Name="zSlider1" Minimum="0" Maximum="100" ValueChanged="zSlider_ValueChanged1"/>
                 
                    </StackPanel>
                </Grid>
                
            </PivotItem>
 /// <summary>
        /// 三维平移 z轴移动的距离
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void zSlider_ValueChanged1(object sender, RangeBaseValueChangedEventArgs e)
        {
            if (globalRadioButton.IsChecked == true) {
                pingyiProjection.GlobalOffsetZ = e.NewValue;
            }
            else
            {
                pingyiProjection.LocalOffsetZ= e.NewValue;
            }
            ShowCenterOfRotationValue();
        }
/// <summary>
/// 展示Textblock控件当前各个位置平移的值
/// </summary>
        private void ShowCenterOfRotationValue()
        {
            infoTextBlock1.Text = $"GlobaloffsetX:{pingyiProjection.GlobalOffsetX}" +
                $"Y:{pingyiProjection.GlobalOffsetY} Z:{pingyiProjection.GlobalOffsetZ} LocalOffsetX:{pingyiProjection.LocalOffsetX} Y:{pingyiProjection.LocalOffsetY} Z:{pingyiProjection.LocalOffsetZ}";
        }

        private void ySlider_ValueChanged1(object sender, RangeBaseValueChangedEventArgs e)
        {
            if (globalRadioButton.IsChecked == true) { 
                pingyiProjection.GlobalOffsetY= e.NewValue;
            }
            else
            {
                pingyiProjection.LocalOffsetY= e.NewValue;
            }
            ShowCenterOfRotationValue();
        }

        private void xSlider_ValueChanged1(object sender, RangeBaseValueChangedEventArgs e)
        {
            if (globalRadioButton.IsChecked == true)
            {
                pingyiProjection.GlobalOffsetX = e.NewValue;
            }
            else
            {
                pingyiProjection.LocalOffsetX = e.NewValue;
            }
            ShowCenterOfRotationValue();

        }

private Matrix3D CreateScaleTransform(double sx,double sy,double sz){
	Matrix3D m=new Matrix3D();
	m.M11=sx;m.M12=0.0;m.M13=0.0;m.M14=0.0;
	m.M21=0.0;m.M22=sy;m.M23=0.0;m.M24=0.0;
	m.M31=0.0;m.M32=0.0;m.M33=sz;m.M34=0.0;
	m.OffsetX=0.0;m.OffsetY=0.0;m.OffsetZ=0.0;m.M44=1.0;
	return m;
}

/// <summary>
/// 平移矩阵 向x,y,z轴移动
/// </summary>
/// <param name="tx"></param>
/// <param name="ty"></param>
/// <param name="tz"></param>
/// <returns></returns>
private Matrix3D TranslationTransform(double tx,double ty,double tz) {
    Matrix3D m = new Matrix3D();
    m.M11 = 1.0;m.M12 = 0.0;m.M13 = 0.0;m.M14 = 0.0;
    m.M21 = 0.0;m.M22 = 1.0;m.M23 = 0.0;m.M24 = 0.0;
    m.M31 = 0.0;m.M32 = 0.0;m.M33 = 1.0;m.M34 = 0.0;
    m.OffsetX = tx;m.OffsetY = ty;m.OffsetZ = tz;m.M44 = 1.0;
    return m;
}

///旋转矩阵
      /// <summary>
      /// 沿X轴移动
      /// </summary>
      /// <param name="theta"></param>
      /// <returns></returns>
      private Matrix3D RotateXTransform(double theta) { 
          double sin=Math.Sin(theta);
          double cos=Math.Cos(theta);
          Matrix3D  m=new Matrix3D();
          m.M11 = 1.0;m.M12 = 0.0;m.M13 = 0.0;m.M14 = 0.0;
          m.M21 = 0.0;m.M22 = cos; m.M23 = sin;m.M24 = 0.0;
          m.M31= 0.0; m.M32 = -sin;m.M24 = cos;m.M34 = 0.0;
          m.OffsetX=0.0; m.OffsetY= 0.0;m.OffsetZ = 0.0;m.M44 = 1.0;
          return m;
      }
      /// <summary>
      /// 沿Y轴移动
      /// </summary>
      /// <param name="theta"></param>
      /// <returns></returns>
      private Matrix3D RotateYTransform(double theta) {
          double sin=Math.Sin(theta);
          double cos=Math.Cos(theta);
          Matrix3D m=new Matrix3D();
          m.M11 = cos;m.M12 = 0.0;m.M13 = -sin;m.M14 = 0.0;
          m.M21 = 0.0;m.M22 = 1.0;m.M23 = 0.0;m.M24=0.0;
          m.M31 = sin;m.M32 = 1.0;m.M33 = cos;m.M34 = 0.0;
          m.OffsetX = 0.0;m.OffsetY = 0.0;m.OffsetY = 0.0;m.M44 = 1.0;
          return m;
      }
      /// <summary>
      /// 沿Z轴移动
      /// </summary>
      /// <param name="theta"></param>
      /// <returns></returns>
      private Matrix3D RotateZTransform(double theta) { 
          double cos=Math.Cos(theta);
          double sin=Math.Sin(theta);
          Matrix3D m=new Matrix3D();
          m.M11 = cos;m.M12 = sin;m.M13= 0.0;m.M14 = 0.0;
          m.M21 = -sin;m.M22 = cos;m.M23 = 0.0;m.M24 = 0.0;
          m.M31 = 0.0;m.M32 = 0.0;m.M33 = 1.0;m.M34= 0.0;
          m.OffsetX = 0;m.OffsetY = 0.0;m.OffsetZ = 0.0;m.M44= 1.0;
          return m;
      }

<Storyboard x:Name="storyboard1">
                          <DoubleAnimation EnableDependentAnimation="True"
                                           Storyboard.TargetName="ellipse1"
                                           Storyboard.TargetProperty="Width"
                                           From="150" To="300" Duration="0:0:3"/>
                      </Storyboard>

<StackPanel Margin="12,0,12,0">
                   <StackPanel.Resources>
                       <Storyboard x:Name="myStoryboard">
                           <DoubleAnimation From="0" To="300" AutoReverse="True"
                                            RepeatBehavior="Forever" Duration="0:0:3"
                                            Storyboard.TargetName="rect" Storyboard.TargetProperty="Width" EnableDependentAnimation="True"/>
                           
                       </Storyboard>
                   </StackPanel.Resources>
                   <Rectangle x:Name="rect" Width="0" Fill="Red" Height="100"/>
                   <Button Content="启动动画" Click="Button_Click_3"/>
               </StackPanel>
        /// <summary>
       /// 播放动画
       /// </summary>
       /// <param name="sender"></param>
       /// <param name="e"></param>
       private void Button_Click_3(object sender, RoutedEventArgs e)
       {
           myStoryboard.Begin();
       }

<Storyboard x:Name="myStoryboard">
	<DoubleAnimation To="300" EnableDependentAnimation="True" AutoReserve="True" RepeatBehavior="Forever" Duration="0:0:3" Storyboard.TargetName="rect" Storyboard.TargetProperty="Width"/>
</Storyboard>

<Canvas>
                   <Canvas.Resources>
                       <Storyboard x:Name="storyBoard">
                           <!--对ScaleTransform对象的ScaleY属性应用动画,表示沿着Y轴缩放倍数变化的动画-->
                           <DoubleAnimation Storyboard.TargetName="scacleTransform"
                                            Storyboard.TargetProperty="ScaleY"
                                            From="1" To="2" Duration="0:0:3"
                                            RepeatBehavior="Forever" AutoReverse="True">
                           </DoubleAnimation>
                           
                       </Storyboard>
                       
                   </Canvas.Resources>
                   <Rectangle x:Name="rectangle" Height="50" Width="50" Canvas.Left="75" Canvas.Top="75" Fill="Blue">
                       <Rectangle.RenderTransform>
                           <!--<注意需要对ScaleTransform命名,否则无法定义动画的目标对象>-->
                           <ScaleTransform x:Name="scaleTransform">
                           </ScaleTransform>
                       </Rectangle.RenderTransform>
                   </Rectangle>
               </Canvas>
 private void Page_Loaded(object sender, RoutedEventArgs e)
       {
           storyBoard.Begin();
       }

<StackPanel>
                   <StackPanel.Resources>
                       <Storyboard x:Name="storybord1">
                           <ColorAnimation From="Red" To="Yellow"
                                           Storyboard.TargetName="button"
                                           Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                                           Duration="0:0:5">
                           </ColorAnimation>
                       </Storyboard>
                   </StackPanel.Resources>
                   <Button Content="开始动画" Margin="12" Click="Button_Click_4" HorizontalAlignment="Stretch"/>
                   <Button Content="Test" x:Name="button" Margin="12" Click="button_Click_5" HorizontalAlignment="Stretch"/>
                   
               </StackPanel>
           storybord1.Begin();

<StackPanel>
    <StackPanel.Resources>
        <Storyboard x:Name="storyboard1">
            <PointAnimation From="50,0" To="100,50" Duration="0:0:3" Storyboard.TargetName="bezierSegment"
                            Storyboard.TargetProperty="Point3" RepeatBehavior="5" EnableDependentAnimation="True"/>
        </Storyboard>
    </StackPanel.Resources>
    <Button Content="运行动画" Click="Button_Click_6" Margin="12" HorizontalAlignment="Stretch"/>
    <!--<Data属性由4个BezierSegment曲线和1条直线LineSegment组成>-->
    <Path Fill="#FF4080FF" HorizontalAlignment="Left" Height="100" Margin="162,164,0,0" Stretch="Fill" VerticalAlignment="Top" Width="100">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="100,50">
                    <BezierSegment Point1="100,77.6142" Point2="77.6142,100" Point3="50,100"/>
                    <BezierSegment Point1="22.3858,100" Point2="0,77.6142" Point3="0,50"/>
                    <BezierSegment Point1="0,22.3858" Point2="22.3858,0" Point3="50,0"/>
                    <!--BezierSegment表示是圆右上的弧线,对其终点Point3进行动画处理-->
                    <BezierSegment x:Name="bezierSegment" Point1="77.6142,0" Point2="100,22.3858" Point3="100,50"/>
                    <LineSegment Point="50,50"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</StackPanel>

<PointAnimation Storyboard.TargetName="myradialgradientbrush"
	Storyboard.TargetProperty="GradientOrigin" From="0.1,0.7" To="0.3,0.7"
Duration="0:0:10" AutoReverse="True" RepeatBehavior="Forever">
</PointAnimation>

<PointAnimationUsingKeyFrames Storyboard.TargetName="myradialgradientbrush" 
Storyboard.TargetProperty="GradientOrigin" AutoReverse="True" RepeatBehavior="Forever">
	<LinearPointKeyFrame Value="0.1,0.7" KeyTime="0:0:0"/>
	<LinearPointKeyFrame Value="0.3,0.7" KeyTime="0:0:10"/>
</PointAnimationUsingKeyFrames>

<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0"/>

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.Resources>
        <Storyboard x:Name="SplineKeyStoryBoard">
            <!--对第一个矩形的Canvas.Top属性使用样条关键帧动画-->
            <DoubleAnimationUsingKeyFrames 
                Storyboard.TargetName="srect"
                Storyboard.TargetProperty="(Canvas.Top)"
                Duration="0:0:10"
                RepeatBehavior="Forever">
                <SplineDoubleKeyFrame Value="0" KeyTime="0:0:10"
                                      KeySpline="0.0,1.0 1.0,0.0"/>
            </DoubleAnimationUsingKeyFrames>
            <!--对第一个矩形的Canvas.Left属性使用线性关键帧动画-->
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="srect"
                Storyboard.TargetProperty="(Canvas.Left)"
                Duration="0:0:10"
                RepeatBehavior="Forever">
                <LinearDoubleKeyFrame Value="400" KeyTime="0:0:10"/>
            </DoubleAnimationUsingKeyFrames>
            <!--对第二个矩形的Canvas.Top属性使用线性关键帧动画-->
            <DoubleAnimationUsingKeyFrames 
                Storyboard.TargetName="srect2"
                Storyboard.TargetProperty="(Canvas.Top)"
                Duration="0:0:10"
                RepeatBehavior="Forever">
                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:10"/>
            </DoubleAnimationUsingKeyFrames>
            <!--对第二个矩形的Canvas.Left属性使用线性关键帧动画-->
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="srect2"
                Storyboard.TargetProperty="(Canvas.Left)"
                Duration="0:0:10"
                RepeatBehavior="Forever">
                <LinearDoubleKeyFrame Value="400" KeyTime="0:0:10"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Grid.Resources>
    <Canvas Margin="12,0,12,0">
     

            <!--第一个矩形的运动轨迹时采用样条关键帧的方式从左下角向右上角用变化的加速度运动-->
            <Rectangle x:Name="srect" Width="50" Height="50" Fill="Purple" Canvas.Top="400" Canvas.Left="0"/>

            <!--第二个矩形的运动轨迹是采用线性关键帧的方式从左下角向右上角匀速运动-->
            <Rectangle x:Name="srect2" Width="50" Height="50" Fill="Red" Canvas.Top="400" Canvas.Left="0"/>
            <Button Content="运行动画" Canvas.Top="500" Click="Button_Click_7"/>
   

    </Canvas>
</Grid>

        <Grid>
            <Grid.Resources>
                <Storyboard x:Name="Discretestoryboard">
                    <PointAnimationUsingKeyFrames Storyboard.TargetName="myLinearGradientBrush" Storyboard.TargetProperty="StartPoint" EnableDependentAnimation="True" RepeatBehavior="Forever">
                        <DiscretePointKeyFrame Value="0.1,0.3" KeyTime="0:0:0"/>
                        <DiscretePointKeyFrame Value="0.2,0.4" KeyTime="0:0:1"/>
                        <DiscretePointKeyFrame Value="0.3,0.5" KeyTime="0:0:2"/>
                        <DiscretePointKeyFrame Value="0.4,0.6" KeyTime="0:0:3"/>
                        <DiscretePointKeyFrame Value="0.5,0.7" KeyTime="0:0:4"/>
                        <DiscretePointKeyFrame Value="0.6,0.8" KeyTime="0:0:5"/>
                        <DiscretePointKeyFrame Value="0.7,0.9" KeyTime="0:0:6"/>
                    </PointAnimationUsingKeyFrames>
                </Storyboard>
            </Grid.Resources>
            <StackPanel>
                <Ellipse x:Name="ellipse">
                    <Ellipse.Fill>
                        <LinearGradientBrush x:Name="myLinearGradientBrush"
                                             StartPoint="0,0" EndPoint="1,0">
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Color="White" Offset="0.001"/>
                                <GradientStop Color="Blue" Offset="1"/>
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Button Content="启动动画" Height="100" Click="Button_Click_8"/>
            </StackPanel>

        </Grid>
private void Button_Click_8(object sender, RoutedEventArgs e)
{
    Discretestoryboard.Begin();
}

<VisualState x:Name="Disabled">
<Storyboard>
	<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Visibility">
	<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
	</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>

<Grid Background="Transparent">
                   <Grid.Resources>
                       <Storyboard x:Name="Easestoryboard">
                           <!--第一个椭圆的动画-->
                           <DoubleAnimation From="1" To="2" Duration="0:0:3" Storyboard.TargetName="ellipselScaleTransform"
                                            Storyboard.TargetProperty="ScaleX">
                               <DoubleAnimation.EasingFunction>
                                   <BackEase Amplitude="0.3" EasingMode="EaseInOut"/>
                               </DoubleAnimation.EasingFunction>
                           </DoubleAnimation>
                           <DoubleAnimation From="1" To="2" Duration="0:0:3" Storyboard.TargetName="ellipselScaleTransform"
                                            Storyboard.TargetProperty="ScaleY">
                               <DoubleAnimation.EasingFunction>
                                   <BackEase Amplitude="0.3" EasingMode="EaseInOut"/>
                               </DoubleAnimation.EasingFunction>
                           </DoubleAnimation>
                           <!--第二个椭圆的动画-->
                           <DoubleAnimation From="0" To="400" Duration="0:0:3" Storyboard.TargetName="ellipse4"
                                            Storyboard.TargetProperty="(Canvas.Left)">
                               
                           </DoubleAnimation>
                           <DoubleAnimation From="400" To="0" Duration="0:0:3" Storyboard.TargetName="ellipse4"
                                            Storyboard.TargetProperty="(Canvas.Top)">
                               <DoubleAnimation.EasingFunction>
                                   <BackEase Amplitude="0.3" EasingMode="EaseInOut"/>
                               </DoubleAnimation.EasingFunction>
                           </DoubleAnimation>
                       </Storyboard>
                   </Grid.Resources>
                   <Canvas Margin="12,0,12,0">
                       <!--第一个椭圆展示了BackEase的放大动画效果-->
                       <Ellipse Name="ellipse3" Width="80" Height="80" Fill="Blue">
                           <Ellipse.RenderTransform>
                               <ScaleTransform x:Name="ellipselScaleTransform">
                                   
                               </ScaleTransform>
                           </Ellipse.RenderTransform>
                       </Ellipse>
                       <!--第二个椭圆展示了BackEase的运动轨迹-->
                       <Ellipse x:Name="ellipse4" Fill="Red" Width="80" Height="80" Canvas.Left="0" Canvas.Top="400"/>
                       <Button Margin="0,500,0,0" Content="启动动画" Height="80" Click="Button_Click_10"/>
                   </Canvas>

               </Grid>
private void Button_Click_10(object sender, RoutedEventArgs e)
       {
           Easestoryboard.Begin();
       }

<Grid Background="Transparent">
                   <Grid.Resources>
                       <Storyboard x:Name="Bouncestoryboard">
                           <!--第一个椭圆的动画-->
                           <DoubleAnimation From="0" To="200" Duration="0:0:3" EnableDependentAnimation="True"
                                            Storyboard.TargetName="ellipse5"
                                            Storyboard.TargetProperty="Width">
                               <DoubleAnimation.EasingFunction>
                                   <BounceEase Bounces="2" EasingMode="EaseOut" Bounciness="2"/>
                               </DoubleAnimation.EasingFunction>
                               
                           </DoubleAnimation>
                           <DoubleAnimation From="80" To="200" Duration="0:0:3" EnableDependentAnimation="True"
                                            Storyboard.TargetName="ellipse5"
                                            Storyboard.TargetProperty="Height">
                               <DoubleAnimation.EasingFunction>
                                   <BounceEase Bounces="2" EasingMode="EaseOut" Bounciness="2"/>
                               </DoubleAnimation.EasingFunction>
                  
                           </DoubleAnimation>
                           <!--第二个椭圆的动画-->
                           <DoubleAnimation From="0" To="400" Duration="0:0:3" Storyboard.TargetName="ellipse6"         Storyboard.TargetProperty="(Canvas.Left)">
                           </DoubleAnimation>
                           <DoubleAnimation From="400" To="0" Duration="0:0:3" Storyboard.TargetName="ellipse6"
                                            Storyboard.TargetProperty="(Canvas.Top)">
                               <DoubleAnimation.EasingFunction>
                                   <BounceEase Bounces="2" EasingMode="EaseOut" Bounciness="2"/>
                               </DoubleAnimation.EasingFunction>
                           </DoubleAnimation>
                       </Storyboard>
                   </Grid.Resources>
                   <Canvas Margin="12,0,12,0">
                       <!--第一个椭圆展示了BounceEase的动画效果-->
                       <Ellipse Name="ellipse5" Width="80" Height="80"
                                Fill="Blue"/>
                       <!--第二个椭圆展示了BounceEase的运动轨迹-->
                       <Ellipse x:Name="ellipse6" Fill="Red" Width="80"
                                Height="80" Canvas.Left="0" Canvas.Top="400"/>
                       <Button Margin="0,500,0,0" Content="启动动画" Height="80" Click="Button_Click_11"/>
                   </Canvas>
               </Grid>
private void Button_Click_11(object sender, RoutedEventArgs e)
       {
           Bouncestoryboard.Begin();
       }

<Grid Background="Transparent">
                    <Grid.Resources>
                        <Storyboard x:Name="CircleEasestoryboard">
                            <!--第一个椭圆的动画-->
                            <DoubleAnimation From="80" To="400" Duration="0:0:3" EnableDependentAnimation="True"
                                             Storyboard.TargetName="ellipse7"
                                             Storyboard.TargetProperty="Width">
                                <DoubleAnimation.EasingFunction>
                                    <CircleEase EasingMode="EaseOut"/>
                                </DoubleAnimation.EasingFunction>
                                
                            </DoubleAnimation>
                            <!--第二个椭圆的动画-->
                            <DoubleAnimation From="0" To="400" Duration="0:0:3" Storyboard.TargetName="ellipse8"
                                             Storyboard.TargetProperty="(Canvas.Left)">
                            </DoubleAnimation>
                            <DoubleAnimation From="400" To="0" Duration="0:0:3" Storyboard.TargetName="ellipse8"
                                             Storyboard.TargetProperty="(Canvas.Top)">
                                <DoubleAnimation.EasingFunction>
                                    <CircleEase EasingMode="EaseOut"/>
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                    </Grid.Resources>
                    <Canvas Margin="12,0,12,0">
                        <!--第一个椭圆展示了CircleEase的动画效果-->
                        <Ellipse x:Name="ellipse7" Width="80" Height="80" Fill="Blue"/>
                        <!--第二个椭圆展示了CircleEase的运动轨迹-->
                        <Ellipse x:Name="ellipse8" Fill="Red" Width="80" Height="80" Canvas.Left="0" Canvas.Top="400"/>
                        <Button Margin="0,500,0,0" Content="启动动画" Height="80" Click="Button_Click_12"/>
                    </Canvas>
                </Grid>
 private void Button_Click_12(object sender, RoutedEventArgs e)
        {
            CircleEasestoryboard.Begin();
        }

<Grid Background="Transparent">
                   <Grid.Resources>
                       <Storyboard x:Name="Cubicstoryboard">
                           <!--第一个椭圆的动画-->
                           <DoubleAnimation From="0" To="180" Duration="0:0:3" Storyboard.TargetName="ellipselPlaneProjection"
                                            Storyboard.TargetProperty="RotationX">
                               <DoubleAnimation.EasingFunction>
                                   <CubicEase EasingMode="EaseInOut"/>
                               </DoubleAnimation.EasingFunction>
                           </DoubleAnimation>
                           <!--第二个椭圆的动画-->
                           <DoubleAnimation From="0" To="400" Duration="0:0:3" Storyboard.TargetName="ellipse10"
                                            Storyboard.TargetProperty="(Canvas.Left)">
                           </DoubleAnimation>
                           <DoubleAnimation From="400" To="200" Duration="0:0:3" Storyboard.TargetName="ellipse10"
                                            Storyboard.TargetProperty="(Canvas.Top)">
                               <DoubleAnimation.EasingFunction>
                                   <CubicEase EasingMode="EaseInOut"/>
                               </DoubleAnimation.EasingFunction>
                           </DoubleAnimation>
                       </Storyboard>
                   </Grid.Resources>
                   <Canvas Margin="12,0,12,0">
                       <!--第一个椭圆展示了CubicEase的动画效果-->
                       <Ellipse x:Name="ellipse9" Width="200" Height="200" Fill="Blue">
                           <Ellipse.Projection>
                               <PlaneProjection RotationX="0" x:Name="ellipselPlaneProjection">
                               </PlaneProjection>
                           </Ellipse.Projection>
                       </Ellipse>
                       <!--第二个椭圆展示了CubicEase的运动轨迹-->
                       <Ellipse x:Name="ellipse10" Fill="Red" Width="80"
                                Height="80" Canvas.Left="0" Canvas.Top="400"/>
                       <Button Margin="0,500,0,0" Content="启动动画" Height="80" Click="Button_Click_13"/>
                   </Canvas>
               </Grid>
 private void Button_Click_13(object sender, RoutedEventArgs e)
       {
           Cubicstoryboard.Begin();
       }

<Grid Background="Transparent">
                   <Grid.Resources>
                       <Storyboard x:Name="Elasticstoryboard">
                           <!--线条的动画-->
                           <DoubleAnimation From="0" To="400" Duration="0:0:3" EnableDependentAnimation="True"
                                            Storyboard.TargetName="line1"
                                            Storyboard.TargetProperty="Y2">
                               <DoubleAnimation.EasingFunction>
                                   <ElasticEase EasingMode="EaseOut" Oscillations="7"/>
                               </DoubleAnimation.EasingFunction>
                           </DoubleAnimation>
                           <!--第一个椭圆的动画-->
                           <DoubleAnimation From="0" To="400" Duration="0:0:3" Storyboard.TargetName="ellipse11"
                                            Storyboard.TargetProperty="(Canvas.Top)">
                               <DoubleAnimation.EasingFunction>
                                   <ElasticEase EasingMode="EaseOut" Oscillations="7"/>
                               </DoubleAnimation.EasingFunction>
                           </DoubleAnimation>
                           <!--第二个椭圆的动画-->
                           <DoubleAnimation From="0" To="400" Duration="0:0:3" Storyboard.TargetName="ellipse12"
                                            Storyboard.TargetProperty="(Canvas.Left)">
                               
                           </DoubleAnimation>
                           <DoubleAnimation From="400" To="200" Duration="0:0:3" Storyboard.TargetName="ellipse12"
                                            Storyboard.TargetProperty="(Canvas.Top)">
                               <DoubleAnimation.EasingFunction>
                                   <ElasticEase EasingMode="EaseOut" Oscillations="7"/>
                               </DoubleAnimation.EasingFunction>
                           </DoubleAnimation>
                       </Storyboard>
                   </Grid.Resources>
                   <Canvas Margin="12,0,12,0">
                       <!--线条展示了ElasticEase的动画效果-->
                       <Line x:Name="line1" X1="50" Y1="0" X2="50" Y2="50"
                             Stroke="Blue" StrokeThickness="10" Fill="Blue"/>
                       <!--第一个椭圆展示了ElasticEase的动画效果-->
                       <Ellipse Name="ellipse11" Fill="Blue" Width="100" Height="100"/>
                       <!--第二个椭圆展示了ElasticEase的运动轨迹-->
                       <Ellipse x:Name="ellipse12" Fill="Red" Width="80"
                                Height="80" Canvas.Left="0" Canvas.Top="400"/>
                       <Button Margin="0,500,0,0" Content="启动动画" Height="80" Click="Button_Click_14"/>
                   </Canvas>
               </Grid>
private void Button_Click_14(object sender, RoutedEventArgs e)
       {
           Elasticstoryboard.Begin();  
       }

<Grid Background="Transparent">
                   <Grid.Resources>
                       <Storyboard x:Name="ExponentialStoryboard">
                           <!--第一个椭圆的动画-->
                           <DoubleAnimation From="0" To="400" Duration="0:0:3" Storyboard.TargetName="ellipse13"
                                            Storyboard.TargetProperty="(Canvas.Top)">
                               <DoubleAnimation.EasingFunction>
                                   <ExponentialEase Exponent="10" EasingMode="EaseIn"/>
                               </DoubleAnimation.EasingFunction>
                           </DoubleAnimation>
                           <!--第二个椭圆的动画-->
                           <DoubleAnimation From="0" To="400" Duration="0:0:3" Storyboard.TargetName="ellipse14"
                                            Storyboard.TargetProperty="(Canvas.Left)">
                               
                           </DoubleAnimation>
                           <DoubleAnimation From="400" To="200" Duration="0:0:3" Storyboard.TargetName="ellipse14"
                                            Storyboard.TargetProperty="(Canvas.Top)">
                               <DoubleAnimation.EasingFunction>
                                   <ExponentialEase Exponent="10" EasingMode="EaseIn"/>
                               </DoubleAnimation.EasingFunction>
                           </DoubleAnimation>
                       </Storyboard>
                   </Grid.Resources>
                   <Canvas Margin="12,0,12,0">
                       <!--第一个椭圆展示了ExponentialEase的动画效果-->
                       <Ellipse x:Name="ellipse13" Width="50" Height="50" Fill="Blue"/>
                       <!--第二个椭圆展示了ExponentialEase的运动轨迹-->
                       <Ellipse x:Name="ellipse14" Fill="Red" Width="80"
                                Height="80" Canvas.Left="0" Canvas.Top="400"/>
                       <Button Margin="0,500,0,0" Content="启动动画" Height="80" Click="Button_Click_15"/>
                   </Canvas>
               </Grid>
private void Button_Click_15(object sender, RoutedEventArgs e)
       {
           ExponentialStoryboard.Begin();
       }

<Grid Background="Transparent">
                   <Grid.Resources>
                       <Storyboard x:Name="powerStoryboard">
                           <!--第一个椭圆的动画-->
                           <DoubleAnimation From="0" To="400" Duration="0:0:3" Storyboard.TargetName="ellipse15"
                                            Storyboard.TargetProperty="(Canvas.Top)">
                               <DoubleAnimation.EasingFunction>
                                   <PowerEase EasingMode="EaseIn" x:Name="powerEase1"/>
                                   
                               </DoubleAnimation.EasingFunction>
                           </DoubleAnimation>
                           <!--第二个椭圆的动画-->
                           <DoubleAnimation From="0" To="400" Duration="0:0:3" Storyboard.TargetName="ellipse16"
                                            Storyboard.TargetProperty="(Canvas.Left)">
                           </DoubleAnimation>
                           <DoubleAnimation From="400" To="200" Duration="0:0:3" Storyboard.TargetName="ellipse16"
                                            Storyboard.TargetProperty="(Canvas.Top)">
                               <DoubleAnimation.EasingFunction>
                                   <PowerEase EasingMode="EaseIn" x:Name="powerEase2"/>
                               </DoubleAnimation.EasingFunction>
                           </DoubleAnimation>
                       </Storyboard>
                   </Grid.Resources>
                   <Canvas Margin="12,0,12,0">
                       <Ellipse Name="ellipse15" Width="50" Height="50" Fill="Blue"/>
                       <Ellipse x:Name="ellipse16" Fill="Red" Width="80"
                                Height="80" Canvas.Left="0" Canvas.Top="400"/>
                       <Button Margin="0,500,0,0" Content="启动动画" Height="80" Click="Button_Click_16"/>
                       <Slider x:Name="powerSlider" Margin="200,500,0,0"
                               Width="200" Background="Red" Value="50" Maximum="100" Minimum="0"/>
                   </Canvas>
               </Grid>
private void Button_Click_16(object sender, RoutedEventArgs e)
       {
           powerEase1.Power = powerSlider.Value;
           powerEase2.Power= powerSlider.Value;
           powerStoryboard.Begin();
       }

  <Grid Background="Transparent">
                   <Grid.Resources>
                       <Storyboard x:Name="SineStoryboard">
                           <DoubleAnimation From="0" To="400" Duration="0:0:3" Storyboard.TargetName="ellipse17"
                                            Storyboard.TargetProperty="(Canvas.Top)">
                               <DoubleAnimation.EasingFunction>
                                   <SineEase EasingMode="EaseIn"/>

                               </DoubleAnimation.EasingFunction>
                           </DoubleAnimation>
                           <DoubleAnimation From="0" To="400" Duration="0:0:3" Storyboard.TargetName="ellipse18"
                                            Storyboard.TargetProperty="(Canvas.Left)">
                               
                           </DoubleAnimation>
                           <DoubleAnimation From="400" To="200" Duration="0:0:3" Storyboard.TargetName="ellipse18"
                                            Storyboard.TargetProperty="(Canvas.Top)">
                               <DoubleAnimation.EasingFunction>
                                   <SineEase EasingMode="EaseIn"/>
                               </DoubleAnimation.EasingFunction>
                               
                           </DoubleAnimation>
                       </Storyboard>
                   </Grid.Resources>
                   <Canvas Margin="12,0,12,0">
                       <Ellipse Name="ellipse17" Width="50" Height="50" Fill="Blue"/>
                       <Ellipse x:Name="ellipse18" Fill="Red" Width="80"
                                Height="80" Canvas.Left="0" Canvas.Top="400"/>
                       <Button Margin="0,500,0,0" Content="启动动画" Height="80" Click="Button_Click_17"/>
                   </Canvas>
               </Grid>
private void Button_Click_17(object sender, RoutedEventArgs e)
       {
           SineStoryboard.Begin();

       }

 <Canvas Background="Gray" PointerMoved="Canvas_PointerMoved">
                    <Rectangle x:Name="prectangle" Height="50" Width="100"
                               RadiusX="12.5" RadiusY="12.5">
                        <Rectangle.Fill>
                            <LinearGradientBrush>
                                <GradientStop Color="Black" Offset="0"/>
                                <GradientStop Color="White" Offset="0.5"/>
                                <GradientStop Color="Black" Offset="1"/>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                </Canvas>
 ///基于帧动画
            ///
            CompositionTarget.Rendering += CompositionTarget_Rendering;
            this.prectangle.RenderTransform = translateTransform;
/// <summary>
        /// 处理基于帧的事件,动画的逻辑在这个事件里面进行处理
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void CompositionTarget_Rendering(object sender, object e)
        {
           var currentTime=DateTime.Now;
            //计算两帧之间的时间差,把时间差作为计算位移的系数
            double elapsedTime = (currentTime - preTime).TotalSeconds;
            preTime=currentTime;
            //控制矩形的移动不超过画布面板的边界
            translateTransform.X += mouseLocation.X * elapsedTime;
            if (translateTransform.X > 300) translateTransform.X = 300;
            if(translateTransform.X<0)translateTransform.X = 0;
            translateTransform.Y+= mouseLocation.Y * elapsedTime;
            if (translateTransform.Y > 450) translateTransform.Y = 450;
            if (translateTransform.Y < 0)translateTransform.Y= 0;
           
        }
 //触摸点的位置
        Point mouseLocation;
        //用于矩形的位移变换改变矩形的位置
        TranslateTransform translateTransform=new TranslateTransform();
        //用于保存上一帧时间,计算时间差
        DateTime preTime=DateTime.Now;

        /// <summary>
        /// 通过PointerMoved事件获取当前的触摸点相对于矩形的坐标,滑动点在矩形左边X值为负值,右边X值为正值.在上边Y值为负值,在下便Y值为正值.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Canvas_PointerMoved(object sender, PointerRoutedEventArgs e)
        {
            mouseLocation = e.GetCurrentPoint(this.prectangle).Position;
        }

if (System.Diagnostics.Debugger.IsAttached) { 
           this.DebugSettings.EnableFrameRateCounter = true;
           }

<StackPanel>
                   <StackPanel.Resources>
                       <Storyboard x:Name="heightStoryboard">
                           <!--针对Height属性的动画-->
                           <DoubleAnimation Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Height"
                                            RepeatBehavior="Forever"
                                            EnableDependentAnimation="True"
                                            From="100" To="200" Duration="0:0:2">
                           </DoubleAnimation>
                       </Storyboard>
                       <Storyboard x:Name="scaleTransformStoryboard">
                           <!--针对ScaleTransform的ScaleY属性的动画-->
                           <DoubleAnimation Storyboard.TargetName="scaleTransform1" Storyboard.TargetProperty="ScaleY" RepeatBehavior="Forever" From="1" To="2" Duration="0:0:2">
                           </DoubleAnimation>
                       </Storyboard>
                   </StackPanel.Resources>
                   <Button Content="阻塞UI线程" Click="Button_Click_18"/>
                   <Button x:Name="heightAnimationButton" Content="Height属性动画" Click="heightAnimationButton_Click"/>
                   <Button x:Name="scaleTransformAnimationButton" Content="ScaleTransform属性动画" Click="scaleTransformAnimationButton_Click"/>
                   <Rectangle Height="100" Fill="Blue" x:Name="rectangle1">
                       <Rectangle.RenderTransform>
                           <ScaleTransform x:Name="scaleTransform1"/>
                       </Rectangle.RenderTransform>
                   </Rectangle>
               </StackPanel>
/// <summary>
       /// 阻塞线程2秒钟
       /// </summary>
       /// <param name="sender"></param>
       /// <param name="e"></param>
       private void Button_Click_18(object sender, RoutedEventArgs e)
       {
           Task.Delay(2000).Wait();
       }

       private void heightAnimationButton_Click(object sender, RoutedEventArgs e)
       {
           //播放改变高度属性的动画,高度由100变成200
           scaleTransformStoryboard.Stop();
           heightStoryboard.Begin();
       }

       private void scaleTransformAnimationButton_Click(object sender, RoutedEventArgs e)
       {
           heightStoryboard.Stop();
           scaleTransformStoryboard.Begin();
       }

public class StarFactory
   {
       public StarFactory() { }
       /// <summary>
       /// 把两个点转换成多级的点的集合
       /// </summary>
       /// <param name="a"></param>
       /// <param name="b"></param>
       /// <param name="level"></param>
       /// <returns></returns>
       private static List<Point> _RecurseSide(Point a,Point b,int level) {
           ///递归完成后,返回此线段
           if (level==0)
           {
               return new List<Point> { a,b};
           }
           else
           {
               //首先,需要建立起第一次递归的点的列表,一直递归到级别为0
               List<Point> newPoints = new List<Point>();
               //把区域分成5个点
               foreach (Point item in _RefactorPoints(a,b))
               {
                   newPoints.Add(item);
               }
               List<Point> aggregatePoints= new List<Point>();
               //把每一个线段进一步分解
               for (int i = 0; i < newPoints.Count; i++)
               {
                   int y = i + 1 == newPoints.Count ? 0 : i + 1;
                   aggregatePoints.AddRange(_RecurseSide(newPoints[i], newPoints[y],level-1));
               }
               return aggregatePoints;
           }
       }
     static Random _random= new Random();
       /// <summary>
       /// 通过输入两个点来构建一个有多个三角形组成的Star形状
       /// </summary>
       /// <param name="a"></param>
       /// <param name="b"></param>
       /// <returns></returns>
       /// <exception cref="NotImplementedException"></exception>
       private static IEnumerable<Point> _RefactorPoints(Point a, Point b)
       {
          //第一个点
          yield return a;
           double dX = b.X - a.Y;
           double dY= b.Y - a.Y;
           //第一点到第二个点1/3处的一个点
           yield return new Point(a.X+dX/3.0,a.Y+dY/3.0);
           double factor=_random.NextDouble()- 0.5;
           double vX = (a.X + b.X) / (2.0 + factor)+Math.Sqrt(3.0+factor)*(b.Y-a.Y)/(6.0+factor*2.0);
           double vY = (a.Y + b.Y) / (2.0 + factor) + Math.Sqrt(3.0+factor)*(a.X-b.X)/(6.0+factor*2.0);
           //中间的三角形的顶点
           yield return new Point(vX,vY);
           //第二个点到第一个点1/3处的一个点
           yield return new Point(b.X-dX/3.0,b.Y-dY/3.0);
           //第二个点
           yield return b;
       }
       /// <summary>
       /// 使用一系列点来创建路径图形
       /// </summary>
       /// <returns></returns>
       private static Path _CreatePath(List<Point> points) { 
           PathSegmentCollection segments= new PathSegmentCollection();
           bool first = true;
           //把点添加到线段里面
           foreach (Point item in points)
           {
               if (first)
               {
                   first = false;
               }
               else
               {
                   segments.Add(new LineSegment { Point = item });
               }
           }
           PathGeometry pathGeometry= new PathGeometry();
           //通过线段构建几何图形
           pathGeometry.Figures.Add(new PathFigure
           {
               IsClosed = true,
               StartPoint = points[0],
               Segments = segments
           });
           return new Path { Data = pathGeometry };
       }


   }

/// <summary>
        /// 添加颜色到路径图形
        /// </summary>
        /// <param name="input"></param>
        private static void _ColorFactory(Path input) {
            LinearGradientBrush brush = new LinearGradientBrush();
            brush.StartPoint = new Point(0,0);
            brush.EndPoint= new Point(1.0,1.0);
            GradientStop start=new GradientStop();
            start.Color = _GetColor();
            start.Offset = 0;
            GradientStop middle=new GradientStop();
            middle.Color = _GetColor();
            middle.Offset=_random.NextDouble();
            GradientStop end=new GradientStop();
            end.Color= _GetColor();
            end.Offset = 1.0;
            brush.GradientStops.Add(start);
            brush.GradientStops.Add(middle);
            brush.GradientStops.Add(end);
            input.Fill = brush;
        }
        /// <summary>
        /// 获取一个随机的颜色
        /// </summary>
        /// <returns></returns>
        private static Color _GetColor()
        {
            Color color = new Color();
            color.A = (byte)(_random.Next(200) + 20);
            color.R = (byte)(_random.Next(200) + 50);
            color.G = (byte)(_random.Next(200) + 50);
            color.B = (byte)(_random.Next(200) + 50);
            return color;
        }

const int MIN = 0;
       const int MAX = 2;
       //随机数产生器
       static readonly Random _random=new Random();
       /// <summary>
       /// 创建一个Star
       /// </summary>
       /// <returns></returns>
       public static Path Create() { 
       Point a=new Point(0,0);
           Point b = new Point(_random.NextDouble() * 70.0 + 15.0, 0);
           Point c=new Point(0,b.X);
           int levels=_random.Next(MIN,MAX);
           List<Point> points=new List<Point>();
           points.AddRange(_RecurseSide(a,b,levels));
           points.AddRange(_RecurseSide(b,c,levels));
           points.AddRange(_RecurseSide(c,a,levels));
           //画边
           Path retVal=_CreatePath(points);
           //添加颜色
           _ColorFactory(retVal);
           //建立一个旋转的角度
           RotateTransform rotate=new RotateTransform();
           rotate.CenterX = 0.5;
           rotate.CenterY = 0.5;
           rotate.Angle=_random.NextDouble()*360.0;
           retVal.SetValue(Path.RenderTransformProperty,rotate);
           return retVal;
       }

public class StarEntity
   {
       //左边距
       const double LEFT = 460;
       //上边距
       const double TOP = 800;
       //离开屏幕
       const double GONE = 480;
       //随机近似数
       private double _affinity;
       //Star实体的唯一ID
       private Guid _identifier=Guid.NewGuid();
       //随机数产生器
       private static Random _raodom=new Random();
       //Star所在的画布
       private Canvas _surface;
       //获取Star所在的画布
       private Canvas Surface {
           get { return _surface; }
       }
       //x,y坐标和相对速度
       private double x, y, velocity;
       //Star的路径图形
       private Path _starflake;
       /// <summary>
       /// 当Star飘落到底下时回收Star事件
       /// </summary>
       private EventHandler StarflakeDied;

       //获取Star实体的唯一ID
       public Guid Identifier
       {
           get { return _identifier; }
       }
       //默认的构造器
       public StarEntity(Action<Path> insert) : this(insert, true) { }
       /// <summary>
       /// 星星对象构造方法 是否从顶下落下
       /// </summary>
       /// <param name="insert"></param>
       /// <param name="v"></param>
       public StarEntity(Action<Path> insert, bool fromTop)
       {
           _starflake = StarFactory.Create();
           ///产生0-1的随机数
           _affinity=_raodom.NextDouble();
           ///设置速度,初始化x,y轴
           velocity=_raodom.NextDouble()*2;
           x = _raodom.NextDouble() * LEFT;
           y=fromTop?0:_raodom.NextDouble() * TOP;
           //设置Star在画布的位置
           _starflake.SetValue(Canvas.LeftProperty,x);
           _starflake.SetValue(Canvas.TopProperty,y);
           //添加到画布上
           insert(_starflake);
           //记录下Star的画布
           _surface = _starflake.Parent as Canvas;
           //订阅基于帧动画事件
           CompositionTarget.Rendering += CompositionTarget_Rendering;
       }
       /// <summary>
       /// 基于帧动画事件处理
       /// </summary>
       /// <param name="sender"></param>
       /// <param name="e"></param>
       /// <exception cref="NotImplementedException"></exception>
       private void CompositionTarget_Rendering(object sender, object e)
       {
           _Frame();
       }
       /// <summary>44
       /// Star下落的每一帧的处理
       /// </summary>
       private void _Frame()
       {
           //下降的y轴的大小
           y = y + velocity + 3.0 * _raodom.NextDouble() - 1.0;
           //判断是否离开了屏幕
           if (y>GONE)
           {
               CompositionTarget.Rendering -= CompositionTarget_Rendering;
               _surface.Children.Remove(_starflake);
               //通知外部,Star已经被清除
               EventHandler handler = StarflakeDied;
               if (handler!=null)
               {
                   handler(this,EventArgs.Empty);
               }
           }
           else
           {
               //水平轻推
               double xFactor = 10.0 * _affinity;
               if (_affinity < 0.5) xFactor *= -1.0;//小于0.5向左边移动,大于0.5向右边移动，等于0.5垂直下降
               {
                   x = x + _raodom.NextDouble() * xFactor;
               }
               //左边的边缘
               if (x<0)
               {
                   x = 0;
                   _affinity = 1.0 - _affinity;
               }
               //右边的边缘
               if (x>LEFT)
               {
                   x = LEFT;
                   _affinity=1.0- _affinity;
               }
               _starflake.SetValue(Canvas.LeftProperty,x);
               _starflake.SetValue(Canvas.TopProperty,y);
           }
           //转动
           RotateTransform rotate = (RotateTransform)_starflake.GetValue(Path.RenderTransformProperty);
           rotate.Angle += _raodom.NextDouble() * 4.0 * _affinity;

       }
       /// <summary>
       /// 重载获取唯一的对象码
       /// </summary>
       /// <returns></returns>
       public override int GetHashCode()
       {
           return Identifier.GetHashCode();
       }
       public override bool Equals(object obj)
       {
           return obj is StarEntity && ((StarEntity)obj).Identifier.Equals(Identifier);
       }
   }

using App1.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace App1.Behaviors
{
    /// <summary>
    /// StarBehavior类管理附加属性的行为触发批量星星的构造和动画的实现
    /// </summary>
    public static class StarBehavior
    {
        //屏幕上生成的Star数量
        const int CAPACITY = 75;
        //动画是否已经开始的标识符
        private static bool begining=false;
        //Star对象列表
        private static List<StarEntity> _starflakes=new List<StarEntity>(CAPACITY);
        //添加动画效果的属性


        public static bool GetAttachStarFlake(DependencyObject obj)
        {
            return (bool)obj.GetValue(AttachStarFlakeProperty);
        }

        public static void SetAttachStarFlake(DependencyObject obj, bool value)
        {
            obj.SetValue(AttachStarFlakeProperty, value);
        }

        // Using a DependencyProperty as the backing store for AttachStarFlake.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty AttachStarFlakeProperty =
            DependencyProperty.RegisterAttached("AttachStar", typeof(bool), typeof(StarBehavior), new PropertyMetadata(false,new PropertyChangedCallback(_Attach)));
        /// <summary>
        /// 附加属性改变事件处理方法
        /// </summary>
        /// <param name="d"></param>
        /// <param name="e"></param>
        /// <exception cref="NotImplementedException"></exception>
        private static void _Attach(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
           Canvas canvas= d as Canvas;
            if (canvas != null && e.NewValue!=null && e.NewValue.GetType().Equals(typeof(bool))) {
                if ((bool)e.NewValue) {
                    //画布上还有子元素证明星星还没完全飘落下去
                    if (canvas.Children.Count>0)
                    {
                        return;
                    }
                    //开始动画
                    begining=true;
                    for (int i = 0; i < _starflakes.Capacity; i++)
                    {
                        StarEntity starflake = new StarEntity((o) => canvas.Children.Add(o));
                        starflake.StarflakeDied +=new EventHandler(Starflake_StarflakeDied);
                        _starflakes.Add(starflake);
                    }
                }
                else
                {
                    //结束动画
                    begining = false;
                }
            }
        }
        //回收Star事件
        private static void Starflake_StarflakeDied(object sender, EventArgs e)
        {
            StarEntity starflake=sender as StarEntity;
            //获取Star的面板,用来添加一个新的Star
            Canvas canvas = starflake.Surface;
            _starflakes.Remove(starflake);
            if (begining)
            {
                //如果动画还在继续,运行一个Star消失之后再创建一个新的Star
                StarEntity newFlake = new StarEntity((o)=>canvas.Children.Add(o),true);
                newFlake.StarflakeDied += Starflake_StarflakeDied;
                _starflakes.Add(newFlake);
            }
        }
    }
}

<Grid>
                   <Canvas x:Name="myCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

                   </Canvas>
                   <Button x:Name="btn" VerticalAlignment="Bottom" Content="开始星星飘落" Click="btn_Click"/>
               </Grid>
/// <summary>
       /// 按钮事件,播放动画和停止动画
       /// </summary>
       /// <param name="sender"></param>
       /// <param name="e"></param>
       private async void btn_Click(object sender, RoutedEventArgs e)
       {
           if ((bool)myCanvas.GetValue(StarBehavior.AttachStarFlakeProperty) == false)
           {
               //要等所有的星星全部落下去之后才可以再次播放动画
               if (myCanvas.Children.Count > 0)
               {
                   await new MessageDialog("星星动画未完全结束").ShowAsync();
                   return;
               }
               myCanvas.SetValue(StarBehavior.AttachStarFlakeProperty, true);
               button.Content = "停止";
           }
           else {
               myCanvas.SetValue(StarBehavior.AttachStarFlakeProperty, false);
               btn.Content = "开始";
           }
       }

<Button Content="Hello World">
                   <Button.Template>
                       <ControlTemplate>
                           <Grid>
                               <Ellipse Width="{TemplateBinding Button.Width}" Height="{TemplateBinding Height}"
                                        Fill="{TemplateBinding Button.Background}" Stroke="Red"/>
                               <TextBlock Margin="5,0,0,0" FontSize="50"
                                          VerticalAlignment="Center" HorizontalAlignment="Center" Text="{TemplateBinding Button.Content}"/>
                               <TextBlock FontSize="50" Foreground="Red" VerticalAlignment="Center" HorizontalAlignment="Center"
                                          Text="{TemplateBinding Button.Content}"/>
                           </Grid>
                       </ControlTemplate>
                   </Button.Template>
               </Button>

<Button>
                   <Button.Template>
                       <ControlTemplate>
                           <Grid>
                               <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                           </Grid>
                       </ControlTemplate>
                   </Button.Template>
                   <Button.Content>
                       <Rectangle Fill="Red" Height="50" Width="50"/>
                   </Button.Content>
               </Button>

<Button Content="Hello World" LostFocus="Button_LostFocus" Tapped="Button_Tapped">
                   <Button.Template>
                       <ControlTemplate TargetType="Button">
                           <Border>
                               <VisualStateManager.VisualStateGroups>
                                   <VisualStateGroup x:Name="CommonStates">
                                       <VisualStateGroup.Transitions>
                                           <VisualTransition From="Test1" To="Test2" GeneratedDuration="0:0:1.5">
                                               <Storyboard>
                                                   
                                               </Storyboard>
                                           </VisualTransition>
                                       </VisualStateGroup.Transitions>
                                       <!--创建状态Test1把Border背景的颜色改成红色-->
                                       <VisualState x:Name="Test1">
                                           <Storyboard>
                                               <ColorAnimation Storyboard.TargetName="BorderBrush" Storyboard.TargetProperty="Color" To="Red"/>
                                           </Storyboard>
                                       </VisualState>
                                       <!--创建状态Test2把Border背景的颜色改成蓝色-->
                                       
                                           <VisualState x:Name="Test2">
                                           <Storyboard>
                                               <ColorAnimation Storyboard.TargetName="BorderBrush" Storyboard.TargetProperty="Color" To="Blue"/>
                                           </Storyboard>
                                       </VisualState>
                                   </VisualStateGroup>
                               </VisualStateManager.VisualStateGroups>

                               <Border.Background>
                                   <!--定义Border背景的颜色,用于测试不同状态的显示效果-->
                                   <SolidColorBrush x:Name="BorderBrush" Color="Black"/>

                               </Border.Background>
                               <Grid>
                                   <Ellipse x:Name="ellipse19" Width="{TemplateBinding Button.Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Button.Background}" Stroke="Red"/>
                                   <TextBlock Margin="5,0,0,0" FontSize="50" VerticalAlignment="Center" HorizontalAlignment="Center"
                                              Text="{TemplateBinding Button.Content}"/>
                                   <TextBlock FontSize="50" Foreground="Red" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{TemplateBinding Button.Content}"/>
                               </Grid>
                           </Border>
                       </ControlTemplate>
                   </Button.Template>
               </Button>
/// <summary>
       /// 跳转到状态Test1
       /// </summary>
       /// <param name="sender"></param>
       /// <param name="e"></param>
       private void Button_LostFocus(object sender, RoutedEventArgs e)
       {
           VisualStateManager.GoToState(sender as Button,"Test1",true);
       }
       /// <summary>
       /// 跳转到状态Test2
       /// </summary>
       /// <param name="sender"></param>
       /// <param name="e"></param>
       private void Button_Tapped(object sender, TappedRoutedEventArgs e)
       {
           VisualStateManager.GoToState(sender as Button,"Test2",true);
       }

<Button Content="Hello World" LostFocus="Button_LostFocus" Tapped="Button_Tapped">
                  <Button.Template>
                      <ControlTemplate TargetType="Button">
                          <Border>
                              <VisualStateManager.VisualStateGroups>
                                  <VisualStateGroup>
                                      <VisualStateGroup.Transitions>
                                          <!--状态Test1转换为状态Test2的颜色变化动画-->
                                          <VisualTransition From="Test1" To="Test2" GeneratedDuration="0:0:1.5">
                                              <Storyboard>
                                                  
                                              </Storyboard>
                                          </VisualTransition>
                                         
                                      </VisualStateGroup.Transitions>
                                      <!--创建状态Test1把Border背景的颜色改成红色-->
                                      <VisualState x:Name="Test3">
                                          <Storyboard>
                                              <ColorAnimation Storyboard.TargetName="BorderBrush1" Storyboard.TargetProperty="Color" To="Red"/>
                                          </Storyboard>
                                          
                                      </VisualState>
                                      <!--创建状态Test2把Border背景的颜色改成蓝色-->
                                      <VisualState x:Name="Test4">
                                          <Storyboard>
                                              <ColorAnimation Storyboard.TargetName="BorderBrush1" Storyboard.TargetProperty="Color" To="Blue"/>
                                          </Storyboard>
                                      </VisualState>
                                      
                                  </VisualStateGroup>
                              </VisualStateManager.VisualStateGroups>

                              <Border.Background>
                                  <SolidColorBrush x:Name="BorderBrush1"
                                                   Color="Black"/>
                              </Border.Background>
                              <Grid>
                                  <Ellipse x:Name="ellipse20" Width="{Binding Width}" Height="{Binding Height}"
                                           Fill="{Binding Background}"
                                           Stroke="Red"/>
                                  <TextBlock Margin="5,0,0,0" FontSize="50" VerticalAlignment="Center" HorizontalAlignment="Center"
                                             Text="{Binding}"/>
                                  <TextBlock FontSize="50" Foreground="Red" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding}"/>
                                  
                              </Grid>
                          </Border>
                      </ControlTemplate>
                  </Button.Template>
              </Button>

<Style x:Name="ItemsControlStyle" TargetType="ItemsControl">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ItemsControl">
                        <ScrollViewer BorderBrush="Red" BorderThickness="6">
                            <StackPanel Orientation="Horizontal" Background="Blue">
                                <Border BorderBrush="Yellow" BorderThickness="3">
                                    <ItemsPresenter/>
                                </Border>
                            </StackPanel>
                        </ScrollViewer>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
 ObservableCollection<People> peoples = new ObservableCollection<People>();
            peoples.Add(new People() { FirstName="lee2",LastName="Terry2"});
            peoples.Add(new People() { FirstName="lee3",LastName="Terry3"});
            peoples.Add(new People() { FirstName = "lee4", LastName = "Terry4" });
            peoples.Add(new People() { FirstName = "lee5", LastName = "Terry5" });
            itemsControl.ItemsSource = peoples;
            itemsControl1.ItemsSource = peoples; 
  <ItemsControl x:Name="itemsControl1" ItemTemplate="{StaticResource PersonNameDataTemplate}" Style="{StaticResource ItemsControlStyle}"/>

<ListBox x:Name="listbox" ItemTemplate="{StaticResource dataTemplateDefaultKey}"/>
<!--选中数据项的样式-->
       <DataTemplate x:Key="dataTemplateSelectKey" x:Name="dataTemplateSelectName">
           <Grid Tapped="StackPanel_Tapped" Background="Red">
               <TextBlock Text="{Binding LastName}" FontSize="50"/>
           </Grid>
       </DataTemplate>
       <!--默认数据项的样式,注意默认的数据项样式不能在C#中再次调用-->
       <DataTemplate x:Key="dataTemplateDefaultKey" x:Name="dataTemplateDefaultName">
           <StackPanel Orientation="Horizontal" Tapped="StackPanel_Tapped">
               <TextBlock Text="{Binding LastName}"/>
               <TextBlock Text=","/>
               <TextBlock Text="{Binding FirstName}"/>
           </StackPanel>
       </DataTemplate>
       <!--非选中数据项的样式-->
       <DataTemplate x:Key="dataTemplateNoSelectKey" x:Name="dataTemplateNoSelectName">
           <StackPanel Orientation="Horizontal" Tapped="StackPanel_Tapped">
               <TextBlock Text="{Binding LastName}"/>
               <TextBlock Text=","/>
               <TextBlock Text="{Binding FirstName}"/>
           </StackPanel>
       </DataTemplate>
 private void StackPanel_Tapped(object sender, TappedRoutedEventArgs e)
       {
           //获取到的对象是ListBoxItem
           ListBoxItem myListBoxItem = (ListBoxItem)(listbox.ContainerFromItem((sender as Panel).DataContext));
           //在ListBoxItem中查找ContentPresenter
           ContentPresenter myContentPresenter = FindVisualChild<ContentPresenter>(myListBoxItem);
           //ContentPresenter myContentPresenter = (ContentPresenter)(listbox.ContainerFromItem((sender as Panel).DataContext));
           if (myContentPresenter.ContentTemplate.Equals(dataTemplateSelectName)) { 
               myContentPresenter.ContentTemplate = dataTemplateNoSelectName;
           }
           else
           {
               myContentPresenter.ContentTemplate = dataTemplateSelectName;
           }
       }

       private childItem FindVisualChild<childItem>(DependencyObject obj) where childItem:DependencyObject
       {
           for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
           {
               DependencyObject child=VisualTreeHelper.GetChild(obj, i);
               if (child != null && child is childItem)
                   return (childItem)child;
               else
               {
                   childItem childOfChild=FindVisualChild<childItem>(child);
                   if (childOfChild != null)
                       return childOfChild;
               }
           }
           return null;
       }

 public class MyData { 
        public string Title { get; set; }
    }
  public MyData myData = new MyData { Title = "这是绑定的标题!" };
this.DataContext = myData;
 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                    <TextBlock Text="{Binding Title}" Margin="12,100,0,28"
                               FontSize="50"/>
                </Grid>

<StackPanel Margin="12,0,12,0">
                    <TextBlock FontSize="25" Text="圆形的半径会根据slider控件的值而改变"/>
                    <Slider Name="slider" Value="50" Maximum="400"/>
                    <TextBlock FontSize="25" Text="半径为:"/>
                    <TextBlock Name="txtblk" Text="{Binding ElementName=slider,Path=Value}" FontSize="48"/>
                    <Ellipse Height="{Binding ElementName=slider,Path=Value}" Width="{Binding ElementName=slider,Path=Value}" Fill="Red" Stroke="Black" StrokeThickness="1"/>
                </StackPanel>
            </PivotItem>
``
11.14.三种绑定模式
1.OneTime
OneTime表示一次绑定,在绑定创建时使用数据源更新目标,适用于只显示数据而不进行数据的更新.OneTime绑定会导致源属性初始化目标属性,但不传播后续更改.
2.OneWay
OneWay表示单向绑定,在绑定创建时或源数据发生变化时更新到目标,适用于显示变化的数据,这是默认模式.OneWay绑定导致对源属性的更改会自动更新目标属性,但是对目标属性的更改不会传播回源属性.此绑定类型适用于绑定的控件为隐式只读控件的情况,如果无需监视目标属性的更改,则使用OneWay的绑定模式可避免TwoWay绑定模式的系统开销
3.TwoWay
TwoWay表示双向绑定,可以同时更新源数据和目标数据,TwoWay绑定导致对源属性的更改会自动更新目标属性,而对目标属性的更改也会自动更新源属性.此绑定类型适用于输入框或其他完全交互式UI方案.大多数UI元素内部实现的属性都默认为OneWay绑定,但是一些依赖项属性,通常为用户可编辑的控件的属性,如TextBox的Text属性和CheckBox的IsChecked属性,默认为TwoWay绑定.
下面演示三种绑定模式的区别
``` bash
<StackPanel Margin="12,0,12,0">
                    <Slider x:Name="slider" Value="50" Maximum="400"/>
                    <!--OneTime-->
                    <TextBlock FontSize="25" Height="41" Text="OneTime" VerticalAlignment="Top" Width="112"/>
                    <TextBox Height="72" Text="{Binding ElementName=slider,Path=Value,Mode=OneTime}" Width="269"/>
                    <TextBlock FontSize="25" Height="46" Text="OneWay" VerticalAlignment="Top" Width="99"/>
                    <!--OneWay-->
                    <TextBox Height="72" Text="{Binding ElementName=slider,Path=Value,Mode=OneWay}" Width="269"/>
                    <TextBlock Height="40" FontSize="25" Text="TwoWay" VerticalAlignment="Top" Width="94"/>
                    <!--TwoWay-->
                    <TextBox Height="72" Text="{Binding ElementName=slider,Path=Value,Mode=TwoWay}" Width="268"/>
                    <TextBlock FontSize="25" Height="43" Text="slider的值:"/>
                    <TextBlock FontSize="25" Height="43" Text="{Binding ElementName=slider,Path=Value}" Width="185"/>
                    
                </StackPanel>