Animation in WPF

In WPF, we have 3 types of animations:
1) Color Animation – Used to change the color of the control.
2) Double Animation – Used to animate double values such as X/Y coordinate, Width and Height etc.
3) Key Frame Animation – This is a complex animation than color and double animation. In this animation we use key frames or a series of key frames.

Above we have seen just 1 line introduction of all types. We will learn more about them below along with their examples.

We all know that we have to write animation part in “Storyboard”. To begin storyboard we need to do “<BeginStoryBoard>”. It has two main properties – “TargetName” and “TargetProperty”. “TargetName” identifies the pbject and “TargetProperty” identifies the property of that oject. If we want to begin animation on some event like button click etc we can use “EventTrigger”. In animation there are two things – “To” and “From”. “To” specifies the start of animation and “From” specifies the end of animation. “TimeSpan” is 1 more keyword which specifies the time span for how much animation should run. These are few basic keywords which are necessary in our coding part for animation. We might come across few more keywords which I will explain them as they are used.
Now let’s start with examples of animations.

1) Color Animation:

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Rectangle Height="38" HorizontalAlignment="Left" Margin="133,156,0,0" x:Name="Rectchangecolor" Stroke="Black" Fill="Yellow" VerticalAlignment="Top" Width="200">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Rectchangecolor"
Storyboard.TargetProperty="Fill.Color"
From="Yellow"
To="DarkBlue"
Duration="0:0:1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Grid>
</Window>

Above is the code of color animation. In this example, we have a rectangle which is of yellow color which changes to blue color in time span of 1 second. In above code we have declared a rectangle which is already filled with yellow color. We have declared event on it as “MouseLeftButtonDown”. If we left single click on rectangle, animation will start. Now this animation we have declared below in StoryBoard in Color Animation. For this we have given TargetName the name of rectangle as that is our target for animation and TargetProperty we have declared as Fill.Color which fills the target with given color. Here we have also declared which color to fill which is blue. We have given duration as 0:0:1 which is 1 sec.

So after writing this code we will get the output as shown in below video.



2) Double Animation:

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Rectangle Height="38" HorizontalAlignment="Left" Margin="133,156,0,0" x:Name="Rectchangecolor" Stroke="Black" Fill="Red" VerticalAlignment="Top" Width="200">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Rectchangecolor"
Storyboard.TargetProperty="Height"
From="38"
To="100"
Duration="0:0:1.5">
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="Rectchangecolor"
Storyboard.TargetProperty="Width"
From="200"
To="350"
Duration="0:0:3">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Grid>
</Window>

Above is the code of double animation. In this example, we have a rectangle which is of red color of height 38 and width 200 which changes to height 100 in time span of 1.5 second and width 350. We have declared event on it as “MouseLeftButtonDown”. If we left single click on rectangle, animation will start. Now this animation we have declared below in StoryBoard in Double Animation. For this we have given TargetName the name of rectangle as that is our target for animation and TargetProperty we have declared as Height for change in height and Width for change in width.
So after writing this code we will get the output as shown in below video.



Let’s see 1 more example of Double Animation in which we will write animation part in code.

In XAML you will have to write,
<Grid>
<Button Content="Animate" Height="33" HorizontalAlignment="Left" Margin="32,12,0,0" Name="btnRotate" VerticalAlignment="Top" Width="165" Click="btnRotate_Click" />
<Rectangle Height="200" HorizontalAlignment="Left" Margin="534,158,0,0" Name="rectangle1" Stroke="Black" VerticalAlignment="Top" Width="50" Fill="#FF166C0F" />
<Rectangle Fill="#FF166C0F" Height="50" HorizontalAlignment="Left" Margin="457,235,0,0" Name="rectangle2" Stroke="Black" VerticalAlignment="Top" Width="200" />
</Grid>

In code we need to write,

namespace WpfApplication1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

private void btnRotate_Click(object sender, RoutedEventArgs e)
{
DoubleAnimation da =new DoubleAnimation();
da.From = 0;
da.To = 90;
da.Duration = new Duration(TimeSpan.FromSeconds(3));
DoubleAnimation da1 = new DoubleAnimation();
da1.From = 0;
da1.To = -90;
da1.Duration = new Duration(TimeSpan.FromSeconds(3));
//da.RepeatBehavior = RepeatBehavior.Forever;
RotateTransform rt = new RotateTransform();
rectangle1.RenderTransform = rt;
rt.BeginAnimation(RotateTransform.AngleProperty, da);
RotateTransform rt1 = new RotateTransform();
rectangle2.RenderTransform = rt1;
rt1.BeginAnimation(RotateTransform.AngleProperty, da1);
}


}
}

Here we have taken two similar rectangles. We have given angle property to each of them. To 1 rectangle we have given angle 90 and to other we have given angle -90 due to which both rectangle animate in opposite direction. We have included animation in the code. For writing this in our code we need to include namespace using System.Windows.Media.Animation.

So after writing this code we will get the output as shown in below video.



We can also have a combination of Color and Double Animation.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="433" Width="803">
<Grid>
<Button Content="Animate" Height="33" HorizontalAlignment="Left" Margin="32,12,0,0" Name="btnRotate"
VerticalAlignment="Top" Width="165"/>
<Rectangle Height="200" HorizontalAlignment="Left" Margin="534,158,0,0" Name="rectangle1"
Stroke="Black" VerticalAlignment="Top" Width="50" Fill="DarkGreen">
<Rectangle.RenderTransform>
<RotateTransform x:Name="TransRotate1"
CenterX="25" CenterY="25" Angle="0" />
</Rectangle.RenderTransform>
<Rectangle.Resources>
<Storyboard x:Key="spin1">
<DoubleAnimation Storyboard.TargetName="TransRotate1"
Storyboard.TargetProperty="Angle"
By="90"
Duration="0:0:10">
</DoubleAnimation>
<ColorAnimation Storyboard.TargetName="rectangle1"
Storyboard.TargetProperty="Fill.Color"
From="DarkGreen"
To="Red"
Duration="0:0:15">
</ColorAnimation>
</Storyboard>
</Rectangle.Resources>
</Rectangle>
<Rectangle Fill="DarkGreen" Height="50" HorizontalAlignment="Left" Margin="457,235,0,0" Name="rectangle2"
Stroke="Black" VerticalAlignment="Top" Width="200">
<Rectangle.RenderTransform>
<RotateTransform x:Name="TransRotate2"
CenterX="25" CenterY="25" Angle="0" />
</Rectangle.RenderTransform>
<Rectangle.Resources>
<Storyboard x:Key="spin2">
<DoubleAnimation Storyboard.TargetName="TransRotate2"
Storyboard.TargetProperty="Angle"
By="-90"
Duration="0:0:10">
</DoubleAnimation>
<ColorAnimation Storyboard.TargetName="rectangle2"
Storyboard.TargetProperty="Fill.Color"
From="DarkGreen"
To="DarkBlue"
Duration="0:0:15">
</ColorAnimation>
</Storyboard>
</Rectangle.Resources>
</Rectangle>
</Grid>
</Window>

Here we have taken the combination of color and double animation. We have considered the same above example for this. Here as time passes and angle changes the color of rectangle also changes.

So after writing this code we will get the output as shown in below video.



3) KeyFrame Animation:

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="433" Width="803">
<Grid>
<Rectangle Height="38" HorizontalAlignment="Left" Margin="133,156,0,0" x:Name="Rect" Stroke="Black" Fill="DarkGreen" VerticalAlignment="Top" Width="200">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="RectTrans" X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectTrans"
Storyboard.TargetProperty="X"
Duration="0:0:15">
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:5" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:3" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>

</Grid>
</Window>


Here we have taken a rectangle. It uses key frames to change the animation. Here we are using X value. We have changed it from 0 to 350 back to 50 and again to 200. We have used Linear key frame so it moves in Linear Fashion.

So after writing this code we will get the output as shown in below video.



Similarly we can do using spline double key frames as follows.

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="433" Width="803">
<Grid>
<Rectangle Height="38" HorizontalAlignment="Left" Margin="133,156,0,0" x:Name="Rect" Stroke="Black" Fill="DarkGreen" VerticalAlignment="Top" Width="200">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="SplineTestTrans" X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SplineTestTrans"
Storyboard.TargetProperty="X"
Duration="0:0:15">
<SplineDoubleKeyFrame Value="350" 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="SplineTestTrans"
Storyboard.TargetProperty="Y"
Duration="0:0:15">
<SplineDoubleKeyFrame Value="350" 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>

Here we have used spline double key frames using which we can animate in any way.
So after writing this code we will get the output as shown in below video.

Report Writing in Windows Forms

Microsoft Report is based on report definition which is an XML file that gives us the data of a report. It may have different extensions. For eg. We can create a client-side report definition language (*.rdlc) file using Visual Studio. Reports also include tables, aggregated and multidimensional data, charts etc as per users requirements.

Let us see a example of creating a report. In this we will have a table in our report which will shoe us details of students like name,roll no etc.. Lets start is step by step..

Step 1:
We want to build a windows application so we will choose Windows Form Application. You can select any language you want according to your choice. May be it is VB or C#. Give it a name and move ahead by clicking ok. You can check it in screenshot given below. I have named it as SampleSQLReport.



Step 2:
After creating Windows Form Application we will get a form which will be completely blank. Now we will ask user to enter his name who wants to generate a report. For this we will need a label on which we will ask user to enter name, then a textbox in which user will enter their name, and last a button on clicking of which will generate a report. We can also increase form size by going into its properties and changing size of it. All these things are shown in screenshot below.



Step 3:
Now as we want to generate report we need to include a Microsoft ReportViewer. We can also use Crystal ReportViewer but here we will use Microsoft ReportViewer. We can get this from our toolbox which is on left side. In that we will get it from Reporting. So you can include Microsoft ReportViewer from there by dragging and dropping or by double clicking on it. You can see a report just below label, textbox etc. We can see all these things in screenshot below.



Step 4:
After this we have to add a file named .rdlc creating report. For adding this we need to add new item  Report. Name it. Here I have given its name as rptSample.rdlc. After adding it we get this in window as shown below.



Step 5:
Next thing we will do is that the textbox which we had asked on main application we will display that name on report too.. For that we need to put textbox on report too which will display name. For displaying name on this from main page textbox we need to add report parameters. We can do this by going into Report tab in above navigation bar. Report  Report Parameters. After you select this you will get a screen which is shown in below screenshot. In similar way you have to move ahead.



In above screenshot you can see we have added parameters. I have given its name as paraName. Similarly you can add your parameters.

In below screenshot we can see how to add parameters to textboxes so that its value gets displayed in textbox.



Step 6:
As we see above we have to select (Category) Parameters  (Item) All  (Parameter) parameter name which you have declared before in your code. Then after clicking ok you will get below screen.




Till what we have done, its code is given in below screenshot.



Till what we have done lets run it. So that we will get to know whether wat we did atleast till that point how its working. So after running you get this.



Step 7:
Now lets move ahead with database part as we want to display Student database in a tabular format in our report. So for that will add annother class in code which will include Student table format. We can see the code in below screenshot.



In above code DataTable Student is created with rows like rollno,name,div,marks and those columns are added in columns.

Step 8:
Now we have created DataTable but we need to add DataSource also to this. For that we have an option on left hand named data source. When you click on that we get an option Add New Data Source. After clicking on that we get screen as shown below and in that we have to choose object.





After selecting object click Next. After that you will get screen as shown below.



Step 9:
In aboce screenshot you can see options in which student option is included. It’s the same table name which we have created in our code. Select that and click Next. On left side you will see table and its columns which you had added in code. Now as we want to display this in tabular format we will dragand drop Table from toolbox on right side and we will get a table in our report page. Now we can see rows and columns in that table. We will select each column from left side and drag and drop it on particular column in the table. For eg. We will drag and drop rollno column and drag and drop it on 1st column of the table. Similarly we will do of remaining rows and this way we have added columns to our table. If you want to add more columns to the table you can right click on it and you will get option Insert column to right/left. So according to your needs you can add more columns to your table. Final output of this is shown in below screenshot.





Step 10:
Now we have to add some data in Student table. We will have to add this in code itself. For that we have to write code written in below screenshot marked in red.



Final Output:
After adding this data our work is finished. Now we will run our project and we will get output as shown in screenshot below.



So in this way you can create your reports.