Wait Indicator

• Jun 27, 2023
• 4 minutes to read

Overview

The Wait Indicator is a popup panel used to indicate the progress of operations during your application run.

Some DevExpress WPF Controls (the GridControl,LoadingDecorator, etc.) use this panel to provide visual feedback during data/content/etc. loading.

Note

The Wait Indicator works within the main application’s UI thread. The UI freezes may affect the Wait Indicator animation.

To display an indicator that works in a separate UI thread, use the Splash Screen Manager.

Customization Capabilities

The Wait Indicator‘s appearance depends on the applied theme. Here are examples of a Wait Indicator shown in different themes.

The default layout of the Wait Indicator consists of the animated image and the label.

You can customize the Wait Indicator‘s layout using the ContentTemplate property. The code snippet below illustrates how to set the custom Wait Indicator content.

XAML

<dx:WaitIndicator Content="Loading...">
    <dx:WaitIndicator.ContentTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <TextBlock Text="Please Wait" FontSize="20"/>
                <TextBlock Text="{Binding}"/>
            </StackPanel>
        </DataTemplate>
    </dx:WaitIndicator.ContentTemplate>
</dx:WaitIndicator>

The image below illustrates the result.

Displaying Wait Indicator

To use the WaitIndicator control in your application, add it to you form and control its visibility using the DeferedVisibility property.

XAML

<Grid>
        <UserControl Background="LightGray"/>
        <dx:WaitIndicator DeferedVisibility="True" Content="Loading...">
            <dx:WaitIndicator.ContentTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical">
                        <TextBlock Text="Please Wait" FontSize="20"/>
                        <TextBlock Text="{Binding}"/>
                    </StackPanel>
                </DataTemplate>
            </dx:WaitIndicator.ContentTemplate>
        </dx:WaitIndicator>
    </Grid>

Example

To control the WaitIndicator control’s visibility, use the DeferedVisibility property. As for changing WaitIndicator’s properties, it is a common WPF control and you can change its properties in code behind or using bindings. You can read more about the bindings here:  Data Binding(WPF).

View Example

MainWindow.xaml

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:dxSampleGrid"
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
    xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
    xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
     xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon"
    xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys"
    xmlns:dxet="http://schemas.devexpress.com/winfx/2008/xaml/editors/themekeys"
      xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
    x:Class="dxSampleGrid.MainWindow"
    Title="DXApplication" Height="700" Width="1100"
    SnapsToDevicePixels="True" UseLayoutRounding="True">
    <Window.Resources>

    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="9*"/>
            <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <UserControl Background="LightGray"/>
            <dx:WaitIndicator DeferedVisibility="{Binding IsWaitIndicatorVisible}" Content="{Binding WaitIndicatorText}">
                <dx:WaitIndicator.ContentTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="Please Wait" FontSize="20"/>
                            <TextBlock Text="{Binding}"/>
                        </StackPanel>
                    </DataTemplate>
                </dx:WaitIndicator.ContentTemplate>
            </dx:WaitIndicator>

    </Grid>
        <Grid Grid.Row="3">
                <StackPanel>
            <Button Content="Start/stop indicator" Click="Button_Click" />
                <Button Content="Change text" Click="Button_Click_1"/>
            </StackPanel>

        </Grid>

    </Grid>

</Window>

Application.xaml

<Application x:Class="dxSampleGrid.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

MainWindow.xaml.vb

Imports DevExpress.Xpf.Grid

Imports System
Imports System.Windows

Namespace dxSampleGrid
    Partial Public Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
            vm = New MyViewModel()
            DataContext = vm
        End Sub
        Private vm As MyViewModel

        Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            vm.IsWaitIndicatorVisible = Not vm.IsWaitIndicatorVisible
        End Sub

        Private Sub Button_Click_1(ByVal sender As Object, ByVal e As RoutedEventArgs)
            vm.WaitIndicatorText = "Initializing... " & Date.Now.Millisecond
        End Sub
    End Class

End Namespace

MyViewModel.vb

Imports System
Imports System.ComponentModel

Namespace dxSampleGrid
    Partial Public Class MyViewModel
        Implements INotifyPropertyChanged

        Public Sub New()
            WaitIndicatorText = "Loading..."
        End Sub

        Private _isWaitIndicatorVisible As Boolean
        Private _waitIndicatorText As String

        Public Property IsWaitIndicatorVisible() As Boolean
            Get
                Return _isWaitIndicatorVisible
            End Get

            Set(ByVal value As Boolean)
                _isWaitIndicatorVisible = value
                RaisePropertyChanged("IsWaitIndicatorVisible")
            End Set
        End Property

        Public Property WaitIndicatorText() As String
            Get
                Return _waitIndicatorText
            End Get

            Set(ByVal value As String)
                _waitIndicatorText = value
                RaisePropertyChanged("WaitIndicatorText")
            End Set
        End Property

        Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
        Private Sub RaisePropertyChanged(ByVal propertyName As String)
            RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
        End Sub
    End Class
End Namespace

Application.xaml.vb

Imports System
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Linq
Imports System.Windows

Namespace dxSampleGrid
    ''' <summary>
    ''' Interaction logic for App.xaml
    ''' </summary>
    Partial Public Class App
        Inherits Application

    End Class
End Namespace

MainWindow.xaml.cs

using DevExpress.Xpf.Grid;

using System;
using System.Windows;

namespace dxSampleGrid {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
            vm = new MyViewModel();
            DataContext = vm;
        }
        MyViewModel vm;

        private void Button_Click(object sender, RoutedEventArgs e) {
            vm.IsWaitIndicatorVisible = !vm.IsWaitIndicatorVisible;
        }

        private void Button_Click_1(object sender, RoutedEventArgs e) {
            vm.WaitIndicatorText = "Initializing... " + DateTime.Now.Millisecond;
        }
    }
}

MyViewModel.cs

using System;
using System.ComponentModel;

namespace dxSampleGrid {
    public partial class MyViewModel : INotifyPropertyChanged{

        public MyViewModel() {
            WaitIndicatorText = "Loading...";
        }

        bool _isWaitIndicatorVisible;
        string _waitIndicatorText;

        public bool IsWaitIndicatorVisible {
            get {
                return _isWaitIndicatorVisible;
            }

            set {
                _isWaitIndicatorVisible = value;
                RaisePropertyChanged("IsWaitIndicatorVisible");
            }
        }

        public string WaitIndicatorText {
            get {
                return _waitIndicatorText;
            }

            set {
                _waitIndicatorText = value;
                RaisePropertyChanged("WaitIndicatorText");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged(String propertyName) {
            if (PropertyChanged != null) {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    } 
}