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 RESTful Web A
Read more

Mastering Concurrency with Latches and Barriers in C++20: A Practical Guide for Students

-
Image
Introduction Picture yourself as a student tasked with organizing a surprise party for a friend. You have a team of friends helping you, each with a specific role: one decorating, another cooking, and yet another taking care of entertainment. As you plan and coordinate, you quickly realize the importance of timing and synchronization. Just as in party planning, in the world of programming and computing, we often have multiple tasks running concurrently, similar to your friends handling different aspects of the party all at once. However, ensuring that these concurrent tasks harmonize can be a significant challenge. If decorations go up before the food is ready or the entertainment starts before guests arrive, it could lead to chaos. This is where the world of programming comes in, and in this blog, we'll explore powerful tools called "latches" and "barriers" to manage these concurrent scenarios efficiently. Learning about latches and barriers isn't just abou
Read more

Graph Visualization using MSAGL with Examples

-
Image
 Graph visualization is a great way to get a better understanding of complex relationships and structures in data. Whether you work as a software developer, a data scientist, or just want to explore networks, seeing graphs at runtime can be really helpful. In this blog, we'll look at how to make graphs at runtime with MSAGL. We'll cover the basics of creating, customizing, and visualizing graphs with MSAGL, as well as practical examples of how it can be used to create a social network and workflow. What is MSAGL? MSAGL, developed by Microsoft Research, is an open-source library designed for graph and diagram visualization. It offers a wide range of features and layout algorithms to create clear and aesthetically pleasing representations of complex graph structures. Installing MSAGL: To begin, you'll need to install the MSAGL library. You can download the latest version from the official MSAGL GitHub repository or conveniently install it using the NuGet package manager in Vi
Read more