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".
DescriptionStep 1First 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...");
- 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();
- 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.