Version

Adding xamBusyIndicator To Your Page

Topic Overview

Purpose

This topic provides detailed instructions to help you get up and running as soon as possible with the xamBusyIndicator™ control.

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This topic explains the features supported by the control from developer perspective.

This topic provides an overview of the visual elements of the control.

This topic is designed to get you up and running as quickly as possible by describing the basic steps required for adding the xamGrid control to your page using procedural code and XAML.

External Resources

Article Purpose

This MSDN page provides information about the BackgroundWorker class and its usage.

Using xamBusyIndicator with BackgroundWorker to Display the Progress of a Time-Consuming Operation – Example

Introduction

This example explains how to use the xamBusyIndicator control to notify the user that a time-consuming operation is executed and to provide visual output about the actual progress.

In this example, the xamGrid control is used as a data container and the BackgroundWorker class is used to run the data loading operation on a background thread.

Preview

The following screenshot is a preview of the final result.

Adding xamBusyIndicator to Your Page 1.png
Adding xamBusyIndicator to Your Page 2.png

Prerequisites

To complete the procedure, you need the following:

  • Create a Microsoft® WPF™ project and add the following NuGet package references:

    • Infragistics.WPF (the XamBusyIndicator exists in this package)

    • Infragistics.WPF.Controls.Grids.XamGrid

For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.

  • Add the following namespace declaration:

In XAML:

xmlns:ig="http://schemas.infragistics.com/xaml"

In C#:

using Infragistics.Controls.Interactions;

In Visual Basic:

Imports Infragistics.Controls.Interactions
  • Add the xamBusyIndicator control to the page:

In XAML:

<ig:XamBusyIndicator IsBusy="True">
    <!-- xamBusyIndicator content -->
</ig:XamBusyIndicator>

Code Snippets Summary

Code snippets summary chart

The following table lists the code snippets included in this topic.

Example Description

This is the data model classes used in the example.

This ViewModel class implements the data loading functionality using a BackgroundWorker instance and handling its main events – DoWork, ProgressChanged and RunWorkerCompleted.

This XAML code configures the xamBusyIndicator control.

Data Model classes

Description

This is the data model classes used in the example.

Code

In C#:

public class DataModel : ObservableModel
{
    public string ID { get; set; }
    public string Name { get; set; }
}
public class ObservableModel : INotifyPropertyChanged
{
    #region INotifyPropertyChanged
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        OnPropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
    protected void OnPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        PropertyChangedEventHandler handler = this.PropertyChanged;
        if (handler != null)
            handler(sender, e);
    }
    #endregion
}

In Visual Basic:

Public Class DataModel
    Inherits ObservableModel
    Public Property ID() As String
        Get
            Return m_ID
        End Get
        Set(value As String)
            m_ID = value
        End Set
    End Property
    Private m_ID As String
    Public Property Name() As String
        Get
            Return m_Name
        End Get
        Set(value As String)
            m_Name = value
        End Set
    End Property
    Private m_Name As String
End Class
Public Class ObservableModel
    Implements INotifyPropertyChanged
#Region "INotifyPropertyChanged Members"
    Public Event PropertyChanged(ByVal sender As Object, ByVal e As PropertyChangedEventArgs) Implements INotifyPropertyChanged.PropertyChanged
    Public Sub OnPropertyChanged(ByVal propertyName As String)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
    End Sub
#End Region
End Class

ViewModel class

Description

This ViewModel class implements the data loading functionality using a BackgroundWorker instance and handling its main events – DoWork, ProgressChanged and RunWorkerCompleted.

The following public properties are implemented for further usage in the xamBusyIndicator control:

  • IsInProgress

  • CurrentProgress

  • CurrentProgressFormatted

Code

In C#:

public class DataProvider : ObservableModel
{
    private BackgroundWorker _worker;
    private bool _isInProgress;
    public bool IsInProgress
    {
        get
        {
            return this._isInProgress;
        }
        set
        {
            if (this._isInProgress != value)
            {
                this._isInProgress = value;
                this.OnPropertyChanged("IsInProgress");
            }
        }
    }
    private double _currentProgress;
    public double CurrentProgress
    {
        get
        {
            return this._currentProgress;
        }
        set
        {
            if (this._currentProgress != value)
            {
                this._currentProgress = value;
                this.OnPropertyChanged("CurrentProgress");
            }
        }
    }
    private object _currentProgressFormatted;
    public object CurrentProgressFormatted
    {
        get
        {
            return this._currentProgressFormatted;
        }
        set
        {
            if (this._currentProgressFormatted != value)
            {
                this._currentProgressFormatted = value;
                this.OnPropertyChanged("CurrentProgressFormatted");
            }
        }
    }
    private ObservableCollection<DataModel> _data;
    public ObservableCollection<DataModel> Data
    {
        get
        {
            return this._data;
        }
        set
        {
            if (this._data != value)
            {
                this._data = value;
                this.OnPropertyChanged("Data");
            }
        }
    }
    public DataProvider()
    {
        _worker = new BackgroundWorker() { WorkerReportsProgress = true };
        _worker.DoWork += new DoWorkEventHandler(WorkerDoWork);
        _worker.ProgressChanged += new ProgressChangedEventHandler(WorkerProgressChanged);
        _worker.RunWorkerCompleted += new RunWorkerCompletedEventHandler(WorkerCompleted);
        if (!_worker.IsBusy)
        {
            IsInProgress = true;
            _worker.RunWorkerAsync();
        }
    }
    private void WorkerDoWork(object sender, DoWorkEventArgs e)
    {
        const int maxRecords = 1000;
        var orders = new List<DataModel>();
        for (int i = 1; i < maxRecords; i++)
        {
            System.Threading.Thread.Sleep(10);
            orders.Add(new DataModel(){ID = i.ToString(), Name = "Data record " + i});
            _worker.ReportProgress(Convert.ToInt32(((decimal)i / (decimal)maxRecords) * 100));
        }
        e.Result = orders;
    }
    private void WorkerProgressChanged(object sender, ProgressChangedEventArgs e)
    {
        CurrentProgress = (double)e.ProgressPercentage / 100;
        CurrentProgressFormatted = string.Format("Loading {0}%", e.ProgressPercentage);
    }
    private void WorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
    {
        IsInProgress = false;
        this.Data = new ObservableCollection<DataModel>((List<DataModel>)e.Result);
    }
}

In Visual Basic:

Public Class DataProvider
    Inherits ObservableModel
    Private _worker As BackgroundWorker
    Private _isInProgress As Boolean
    Public Property IsInProgress() As Boolean
        Get
            Return Me._isInProgress
        End Get
        Set(value As Boolean)
            If Me._isInProgress <> value Then
                Me._isInProgress = value
                Me.OnPropertyChanged("IsInProgress")
            End If
        End Set
    End Property
    Private _currentProgress As Double
    Public Property CurrentProgress() As Double
        Get
            Return Me._currentProgress
        End Get
        Set(value As Double)
            If Me._currentProgress <> value Then
                Me._currentProgress = value
                Me.OnPropertyChanged("CurrentProgress")
            End If
        End Set
    End Property
    Private _currentProgressFormatted As Object
    Public Property CurrentProgressFormatted() As Object
        Get
            Return Me._currentProgressFormatted
        End Get
        Set(value As Object)
            If Me._currentProgressFormatted IsNot value Then
                Me._currentProgressFormatted = value
                Me.OnPropertyChanged("CurrentProgressFormatted")
            End If
        End Set
    End Property
    Private _data As ObservableCollection(Of DataModel)
    Public Property Data() As ObservableCollection(Of DataModel)
        Get
            Return Me._data
        End Get
        Set(value As ObservableCollection(Of DataModel))
            If Me._data IsNot value Then
                Me._data = value
                Me.OnPropertyChanged("Data")
            End If
        End Set
    End Property
    Public Sub New()
        _worker = New BackgroundWorker() With {
            .WorkerReportsProgress = True
        }
        AddHandler _worker.DoWork, AddressOf WorkerDoWork
        AddHandler _worker.ProgressChanged, AddressOf WorkerProgressChanged
        AddHandler _worker.RunWorkerCompleted, AddressOf WorkerCompleted
        If Not _worker.IsBusy Then
            IsInProgress = True
            _worker.RunWorkerAsync()
        End If
    End Sub
    Private Sub WorkerDoWork(sender As Object, e As DoWorkEventArgs)
        Const maxRecords As Integer = 1000
        Dim orders = New List(Of DataModel)()
        For i As Integer = 1 To maxRecords - 1
            System.Threading.Thread.Sleep(10)
            orders.Add(New DataModel() With {
                .ID = i.ToString(),
                .Name = "Data record " & i
            })
            _worker.ReportProgress(Convert.ToInt32((CDec(i) / CDec(maxRecords)) * 100))
        Next
        e.Result = orders
    End Sub
    Private Sub WorkerProgressChanged(sender As Object, e As ProgressChangedEventArgs)
        CurrentProgress = CDbl(e.ProgressPercentage) / 100
        CurrentProgressFormatted = String.Format("Loading {0}%", e.ProgressPercentage)
    End Sub
    Private Sub WorkerCompleted(sender As Object, e As RunWorkerCompletedEventArgs)
        IsInProgress = False
        Me.Data = New ObservableCollection(Of DataModel)(DirectCast(e.Result, List(Of DataModel)))
    End Sub
End Class

Using xamBusyIndicator in XAML to Display the Progress of a Long-Running Operation

Description

This XAML code configures the xamBusyIndicator control.

The following XamBusyIndicator properties are set:

Property Description

Specifies if the control is displayed.

Specifies the animation type – in this example it is set to ProgressBar.

Specifies whether the animation is indeterminate or determinate. In this example, the xamBusyIndicator IsIndeterminate property is set to True in order to display a determinate progress.

Sets the progress value in the range from 0 to 1.

Specifies the content beneath the busy animation. In this example, the BusyContent property is set to a text representing the progress percent.

Content

This property is set to the xamGrid control in this example.

Code

In XAML:

<Window.DataContext>
    <data:DataProvider />
</Window.DataContext>
<ig:XamBusyIndicator IsBusy="{Binding Path=IsInProgress}"
                     Animation="ProgressBar" IsIndeterminate="False"
                     ProgressValue="{Binding Path=CurrentProgress}"
                     BusyContent="{Binding Path=CurrentProgressFormatted}">
    <ig:XamGrid x:Name="DataGrid" ItemsSource="{Binding Path=Data}" ColumnWidth="*" />
</ig:XamBusyIndicator>

Related Topics

The following topics provide additional information related to this topic.

Topic Purpose

The topics in this section provide information about configuring the control.

The topics in this section provide deep knowledge on how to manage the control programmatically.

This topic provides reference information about the namespaces and classes related to the control.