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"/>
  • Background and Opacity are for the panel who appears and disappears behind our custom control.
  • 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;

Example Image

Loading animation

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.10586.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Controls