DOTNET WPF XAML C# KEYSSPLINE ANIMATION of IMAGES MANOHAR GOUD

K. MANOHAR GOUD

9866550012

WPF Using the XAML - Keyspline Animation of Images:

Step 1 

First we create a WPF application using the following procedure:

• Open the Visual Studio.
• Select the C# language and "WPF" application.
• Name the project as "Animation".
• Click on the "OK" button.

Step 2

• Go to the "View" -> "Toolbox".
• The toolbox opens in the left corner of the window.
• Then drag and drop a rectangle onto the design view.

• Now go to the MainWindow.xaml and write the following code between the rectangle1 tags:

       <Rectangle

  Name="SplineElement"

  Height="200"

  Width="200" Grid.Row="3"

  HorizontalAlignment="Left"

            >

            <Rectangle.Fill>

                <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg"/>

            </Rectangle.Fill>

         

            <Rectangle.RenderTransform>

                <TranslateTransform x:Name="SplineTrans" X="0" Y="0" />

            </Rectangle.RenderTransform>

            <Rectangle.Triggers>

                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="X"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="Y"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame

            Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Rectangle.Triggers>

        </Rectangle>

 Step 3

• Now again go to the View-> "Toolbox" and Drag and Drop the rectangle on the design view.
• Then again go to the MainWindow.xaml and write the following code between the rectangle2 tags:

  <Rectangle

             Name="SplineElement1"

  Height="200"

  Width="200" Grid.Row="1"

  HorizontalAlignment="Left">

            <Rectangle.Fill>

                <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\index.jpg"/>

            </Rectangle.Fill>

            <Rectangle.RenderTransform>

                <TranslateTransform x:Name="SplineTrans1" X="0" Y="0" />

            </Rectangle.RenderTransform>

            <Rectangle.Triggers>

                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans1"

          Storyboard.TargetProperty="X"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="Y"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame

            Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Rectangle.Triggers>

        </Rectangle>

• Now the final source code of the MainWindow.xaml is:

<Window x:Class="Moving_elements.MainWindow"

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

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

        Title="MainWindow" Height="390" Width="525">

    <Grid Background="#FF807C50">

        <Rectangle

  Name="SplineElement"

  Height="200"

  Width="200" Grid.Row="3"

  HorizontalAlignment="Left"

            >

            <Rectangle.Fill>

                <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg"/>

            </Rectangle.Fill>

         

            <Rectangle.RenderTransform>

                <TranslateTransform x:Name="SplineTrans" X="0" Y="0" />

            </Rectangle.RenderTransform>

            <Rectangle.Triggers>

                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="X"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="Y"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame

            Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Rectangle.Triggers>

        </Rectangle>

        <Rectangle

             Name="SplineElement1"

  Height="200"

  Width="200" Grid.Row="1"

  HorizontalAlignment="Left">

            <Rectangle.Fill>

                <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\index.jpg"/>

            </Rectangle.Fill>

            <Rectangle.RenderTransform>

                <TranslateTransform x:Name="SplineTrans1" X="0" Y="0" />

            </Rectangle.RenderTransform>

            <Rectangle.Triggers>

                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans1"

          Storyboard.TargetProperty="X"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="Y"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame

            Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Rectangle.Triggers>

        </Rectangle>

    </Grid>

</Window>

Output 

Now press F5.

Now click on the image:

 

 Images move slowly in a curved path at a certain distance: