This topic provides detailed instructions to help you get up and running as soon as possible with the xamBusyIndicator™ control.
The following topics are prerequisites to understanding this topic:
This topic contains the following sections:
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.
The following screenshot is a preview of the final result.
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>
The following table lists the code snippets included in this topic.
This is the data model classes used in the example.
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
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
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
This XAML code configures the xamBusyIndicator control.
The following XamBusyIndicator properties are set:
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>
The following topics provide additional information related to this topic.