How to Create Animation in WPF?

-

 In some instances we need some animation to be shown in the User interface to improve the User Experience for example showing the progress bar indicating the live progress of some activity which is ongoing in the background.

What is Animation?

Animation is the process of changing the properties of an image/text such that it appears as moving in Realtime. Animation helps to improve the overall user experience. In modern application we can see some kind of animation for every event which is happening in the application.

Implementing Animation in WPF

In this post lets understand how animation works in WPF with the help of Storyboard. Here we are going to discuss about basic animation like performing rotation of some shapes.

Below code demonstrates the animation for the Spinner Control which is used to indicate that some background task is in progress.

XAML Code

Animation using Storyboard WPF

In the above code we have taken an ellipse and made it into a circle with equal width and height. Since we are going to make a basic spinner control we need to cut a small portion in the circle. This is accomplished with the help of Stroke dash array where some percent of the circle is left blank.

Now coming to the main part related to animation. Simply put animation is basically achieved by changing some visible property of an object in a repeated manner. This is achieved with the help of DoubleAnimation which does the task of changing the specified property and the Storyboard stores this animation information.

Next is there should be some one which should do the job of rendering the object whenever the property changes by calculating the associated render matrix. This is achieved with the help of RenderTransform which transforms the rendered object.

Next there should be some trigger which should start the entire process. This is achieved using Triggers. In our case we have used the EventTrigger as Loaded that is whenever the Control is loaded the Storyboard should execute. Inside the storyboard we have changed the Angle Property of the Rotate Transform which makes our ellipse control to rotate starting from Angle=0 to Angle=360. The RepeatBehaviour tells the animation duration. In our case we have set it to Forever which means the animation should continue until the application closes.

There are various other properties which can be targeted for animation like scaling of control in X and Y directions, Skew etc.

Below video shows the above code in action:



 

Comments

Post a Comment

Popular posts from this blog

Creating RESTful Minimal WebAPI in .Net 6 in an Easy Manner! | FastEndpoints

-
Image
  We might have developed Web APIs using MVC Controllers where we used to give Route Path Attributes to the Controller and  to identify individual methods we used to provide Actions in the Route. With the Controller approach we need to write boiler plate code in separate files which deals with the Configuration of the Web Service. Those who have worked in Node js would be aware of how easy it is to create a Web API and expose different Endpoints without the need of so much boiler plate code. Here we are going to discuss of similar approach for creating a Web API in .Net6 using FastEndpoints. Under the hood it uses Minimal API concept which tries to reduce the dependencies required to achieve a particular task. This approach is more suitable in the case of Microservice Architecture where we want to keep the dependencies to minimum. Must Read : Fluent API and Data Annotations What are FastEndpoints? FastEndpoints is a Framework compatible with .Net 6 which allows to build a...
Read more

Step By Step Guide to Detect Heap Corruption in Windows Easily

-
Image
Introduction Heap memory corruption is a critical issue that can lead to application crashes, data loss, and even security vulnerabilities. Detecting and addressing heap memory corruption early is crucial for maintaining the stability and security of Windows applications. In this blog post, we will explore how to detect heap memory corruption using two powerful tools: DebugDiag and AppVerifier. Must Read : synchronization in C++20 . Understanding Heap Memory Corruption Heap memory is a dynamically allocated memory space used by applications to store data at runtime. Heap memory corruption occurs when an application writes data beyond the allocated memory boundaries , leading to memory leaks, crashes, and unpredictable behavior. Detecting such corruption manually can be time-consuming and complex, making automated tools invaluable for identifying and diagnosing these issues. What is PageHeap? PageHeap specifically focuses on detecting heap-related problems, like heap overflows, heap und...
Read more

How to dynamically add Properties in C# .NET?

-
Image
There are certain situations where we have to create object dynamically with properties added to the object dynamically. Data related to these properties may be coming in from external sources like a file or from any other serialized format. We can achieve this with the help of reflection, but it is bit complex and should have some prior knowledge of Reflection. What is meant by Dynamic Creation of Properties in c#? Dynamic creation of properties means at the time of writing the code, programmer is not aware of the properties which can be part of the object and its value. For Example there may be some data which needs to be read from say xml file, In this case there should be some organized way by which we can represent the data, This can be in the form of a object. Content of this object and the properties cannot be deduced while writing the application, it needs to be constructed from the xml file which is read when the application runs. Expando Object Expando Object comes to the res...
Read more