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 :)

Image loader in windows phone 8 ListBox

Introduction

Recently lot of queries has been asked which is regarding to image loader.In general there is a chance of requirement in windows phone  is need to set image loader when image getting from xaml feed or web service responce.Beacuse it will take some time to get our image from the web service and loaded completly.And so from the user point of view we need to put some progress bar or loader for image until it gets loaded completly.However finally i had come up with my best solution with custom progress overrellay.

Source File at :ImageLoderwp8c#

Building the Sample

In this sample i had added references for following

1)Reference to Coding4Fun.Phone.Controls.dll for  progress overellay  control 

2)We need add following custom user control progress overellay to our project. 

1.Creating custom user control for spinner in windows phone 

              (or)

 Creating custom loader in windows phone 8 xaml

XAML

<UserControl x:Class="WP7SoapRiaService.Spinner" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    FontFamily="{StaticResource PhoneFontFamilyNormal}" 
    FontSize="{StaticResource PhoneFontSizeNormal}" 
    Foreground="{StaticResource PhoneForegroundBrush}" 
    d:DesignHeight="480" d:DesignWidth="480"> 
 
    <Canvas RenderTransformOrigin="0.5,0.5" Margin="0,0,0,0" Width="55" Height="55" HorizontalAlignment="Center" 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> 
        <Ellipse Width="10" Height="10" Canvas.Left="10" Canvas.Top="3"  
            Stretch="Fill" Fill="Black"/> 
        <Ellipse Width="10" Height="10" Canvas.Left="1" Canvas.Top="13"  
            Stretch="Fill" Fill="Black"/> 
        <Ellipse Width="10" Height="10" Canvas.Top="26"  
            Stretch="Fill" Fill="Black"/> 
        <Ellipse Width="10" Height="10" Canvas.Left="6" Canvas.Top="37"  
            Stretch="Fill" Fill="Black"/> 
        <Ellipse Width="10" Height="10" Canvas.Left="17" Canvas.Top="44"  
            Stretch="Fill" Fill="Black"/> 
        <Ellipse Width="10" Height="10" Canvas.Left="29" Canvas.Top="44"  
            Stretch="Fill" Fill="#FFF0EAEA"/> 
        <Ellipse Width="10" Height="10" Canvas.Left="40" Canvas.Top="36"  
            Stretch="Fill" Fill="Black"/> 
        <Ellipse Width="10" Height="10" Canvas.Left="45" Canvas.Top="24"  
            Stretch="Fill" Fill="Black"/> 
        <Ellipse Width="10" Height="10" Canvas.Left="42" Canvas.Top="12"  
            Stretch="Fill" Fill="#FFF0EAEA"/> 
        <Ellipse Width="10" Height="10" Canvas.Left="35" Canvas.Top="3"  
            Stretch="Fill" Fill="Black"/> 
        <Ellipse Width="10" Height="10" Canvas.Left="23"  
            Stretch="Fill" Fill="Black" Canvas.Top="-1"/> 
    </Canvas> 
</UserControl> 

Description

Here to meet the requirement i was taken listbox with one image&progress over rellay control.I had putted same margin for image &progressrelay in data template of listbox control.And first i had placed progress bar and then image control,because progress bar will be visible until image will get imagepath completely.To do so when image has image path fully then it will overlaps the progressbar that's the tricy of my sample.

XAML

<phone:PhoneApplicationPage  
    x:Class="ImageLoader.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" 
    FontFamily="{StaticResource PhoneFontFamilyNormal}" 
    FontSize="{StaticResource PhoneFontSizeNormal}" 
    Foreground="{StaticResource PhoneForegroundBrush}" 
    SupportedOrientations="Portrait" Orientation="Portrait" 
    shell:SystemTray.IsVisible="True" xmlns:toolkit="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls" xmlns:spin="clr-namespace:WP7SoapRiaService"> 
 
    <!--LayoutRoot is the root grid where all page content is placed--> 
    <Grid x:Name="LayoutRoot" Background="Transparent"> 
        <Grid.RowDefinitions> 
            <RowDefinition Height="Auto"/> 
            <RowDefinition Height="*"/> 
        </Grid.RowDefinitions> 
 
        <!--TitlePanel contains the name of the application and page title--> 
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
            <TextBlock x:Name="ApplicationTitle" Text="Image Loader" Style="{StaticResource PhoneTextNormalStyle}"/> 
            <TextBlock x:Name="PageTitle" Text="ListBox" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
        </StackPanel> 
 
        <!--ContentPanel - place additional content here--> 
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
             
            <!--<Border BorderBrush="White"  BorderThickness="1" HorizontalAlignment="Left" Height="196" Margin="124,150,0,0" VerticalAlignment="Top" Width="222">--> 
                <ListBox Name="Listimg" > 
                    <ListBox.ItemTemplate> 
                        <DataTemplate> 
                            <Grid  Width="150" Height="auto" Background="White"> 
                            <Grid.RowDefinitions> 
                                <RowDefinition Height="Auto"/> 
                                <RowDefinition Height="Auto"/> 
                                <RowDefinition Height="10"/> 
                            </Grid.RowDefinitions> 
                            <toolkit:ProgressOverlay Grid.Row="0" Height="100"  Background="White"   x:Name="PrgrsOverLay" > 
                                    <toolkit:ProgressOverlay.Content> 
                                        <spin:Spinner Visibility="Visible"></spin:Spinner> 
                                    </toolkit:ProgressOverlay.Content> 
 
                                </toolkit:ProgressOverlay> 
                            <Image Grid.Row="0" Height="100"  Stretch="Fill" Source="{Binding Imageurl}"/> 
                            </Grid> 
                        </DataTemplate> 
                    </ListBox.ItemTemplate> 
                 
                </ListBox> 
            <!--</Border>--> 
            
        </Grid> 
    </Grid> 
  
</phone:PhoneApplicationPage>

                                             Fig:Image loader             Fig:Image loaded completed

C#

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 
using Microsoft.Phone.Controls; 
 
namespace ImageLoader 
{ 
    public partial class MainPage : PhoneApplicationPage 
    { 
        // Constructor 
        public MainPage() 
        { 
            InitializeComponent(); 
            ImageFile IMF = new ImageFile(); 
            List<ImageFile> lst = new List<ImageFile>(); 
            lst.Add(new ImageFile() { Imageurl = "http://kareninthekitchen.files.wordpress.com/2012/04/strawberry-shortcake10.jpg?r=" + System.DateTime.Now }); 
            lst.Add(new ImageFile() { Imageurl = "http://kareninthekitchen.files.wordpress.com/2012/04/strawberry-shortcake10.jpg?r=" + System.DateTime.Now }); 
            lst.Add(new ImageFile() { Imageurl = "http://upload.wikimedia.org/wikipedia/en/1/14/Album_Nothing_Was_The_Same_cover.jpg?r=" + System.DateTime.Now }); 
            lst.Add(new ImageFile() { Imageurl = "http://upload.wikimedia.org/wikipedia/en/1/14/Album_Nothing_Was_The_Same_cover.jpg?r=" + System.DateTime.Now }); 
            lst.Add(new ImageFile() { Imageurl = "http://kareninthekitchen.files.wordpress.com/2012/04/strawberry-shortcake10.jpg?r=" + System.DateTime.Now }); 
           lst.Add(new ImageFile() { Imageurl = "http://kareninthekitchen.files.wordpress.com/2012/04/strawberry-shortcake10.jpg?r=" + System.DateTime.Now }); 
           lst.Add(new ImageFile() { Imageurl = "http://kareninthekitchen.files.wordpress.com/2012/04/strawberry-shortcake10.jpg?r=" + System.DateTime.Now }); 
            Listimg.ItemsSource = lst; //Binding listbox with images in windowsphone 8
            
        } 
    } 
    public class ImageFile 
    { 
        public string Imageurl 
        { 
            get; 
            set; 
        } 
    } 
}

Windows Phone tutorials for beginners key points


This section is included for only windows phone beginners.However this article can covers following questions.Off course these key words is more helpful for getting more best results about this topic in search engines like google/bing/yahoo.. 







1.ListBox image loader in windows phone 8 xaml,c#





2. Progress bar for image loading in windows phone 8



3. Image loader in windows phone 8




4.How to bind listbox images in windows phone 8 c# 




5.User Control in windows phone 8 c# ,xaml




6. How to create custom loader  from image in windows phone 8 c# ,xaml



Have a nice day by Subramanyam Raju