Implementing a Custom Loader in WPF with MVVM

Enhancing User Experience with Custom Loaders in WPF Applications

A custom loader in a WPF (Windows Presentation Foundation) application serves the purpose of indicating to the user that the application is performing a task or operation that may take some time to complete.

This could include tasks such as loading data from a database, processing large amounts of information, or fetching data from a remote server.

The use of a custom loader enhances the user experience by providing visual feedback that the application is actively working on the requested task.

Instead of the user being left wondering if the application has frozen or if their action has been registered, the loader reassures them that progress is being made.

Users have the option to craft their own personalized loader complete with a logo. Additionally, the following NuGet library offers over 40 types of custom loaders, catering to diverse user requirements.

The custom loader offers a plethora of features, empowering users to tailor their loading experience according to their preferences. Users can customize various aspects.

1. LoaderOverlayColor: Set the color of the overlay displayed behind the loader.
2. ExpectedLoaderHeight: Define the desired height of the loader.
3. ExpectedLoaderWidth: Specify the preferred width of the loader.
4. LoaderFontSize: Adjust the font size of the loader text.
5. LoaderColor: Choose the color of the loader animation or icon.
6. LoaderText: Input text to display alongside the loader animation.
7. LoaderTextColor: Customize the color of the loader text.
8. LoaderHeaderIcon: Add an icon to the loader header for further customization.
9. CompanyBranding: Incorporate company branding elements into the loader for a personalized touch.

These features collectively provide users with the flexibility to create a loading experience that aligns seamlessly with their brand identity and user interface preferences.

The steps required to implement a custom loader in the application are as follows.

Step 1. Install the NuGet package

"WPF.CustomControls.LoadEase"

Step 2. Implementation of the loader in the WPF view.

<Window x:Class="WpfCustomLoaderTesting.MainWindow"
        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"
        xmlns:WaitWindow="clr-namespace:WPF.CustomControls.LoadEase;assembly=WPF.CustomControls.LoadEase"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <WaitWindow:AdornedControl x:Name="LoadingAdorner">
        <!-- Keep AdornedControl name as it is "LoadingAdorner" -->
        <WaitWindow:AdornedControl.AdornerContent>
            <!-- The "WPF.CustomControls.LoadEase" package includes various loaders, each with configurable properties. -->
            <!-- Configure properties based on specific requirements. -->
            <!-- Example: CompanyLogoSpinner -->
            <WaitWindow:CompanyLogoSpinner LoaderOverColor="Black"
                                          ImageNameWithAssemblyPath="pack://application:,,,/WpfCustomLoaderTesting;component/Resource/Images/Logo.png"
                                          ExpectedLoaderHeight="280"
                                          LoaderFontSize="15"
                                          ExpectedLoaderWidth="280"
                                          LoaderText="Loading.."
                                          LoaderTextColor="Red"
                                          LoaderBaseColor="Green"
                                          LoaderForegroundColor="OrangeRed"
                                          LoaderStrokeThickness="10" />

            <!-- Other loaders can be uncommented and configured as needed. -->

        </WaitWindow:AdornedControl.AdornerContent>

        <Grid>
            <!-- Main Content of the application -->
            <TextBlock Text="Demo"/>
            <Button Content="Test Loader" Height="40" Width="200" Margin="110,10,490,384" Click="Button_Click"/>
        </Grid>
    </WaitWindow:AdornedControl>

</Window>

Note. Users have the option to utilize any of the previously mentioned loaders. Additional loaders have been commented out for clarity. Users are limited to using only one loader at a time.

Step 3. Invoke the custom loader without the need to instantiate it.

// Stop Loader function
LoaderHandler.HideLoader();

// Start Loader function
LoaderHandler.ShowLoader();

Step 4. Invoke the custom loader in the MVVM pattern using dependency inject.

Inject the ICustomLoaderService into the constructor to enable invocation of the hide and show functionalities of the custom loader.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Threading;
using WPF.CustomControls.LoadEase;
using WPF.CustomControls.LoadEase.Utility;

namespace WpfCustomLoaderTesting
{
    public class MainWindowViewModel
    {
        private ICustomLoaderService customLoaderService = null;
        private DispatcherTimer timer = null;

        public MainWindowViewModel(ICustomLoaderService customLoaderService)
        {
            this.customLoaderService = customLoaderService;
            timer = new DispatcherTimer();
            timer.Interval = TimeSpan.FromSeconds(20); // Adjust the interval as needed
            timer.Tick += Timer_Tick;
            timer.Start();
            customLoaderService.ShowLoader(); // To Start custom loader
        }

        private void Timer_Tick(object sender, EventArgs e)
        {
            customLoaderService.HideLoader(); // To Stop custom loader
        }
    }
}

Step 5. Views of some custom loader.

CompanyLogoSpinner

TurboTransitLoader

MicrosoftLoader

Repository path: https://github.com/OmatrixTech/CustomLoader