How to Load Data Asynchronously in WPF UI using MVVM Data Binding?

-

 Most of the content which is displayed by the WPF Application is fetched from either the database or some Web service. 

Why do we need to load Data Asynchronously?

We might have seen that when we wait for the content to be available it tends to freeze our WPF Application/ Main Thread. Therefore to avoid that we need to fetch large content/Data in an asynchronous fashion from the Database or Remote Server.

But the challenge there is how do we update the UI asynchronously. It is also desirable to show the loading progress to the user using some spinner control so that user gets the feeling that content is loading. 

We know that if we query the Web service or the Windows Service for any result it returns a Task which encapsulates the result if we are using Asynchronous version of the API. We will not be able to do direct data binding with the task which is being returned as WPF does not supports it. 

Evaluating Different ways to load data in an Async Fashion

One way is to use the await to get the result of the task, which works but using a async void method is not preferred because error handling will not be taken care as there is no Task which is being returned. Following example demonstrates this case:


Async Void method


Here in the Initialize method we are trying to fetch the result from the windows service and update the property which is bound with the View. Normally if there is some exception thrown in async method, returned task will contain that information. Since this is an async void method if there is some exception thrown in this function the caller of the function will not be able to handle this as there is no Task context returned.

Preferred way is to Encapsulate the Task returned by the asynchronous function into an object which can be bound to the View as shown in the figure below:

Sample Code


View Model with Notify Task Completion


As shown in the code we are encapsulating the task retuned by the asynchronous API into an object of type NotifyTaskCompletion. In simple Terms it is a wrapper over the Task and exposes the properties of the task. NotifyTaskCompletion source code can be found in the msdn document : NotifyTaskCompletion

ProcessingTask object which is of type NotifyTaskCompletion can be bound to the WPF View class as shown below:

WPF View class with Task Binding

As shown in the xaml file above the ResultTxt TextBox Text is bound to the Result property of the ProcessingTask Object which is of type NotifyTaskCompletion. This can be seen as an asynchronous data binding where the text will be updated as soon as the task gets completed. 

Another advantage of using this type of pattern is that we will be able to show the user loading progress by using the IsNotCompleted property of the NotifyTaskCompletion. Whenever this property is true we can set the visibility of the Spinner Control to true.

Using this we will not block the Main WPF Application thread and the application will not freeze trying to load the large content. Below Screenshot shows the output where the Result is updated by the service:

Asynchronous Data Binding











 

 

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