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.

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