Google Download Image file using WebClient with progress bar status in windowsphone c#. | SubramanyamRaju Xamarin & Windows App Dev Tutorials

Tuesday 26 November 2013

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.DownloadProgressChangeevent.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 

6 comments:

  1. Nice work.It helps me a lot.

    ReplyDelete
  2. will it download the files even if the app is closed i.e background downloading .if no please it will great if you make tutorial on that ,by the way your tutorials are great thanks for posting and keep posting.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Where the file is getting downloaded? I mean what the download location?

    ReplyDelete
  5. Where the file is getting downloaded? I mean what the download location?

    ReplyDelete

Search Engine Submission - AddMe