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

Download Image file using WebClient with progress bar status in windowsphone c#.

Introduction

Recently lot of queries has been asked regarding to large image file downloading with progress bar from webservice.In general there is a chance of requirement in windows phone  is need to set progressbar status 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 it make sense to showing progress bar status or loader for image until it gets loaded completly.However finally i had come up with my best solution with progress bar.

Building the Sample

No need of any other external dll's or library.And we just need one progressbar control for showing status of downloading file.

Source File at :WebClient_Progressbar_sample

XAML

<phone:PhoneApplicationPage  
    x:Class="HTTPRequests.GetStringPage" 
    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" 
    FontFamily="{StaticResource PhoneFontFamilyNormal}" 
    FontSize="{StaticResource PhoneFontSizeNormal}" 
    Foreground="{StaticResource PhoneForegroundBrush}" 
    SupportedOrientations="Portrait" Orientation="Portrait" 
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480" 
    shell:SystemTray.IsVisible="True"> 
 
    <!--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="10,10,2,35"> 
            <TextBlock x:Name="ApplicationTitle" Text="HTTP REQUESTS SAMPLE" Style="{StaticResource PhoneTextNormalStyle}"/> 
            <ProgressBar SmallChange="0.2" Minimum="0" Maximum="100" Name="test" Height="10"/> 
            <TextBlock x:Name="PageTitle" Text="Image download" Margin="9,-7,0,0"  d:IsHidden="True"/> 
            <Button Name="cancelbtn" Content="Cancel" Click="CancelButton_Click_1"/> 
        </StackPanel> 
 
        <!--ContentPanel - place additional content here--> 
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
            <StackPanel> 
                <TextBlock TextWrapping="Wrap" Foreground="{StaticResource PhoneAccentBrush}" FontSize="{StaticResource PhoneFontSizeSmall}" Text="Download status"/> 
                <TextBlock x:Name="DownloadStatusText" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}"/> 
                <TextBlock TextWrapping="Wrap" Text="Download result" Foreground="{StaticResource PhoneAccentBrush}" FontSize="{StaticResource PhoneFontSizeSmall}"/> 
                <TextBlock x:Name="DownloadResultText" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}"/> 
                <Image x:Name="DownloadResultImage" Stretch="UniformToFill"/> 
            </StackPanel></Grid> 
    </Grid> 
  
    <!--Sample code showing usage of ApplicationBar--> 
    <!--<phone:PhoneApplicationPage.ApplicationBar> 
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> 
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/> 
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/> 
            <shell:ApplicationBar.MenuItems> 
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/> 
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/> 
            </shell:ApplicationBar.MenuItems> 
        </shell:ApplicationBar> 
    </phone:PhoneApplicationPage.ApplicationBar>--> 
 
</phone:PhoneApplicationPage> 

 

Description

Here to meet the requirement i was taken advantage of  "WebCleint.DownloadProgressChange" event.This event is raised each time an asynchronous download makes progress. This event is raised when downloads are started using any of the following methods.And Occurs when an asynchronous download operation successfully transfers some or all of the data.you may find more info about webClient.DownloadProgressChanged at
 WebClient.DownloadProgressChanged

Note:

   1)For samll size we can't observer properly the status of progress bar.Because it takes very little bit time.

   2)In above xaml,i was represents the cancel button for abort the web client request.

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; 
using System.Windows.Media.Imaging; 
using System.IO; 
 
namespace HTTPRequests 
{ 
    public partial class GetStringPage : PhoneApplicationPage 
    { 
        private WebClient webClient; 
        private string downloadUrl = "https://s3-eu-west-1.amazonaws.com/s3.namy.net/chat/14/1_5278dad6e5781.JPG?r=" + System.DateTime.Now; 
 
        public GetStringPage() 
        { 
            InitializeComponent(); 
        } 
 
        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) 
        { 
            webClient = new WebClient(); 
            webClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(webClient_DownloadStringCompleted); 
            webClient.DownloadProgressChanged += new DownloadProgressChangedEventHandler(webClient_DownloadProgressChanged); 
            webClient.DownloadStringAsync(new Uri(downloadUrl)); 
 
            DownloadStatusText.Text = "Downloading source from " + downloadUrl; 
            DownloadResultText.Text = string.Empty; 
 
            base.OnNavigatedTo(e); 
        } 
 
        void webClient_DownloadProgressChanged(object sender, DownloadProgressChangedEventArgs e) 
        { 
            test.Value = e.BytesReceived; 
            //test.Value = e.ProgressPercentage; 
            test.Maximum = e.TotalBytesToReceive; 
            DownloadResultText.Text = "Downloaded " + e.BytesReceived + "/" + e.TotalBytesToReceive + "bytes, " + e.ProgressPercentage + "% completed."; 
        } 
 
        void webClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e) 
        { 
            try 
            { 
                if (e.Cancelled == true) 
                { 
                    DownloadStatusText.Text = "Download cancelled."; 
                    return; 
                } 
 
                if (e.Error != null) 
                { 
                    DownloadStatusText.Text = "Download error."; 
                    DownloadResultText.Text = e.Error.ToString(); 
                    return; 
                } 
 
                DownloadStatusText.Text = "Download completed."; 
                DownloadResultText.Text = e.Result; 
                BitmapImage image = new BitmapImage(new Uri("" + downloadUrl)); 
                DownloadResultImage.Source = image; 
                DownloadStatusText.Text = "Download completed."; 
                DownloadResultText.Visibility = Visibility.Collapsed; 
                cancelbtn.Visibility = Visibility.Collapsed; 
            } 
            catch 
            { 
            } 
 
        } 
 
        private void CancelButton_Click_1(object sender, RoutedEventArgs e) 
        { 
            webClient.CancelAsync(); 
        } 
 
    } 
     
}

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 are more helpful for getting more best results about this topic in search engines like google/bing/yahoo.. 







1. How to display progressbar in windows phone 8 for image sourced from web


2. Download  large file  with progress bar status in windows phone 8 c#



3. How to abort webclient request in windows phone 8 c#




3. How to cancel or abort the webclient async request in windows phone 8 c#



Have a nice day by Subramanyam Raju