Custom Loader in Windows Phone

Subramanyam Raju

12 Comments

Join the conversation! Your thoughts help the community grow.

Suresh M11y ago
with out using back button how to stop the loader in same screen?
- Subramanyam Raju11y ago
  Create global object MessagePrompt ObjMsgPrompt = new MessagePrompt();...When you want to close loader popup..Then collapse it like ObjMsgPrompt .Visibility=Visibility.Collapsed;
Subramanyam Raju11y ago
When user press back button,it will be close.
Suresh M11y ago
hi how to stop this custom loader.?
Vithal Wadje11y ago
thanks SubramanyamRaju B sir,hope in future i will see your more articles
- Subramanyam Raju11y ago
  Sure Thanks :D
Subramanyam Raju11y ago
Thanks Dinesh :)
Dinesh Beniwal11y ago
Good start Subramanyam, Welcome to C# Corner.
Vithal Wadje11y ago
yes,welcome and thanks
- Subramanyam Raju11y ago
  Hi Vithal, I added source code file attachement :)
Subramanyam Raju11y ago
Ok Thanks,In next time i will do it and it is first time for me to write article in c-sharpcorner
Vithal Wadje11y ago
you can upload source code along with this article as wel no need to give your blog link,because some times it gives the problem when we are downloading the code from office PC from blogspot because in office blogger sites are blocked means don't have an access of this

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

<Grid HorizontalAlignment="Left" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<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">
<Canvas.RenderTransform>
<RotateTransform x:Name="SpinnerRotate" Angle="0" />
</Canvas.RenderTransform>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SpinnerRotate"
Storyboard.TargetProperty="(RotateTransform.Angle)"
From="0" To="360" Duration="0:0:01"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Image x:Name="ImageLoader" HorizontalAlignment="Center" Width="50" Height="50" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Source="/Images/imgCustomLoader2.png">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
</Canvas>
<TextBlock Name="TBlckLoaderText" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="55,0,0,0" Grid.Row="0" Text="Loading ..." Foreground="Black" TextWrapping="Wrap"/>
</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

private void BtnLoaderWithText_Click(object sender, RoutedEventArgs e)
{
MessagePrompt ObjMsgPrompt = new MessagePrompt();
ObjMsgPrompt = new MessagePrompt();
ObjMsgPrompt.Body = GetCustomLoaderText("Fetching Data...");//Set custom text on loader
ObjMsgPrompt.Width = 480;
ObjMsgPrompt.Height = 470;
ObjMsgPrompt.Background = new SolidColorBrush(Colors.LightGray);
VerticalAlignment = VerticalAlignment.Top;
ObjMsgPrompt.Margin = new Thickness(0, 300, 0, 0);
ObjMsgPrompt.ActionPopUpButtons.Clear();//clearing default 'tick' symbol from MessagePrompt
ObjMsgPrompt.Show();
}
public UcCustomLoaderWithText GetCustomLoaderText(string MsgBodyText)
{
UcCustomLoaderWithText ObjUcCustomLoaderWithText = new UcCustomLoaderWithText();
ObjUcCustomLoaderWithText = new UcCustomLoaderWithText();
ObjUcCustomLoaderWithText.VerticalAlignment = VerticalAlignment.Center;
ObjUcCustomLoaderWithText.TBlckLoaderText.Text = MsgBodyText;
return ObjUcCustomLoaderWithText;
}

Step 3

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

XAML Code

<Grid x:Name="LayoutRoot" Height="800" Background="#FF9CE8EC">
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical">
<TextBlock Text="Custom Loader:" FontSize="30" Foreground="#FF9D2ADE"/>
<Button Name="BtnLoaderWithText" Margin="0,35,0,0" Content="CustomLoader With Text" Click="BtnLoaderWithText_Click" />
</StackPanel>
</Grid>
</Grid>

Output

After:

The source code is available at CustomLoaderSample.