Animation Through Coding in Expression Blend 4

Step 1

Open Expression blend 4 -> select WPF -> select WPF Application -> change the Name and Location according to your choice -> hit Ok and a blank window appears in the Artboard.

Step 2

Select ToolBox -> Canvas, draw Canvas, Manage the Width & Height, Background Color, Margin, Horizontal and Vertical Alignment, Opacity Mask and Render Transform as shown below:

<Canvas.RenderTransform>

</TransformGroup>

</Canvas.RenderTransform>

</TransformGroup>

</Canvas>

Note: Have a look at the Object and Timeline Window for a deeper understanding of Canvas and it's properties as shown below:

Step 3

Select ToolBox -> select Border -> draw a Border, Manage the BorderBrush, BorderThickness, CornerRadius, Margin, RenderTransform and Translation as shown below:

<Border.RenderTransform>

</TransformGroup>

</Border.RenderTransform>

</Border>

Note: Have a look at the Object and Timeline Window for a deeper understanding of Border and it's properties as below:

Step 4

Copy & Paste the image in the WPF Application in the Project Window as shown below:

Step 5

Insert the image in the Artboard, manage the Width & Height, Rotation, Translation as shown below:

Message-Android-image2 in Expression Blend 4.png

<Image.RenderTransform>

</TransformGroup>

</Image.RenderTransform>

</Image>

Note: Have a look at the Object and Timeline Window for a deeper understanding of the properties of Image as shown below:

Message-Android-image3 in Expression Blend 4.png

Step 6

Select Storyboard from the Object and Timeline Window and start Animation as shown below:

Storyboard-1 in Expression Blend 4.png

Storyboard2 in Expression Belnd 4.png

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</ColorAnimationUsingKeyFrames>

</ColorAnimationUsingKeyFrames>

</ThicknessAnimationUsingKeyFrames>

</ColorAnimationUsingKeyFrames>

<DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</ThicknessAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</ThicknessAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

Step 7

For playing the Animation, Trigger plays a vital role as shown below:

<Window.Triggers>

</EventTrigger>

</Window.Triggers>

Note: We can see the design along with XAML code or design only or XAML code only in the Artboard as shown below:

To the right side of the Artboard at the top see the Design Option, it shows the Design only as shown below:

To the right side of the Artboard at the top see the XAML Option, it shows the XAML code only as shown below:

To the right side of the Artboard at the top see the Split Option, it shows the Design along with XAML code as shown below:

Step 8:

At the Initial Stage of animation, the Canvas, Border and Image looks as shown below:

At the Middle Stage of animation, the Canvas and Border Size becomes enlarged as shown below:

At the Rotation Stage of animation the image rotates as shown below:

Rotational-Animation image1-in-Expression-Blend-4.png

In the Last Stage of animation the image looks as shown below:

Note: Here, we can rotate the image according to our choice by using the Points.

Step 9

Hit Ctrl+Shift+B or Select Project -> Build Project, and build the project, then hit F5 or Ctrl+F5 or Select Project -> Run Project and run the project as shown below:

Step 10

Structure of XAML Code when we open the WPF Application as shown below:

<Window

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

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

xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"

x:Class="WpfApplication1.MainWindow"

x:Name="Window"

Title="MainWindow"

Width="640" Height="480">

<Window.Resources>

</Window.Resources>
<Grid x:Name="LayoutRoot"></Grid>
</Window>
Summary

In this article we have learned "How to Design Animation through Coding?".