We are going to look at creating a placeholder loading control that looks like what facebook is using in its application.
Here is a static version of the loading control:
Here is what we could do if we add some animation using composition.
It is super important to remember that the loading animation should not hide or distract the user from using y our application, the loading animation should just be there to help your user understand that they must wait a bit for the loading to end.
For this example we will be build 2 different UI loaders to show that data is being loaded, here is what the placeholders will have to show that they are loading:
Here is an example of what we want to do:
You have two options either we have a control with a shimmer over to simulate that something is loading or we just have a static rectangle (or grid) with a background color. If you only want to use the backgroudn color you can look at the RectangleNoShimmerControl.xaml file, if you do want the shimmer keep on reading =).
First we are going to create a RectangleControl UserControl that will hold a ContentControl and a StackPanel with a FontIcon.
The ContentControl with its LinearGradientBrush is what will allow you have the gradient effect when we move the element, in the samlpe you can change:
<GradientStop Offset="0.5" Color="#dcdcdc" />
<GradientStop Offset="0.5" Color="Red" />
which will give you this for example:
Next we will need to add the animation on the content control, we need something to move on the X axis, so using a DoubleAnimationUsingKeyFrames and targeting CompositeTransform.TranslateX we will be able to do this.
<Storyboard> <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True"
RepeatBehavior="Forever"Storyboard.TargetName="contentControl" Storyboard.TargetProperty="(Control.Foreground).(Brush.RelativeTransform).(CompositeTransform.TranslateX)"> <EasingDoubleKeyFrame KeyTime="0" Value="-1" /> <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1" /> </DoubleAnimationUsingKeyFrames> </Storyboard>
We are going to nest our Storyboard inside a <Grid.Triggers> => <EventTrigger RoutedEvent="Grid.Loaded"> => <EventTrigger.Actions> which will allow us to start the animation when the Grid is loaded.
Here is the full XAML code for the page:
Now that we have our Facebook like shimmer animation we will create our loading states using that UserControl. Now we are going to create another UserControl to resemble something like this:
To create this in XAML I will use a Grid which will use multiple RowDefinitions , which gives us this:
You can find my code sample here.