/Visual Studio 2008/VBSL3Animation/Easing.xaml

<!--/****************************** Module Header ******************************\

* Module Name:  Easing.xaml

* Project:      VBSL3Animation

* Copyright (c) Microsoft Corporation.

* 

* This module shows how to use EasingFunction for PointAnimation. In addition,

* it demonstrates how to write a custom Ease class.

* 

* This source is subject to the Microsoft Public License.

* See http://www.microsoft.com/opensource/licenses.mspx#Ms-PL.

* All other rights reserved.

* 

* History:

* * 9/9/2009 05:00 PM Allen Chen Created

\***************************************************************************/-->

    

    <UserControl x:Class="VBSL3Animation.Easing"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

    xmlns:c="clr-namespace:VBSL3Animation"

    Width="400" Height="300">

    <UserControl.Resources>

        <BackEase x:Name="BackEase" Amplitude="1" EasingMode="EaseIn"></BackEase>

        <c:MyEase x:Name="MyEase"></c:MyEase>

        <Storyboard x:Name="MyAnimationStoryboard">

            <PointAnimation x:Name="MyAnimation"

                            Duration="0:0:2" 

                            Storyboard.TargetProperty="Center"

                            Storyboard.TargetName="MyAnimatedEllipseGeometry"

                            EasingFunction="{StaticResource BackEase}"

                            >

            </PointAnimation>

        </Storyboard>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.RowDefinitions>

            <RowDefinition Height="2*"></RowDefinition>

            <RowDefinition Height="8*"></RowDefinition>

        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0">

            <RadioButton GroupName="g1" Content="BackEase" IsChecked="true" x:Name="BackEaseRadioButton" Click="BackEaseRadioButton_Click"></RadioButton>

            <RadioButton GroupName="g1" Content="MyEase" IsChecked="false" x:Name="MyEaseRadioButton" Click="MyEaseRadioButton_Click"></RadioButton>

            <TextBlock Text="Please click mouse in the pink area."></TextBlock>

        </StackPanel>

        <StackPanel MouseLeftButtonDown="MyStackPanel_MouseLeftButtonDown"  x:Name="MyStackPanel" Background="Pink"  Grid.Row="1">

            <Path>

                <Path.Fill>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="#FFF1F7FB" Offset="0"/>

                        <GradientStop Color="#FF3794E4" Offset="1"/>

                    </LinearGradientBrush>

                </Path.Fill>

                <Path.Data>

                    <!-- Describes an ellipse. -->

                    <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"

          Center="50,50" RadiusX="15" RadiusY="15" />

                </Path.Data>

            </Path>

        </StackPanel>

    </Grid>

</UserControl>