WindowsPhone : Making nice custom loader/rotator with related text (C#-XAML)

Introduction:

I already posted this kind of article here.And it is very nice example for making custom loader.However we need to provide some kind of progress/loaders until user data is loaded.And it is good practices user should knowing about his data is still loading from web.In previous article i introduce loader without related text.But now I thought It's better to showing related text with loader,So user can get an idea about for which date he is waiting so far..

Requirements:

1)This sample is targeted on windowsphone 7.1 OS
2)Additionally i am using MessagePrompt for displaying custom loader.So we need to add Coding4fun Toolkit to use "MessagePrompt "

Description:

Step1:
Firstly i made a usercontrol name is "UcCustomLoaderWithText".In this control i rotate the image using "Storyboard" like this 

XAML

<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 placed the image inside canvas and rotated it with based "RotateTransform.Angle" property.So it rotated continuously in clock wise direction
Step2:
In this sample i am using 'MessagePrompt' for displaying Customloader on button click.So we need to add Coding4Fun.Phone.Controls.dll from Coding4fun.

C#

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; 
        } 

Step3:

Creating xaml in 'MainPage'  for making button click event to be displaying custom loader like this.

XAML

<Grid x:Name="LayoutRoot" Height="800" Background="#FF9CE8EC"> 
        <!--ContentPanel - place additional content here--> 
        <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>

ScreenShots:

FeedBack Note:

Please share your thoughts,what you think about this post,Is this post really helpful for you?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)