Loading XAML Control

The loading control is for showing an animation with some content when the user should wait in some tasks of the app.


An example of how we can build the loading control.

<controls:Loading x:Name="LoadingControl" IsLoading="{Binding IsBusy}">
    <ContentControl x:Name="LoadingContentControl"/>
  • Use the LoadingControl to show specialized content.
  • You can also use BorderBrush and BorderThickness to change the LoadingControl.
<controls:Loading x:Name="LoadingControl" IsLoading="{Binding IsBusy}"  >
    <StackPanel Orientation="Horizontal" Padding="12">
        <Grid Margin="0,0,8,0">
            <Image Source="../../Assets/ToolkitLogo.png" Height="50" />
            <ProgressRing IsActive="True" Foreground="Blue" />
        <TextBlock Text="It's ok, we are working on it :)" Foreground="Black" VerticalAlignment="Center" />

Finally that the loading control appears, we must set the IsLoading property to true

LoadingControl.IsLoading = true;

Sample Output

Loading animation


Property Type Description
IsLoaded boolean Gets or sets a value indicating whether the control is in the loading state. Set this to true to show the Loading control, false to hide the control.

Example Code

Loading Sample Page

Default Template

Loading XAML File is the XAML template used in the toolkit for the default styling.

Requirements (Windows 10 Device Family)

Device family Universal, 10.0.14393.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Controls