Custom Loader in Windows Phone

This article explains the basic steps to implement a Costum Loader in Windows Phone apps.

Introduction

I have already posted this kind of article here and it is a very nice example of making a custom loader. However we need to provide some kind of progress/loaders until the user data is loaded. It is good practices for the user to be informed of his data as it is loaded from the web. In a previous article I introduce the loader without related text. But now I thought It's better to show related text with the loader, so the user can get an idea of the data he is waiting on.

Requirements

  • This sample is targeted to the Windows Phone 7.1 OS
  • Additionally I am using a MessagePrompt to display a custom loader. So we need to add the Coding4fun Toolkit to use the "MessagePrompt".
Description

Step 1

First I made a usercontrol named "UcCustomLoaderWithText". In this control I rotate the image using "Storyboard" like this: 

XAML Code
  1. <Grid HorizontalAlignment="Left" Background="Transparent">   
  2.         <Grid.RowDefinitions>   
  3.             <RowDefinition Height="Auto"/>   
  4.         </Grid.RowDefinitions>   
  5.         <Canvas Grid.Row="0" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,0" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Center" d:LayoutOverrides="Margin">   
  6.             <Canvas.RenderTransform>   
  7.                 <RotateTransform x:Name="SpinnerRotate" Angle="0" />   
  8.             </Canvas.RenderTransform>   
  9.             <Canvas.Triggers>   
  10.                 <EventTrigger RoutedEvent="Canvas.Loaded">   
  11.                     <BeginStoryboard>   
  12.                         <Storyboard>   
  13.                             <DoubleAnimation Storyboard.TargetName="SpinnerRotate"    
  14.                             Storyboard.TargetProperty="(RotateTransform.Angle)"    
  15.                             From="0" To="360" Duration="0:0:01"    
  16.                             RepeatBehavior="Forever" />   
  17.                         </Storyboard>   
  18.                     </BeginStoryboard>   
  19.                 </EventTrigger>   
  20.             </Canvas.Triggers>   
  21.             <Image x:Name="ImageLoader" HorizontalAlignment="Center" Width="50" Height="50" VerticalAlignment="Center"  RenderTransformOrigin="0.5,0.5" Source="/Images/imgCustomLoader2.png">   
  22.                 <Image.RenderTransform>   
  23.                     <CompositeTransform/>   
  24.                 </Image.RenderTransform>   
  25.             </Image>   
  26.         </Canvas>   
  27.         <TextBlock Name="TBlckLoaderText" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="55,0,0,0" Grid.Row="0" Text="Loading ..." Foreground="Black" TextWrapping="Wrap"/>   
  28.     </Grid> 

Here I have placed the image inside the canvas and rotated it with the "RotateTransform.Angle" property. So it is rotated continuously in a clockwise direction.

Step 2

In this sample I am using a "MessagePrompt" to display the Customloader on a button click. So we need to add the Coding4Fun.Phone.Controls.dll from Coding4fun.

C# Code

  1. private void BtnLoaderWithText_Click(object sender, RoutedEventArgs e)   
  2.         {   
  3.             MessagePrompt ObjMsgPrompt = new MessagePrompt();   
  4.             ObjMsgPrompt = new MessagePrompt();   
  5.             ObjMsgPrompt.Body = GetCustomLoaderText("Fetching Data...");//Set custom text on loader   
  6.             ObjMsgPrompt.Width = 480;   
  7.             ObjMsgPrompt.Height = 470;   
  8.             ObjMsgPrompt.Background = new SolidColorBrush(Colors.LightGray);   
  9.             VerticalAlignment = VerticalAlignment.Top;   
  10.             ObjMsgPrompt.Margin = new Thickness(0, 300, 0, 0);   
  11.             ObjMsgPrompt.ActionPopUpButtons.Clear();//clearing default 'tick' symbol from MessagePrompt   
  12.             ObjMsgPrompt.Show();   
  13.         }   
  14.         public UcCustomLoaderWithText GetCustomLoaderText(string MsgBodyText)   
  15.         {   
  16.             UcCustomLoaderWithText ObjUcCustomLoaderWithText = new UcCustomLoaderWithText();   
  17.             ObjUcCustomLoaderWithText = new UcCustomLoaderWithText();   
  18.             ObjUcCustomLoaderWithText.VerticalAlignment = VerticalAlignment.Center;   
  19.             ObjUcCustomLoaderWithText.TBlckLoaderText.Text = MsgBodyText;   
  20.             return ObjUcCustomLoaderWithText;   
  21.         }  

Step 3

Creating the XAML in the "MainPage" to make the button click event to display the custom loader like this.

XAML Code

  1. <Grid x:Name="LayoutRoot" Height="800" Background="#FF9CE8EC">   
  2.         <!--ContentPanel - place additional content here-->   
  3.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">   
  4.             <Grid.RowDefinitions>   
  5.                 <RowDefinition Height="Auto"/>   
  6.             </Grid.RowDefinitions>   
  7.             <StackPanel Orientation="Vertical">   
  8.                 <TextBlock Text="Custom Loader:" FontSize="30" Foreground="#FF9D2ADE"/>   
  9.                 <Button Name="BtnLoaderWithText" Margin="0,35,0,0" Content="CustomLoader With Text" Click="BtnLoaderWithText_Click" />                  
  10.             </StackPanel>   
  11.         </Grid>   
  12.     </Grid> 

Output

First

After:

After

The source code is available at CustomLoaderSample.