Simple Progress Bar for ASP.NET ...

In this article you will know how to create a Simple Progress Bar,In first step you will  Open Visual Studio 2008 and Select ‘Silverlight’ , Set the Width and Height of the user control to 400 & 300 respectively.

You will now create an outer Rectangle and an inner Rectangle, that is filled using a LinearGradientBrush, here is the code below:

<UserControl x:Class="ProgressBarSilverlight.Page"
    xmlns="http://www.google.com.eg/"
    xmlns:x="http://www.google.com.eg/"
    Width="400" Height="300">
    <Canvas Canvas.Top="100">
        <Rectangle x:Name="rectOuter"
            Canvas.Top ="5"
            Canvas.Left="10" Height="15"
            Width="100"
            StrokeThickness="1" Stroke="Black" />
      
        <Rectangle
            Name="rectInner"
            Canvas.Left="10" Canvas.Top="5"
            Height="15"
            >
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="Blue" Offset="0.1"/>
                    <GradientStop Color="White" Offset="0.4"/>
                    <GradientStop Color="Blue" Offset="0.6"/>
                    <GradientStop Color="White" Offset="0.8"/>
                    <GradientStop Color="Blue" Offset="1.0"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>    
   
      
        <TextBlock
            x:Name="tbProgress"
            Canvas.Top ="5" Canvas.Left="130"
            Text="0% Completed" FontSize="11" />
      
        <Button x:Name="btnDownld" Canvas.Top="30" Canvas.Left="30"
                 Click="btnDownld_Click" Content="Download"/>
    </Canvas>
 
</UserControl>

When the user clicks on the ‘Download’ button, the inner Rectangle (rectInner) starts with a width of 0 and continues increasing till its width reaches 100%

- Here you will create an instance of the WebClient for the requesting the .zip file,and add event handlers for ‘OpenReadCompleted’ and ‘DownloadProgressChanged’ events.

C#
using System.Windows.Resources;
using System.Windows.Media.Imaging;
using System.IO;
VB.NET
Imports System.Windows.Resources
Imports System.Windows.Media.Imaging
Imports System.IO
The code for the using the events of the WebClient class are as follows:
C#
public partial class Page : UserControl
{
 
public Page()
{
    InitializeComponent();
}
 
private void btnDownld_Click(object sender, RoutedEventArgs e)
{
    WebClient wClient = new WebClient();
    wClient.OpenReadCompleted += new OpenReadCompletedEventHandler(wClient_OpenReadCompleted);
    wClient.DownloadProgressChanged += new DownloadProgressChangedEventHandler(wClient_DownloadProgressChanged);
    wClient.OpenReadAsync(new Uri("image.zip",UriKind.Relative));
}
 
void wClient_DownloadProgressChanged(object sender, DownloadProgressChangedEventArgs e)
{
    // gets the downloaded percentage of the async operation
    tbProgress.Text = e.ProgressPercentage.ToString() + "% completed";
    rectInner.Width = (double)e.ProgressPercentage;
}
 
void wClient_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
    if (e.Error == null)
    {
        try
        {
            Stream streamZip = e.Result;
            StreamResourceInfo sri = new StreamResourceInfo(streamZip, null);
            // Assuming abc.jpg is an image inside the image.zip
            StreamResourceInfo imageSourceInfo =
                Application.GetResourceStream(sri, new Uri("abc.jpg", UriKind.Relative));
 
            // Converting the stream to Image
            BitmapImage bi = new BitmapImage();
            Image img = new Image();
            img.Source = bi;
            // Do something with this image
        }
        catch (Exception ex)
        {
 
        }
    }          
}
}
 
VB.NET
Public Partial Class Page
      Inherits UserControl
 
Public Sub New()
      InitializeComponent()
End Sub
 
Private Sub btnDownld_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
      Dim wClient As WebClient = New WebClient()
      AddHandler wClient.OpenReadCompleted, AddressOf wClient_OpenReadCompleted
      AddHandler wClient.DownloadProgressChanged, AddressOf wClient_DownloadProgressChanged
      wClient.OpenReadAsync(New Uri("image.zip",UriKind.Relative))
End Sub
 
Private Sub wClient_DownloadProgressChanged(ByVal sender As Object, ByVal e As DownloadProgressChangedEventArgs)
      gets the downloaded percentage of the async operation
      tbProgress.Text = e.ProgressPercentage.ToString() & "% completed"
      rectInner.Width = CDbl(e.ProgressPercentage)
End Sub
 
Private Sub wClient_OpenReadCompleted(ByVal sender As Object, ByVal e As OpenReadCompletedEventArgs)
      If e.Error Is Nothing Then
            Try
                  Dim streamZip As Stream = e.Result
                  Dim sri As StreamResourceInfo = New StreamResourceInfo(streamZip, Nothing)
            // Assuming abc.jpg is an image inside the image.zip
                  Dim imageSourceInfo As StreamResourceInfo = Application.GetResourceStream(sri, New Uri("abc.jpg", UriKind.Relative))
 
                  Converting the stream to Image
                  Dim bi As BitmapImage = New BitmapImage()
                  Dim img As Image = New Image()
                  img.Source = bi
                  Do something with this image
            Catch ex As Exception
 
            End Try
      End If
End Sub

In the ‘OpenReadCompleted’, we process the initial stream and use the Application.GetResourceStream to get a specific part (abc.jpg) from a location in the zip file, like this:

 Original Source: