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.