December 19, 2010

C# - Picture Box and Progressbar Control

1. Introduction

In this article we will explore the "PictureBox" and "Progressbar" controls with an example walk through. Picturebox control is mainly used to an image. The image type can be bmp, jpg, gif, png etc. Progressbar control is used to show the progress of long running process visually.

I will walkthrough an example and explain the control properties and methods and events when it is used in the application.

2. Example - Preview

In the above screen shot, the image is displayed on the picturebox control when the form is displayed. Below you will see a set of "linklable" controls, which changes the "SizeMode" property of the picturebox control when a click event is produced on it. In the right side Group, we will try to load the image to the picturebox control at runtime both from your local machine and from the remote machine through Internet access.

The radio button shows how the image should be loaded. "Asynchronous" means a thread takes care of loading an image from the Internet or even local machine. If the image in the Internet is of huge size and load process does not block the user interface. You can still move the window for a test when the Asynchronous option is selected.

The progressbar is used in the above application to show the progress of loading the image and label (Not visible above) next to the progressbar shows the percentage of loading completed. OK. We will start this application.

3. Designing the Form

1) Open the attached application for your reference. I will call this as "reference application".
2) Create a new Visual C# windows application using visual studio 2005
3) Place all the required control discussed in the previous section.
4) First set the properties for the Picturebox control. You can do that by checking the property for the picturebox control on your solution opened in the first step. Check for the Bold Font property values in the reference application and those are all the properties changed by me.

Let me explain some of the properties for the Picturebox before you move to the next step.
If you click the Image property … button a dialog shown below is displayed.

Select the Resource file option and click the import button. Now you can pick any image on your system that you want to add as resource. When the form is displayed for the first time, we are going to use this image added as a resource. Once you selected the image click ok to this dialog.

In the explorer window you can see the picture loaded as a resource. This is shown below:

Now we mark this resource as "Embedded Resource". Once we make a resource as embedded resources, on the client deployment machine, we no need to copy the image file to a physical location. But, note that the file should exist on your build and packaging machine. Continue from the Step 4 now to mark this resource as embedded to the executable.

5) Right click the loaded resource (In my case it is Sunset.jpg) and select properties.
6) Select Embedded Resource for the "Build Action" property.
7) Nothing special with the LinkLabels. You can easily set it using the reference application.
8) Same holds true for Groupbox, Radiobutton and couple of button controls.
9) For Progressbar I accepted all the default values.
10) Do not forget to add a label control next to the progressbar, as it is not shown in the Preview section.

We completed our form design. Cross check the control names from the reference application, before we move to the coding.

4. Start the coding

1) For all the linklabel control provide handler for the "Linkclicked event". Inside the handler we are going to the set the sizemode property to some constant values. Below is the code for the entire Link label handlers:

//Image_001: Set the size mode by responding to the
//Label Click
private void LlblNormal_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e)
    pict.SizeMode = PictureBoxSizeMode.Normal;

private void LlblStertchMode_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e)
    pict.SizeMode = PictureBoxSizeMode.StretchImage;

private void lblAutoSize_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e)
    pict.SizeMode = PictureBoxSizeMode.AutoSize;

private void llblCenterImage_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e)
    pict.SizeMode = PictureBoxSizeMode.CenterImage;

private void llblZoom_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e)
    pict.SizeMode = PictureBoxSizeMode.Zoom;

Normal: Sets the image as it is and the picture box control is not resized.
StretchImage: PictureBox control is not resized. But, image size is adjusted to fit the full picturebox window.
Autosize: Image size is fixed and control is resized to hold entire image
CenterImage:  Both Image size and Picture box size is not changed. But the image on its original size is move to align the center of the image with the picturebox center.
Zoom: Fits the image to the full picture box control. But, unlike the stretch, the aspect ratio (Height:Width) is maintained.

Now Run the application and check these properties by clicking the LinkLabel buttons.

2) Provide the button click handler for the LoadLocal button. We are going to load the image from the local system. Copy the Image Winter.jpg from the sample application to the same relative location. If you chose to store it in a different path then you should change the relative path or specify the full path to the image. Below is the code that loads the image to picture box from the local machine.

//Image_002: Load the Image from the Local Path
private void btnLoadLocal_Click(object sender, EventArgs e)
    if (radNormal.Checked == true)
        pict.WaitOnLoad = true;

Note that the relative path ../../ means, move two directories above to locate the jpg from the path in which the application runs. This is known of relative path. That is; relative path to the path in which application is running. The below screen shot shows the new image loaded at the runtime from the local path.

3) Now provide the handler for the Load From Internet button. This handler will load the image from some Internet site. Setting the waitonload property to false, makes the loading process asynchronous so that your form can still receive the user input and responds to that event. Below is the code that loads the image from the Internet location:

//Image_003: Load the Image from the Internet
private void btnLoadInternet_Click(object sender, EventArgs e)
        if (radNormal.Checked == true)
            pict.WaitOnLoad = false;
        MessageBox.Show("Check that Internet Connection is available");

Note that we just provided the web URL to the image. Based on the option button we decided how we want to load the image.

4) Now provide the handler for the "LoadProgressChanged" event of the Picture box control. Unlike load method, the LoadAsync will raise the LoadProgressChanged event when some amount of image bits are download from the http path. Inside the handler we will use the event argument to decide how much of image is loaded. And the progress bar value is set with the percentage of completion retrieved from the event argument. Also the label control shows the number of percentage.

//Progress_001: Increment the value of the progress bar to show the image
//Load progress
private void pict_LoadProgressChanged(object sender, ProgressChangedEventArgs e)
    progLoadStatus.Value = e.ProgressPercentage;
    lblProgress.Text = e.ProgressPercentage.ToString() + "%";

The below picture shows Load from Internet button handler in the middle of the progress [Async option button selected]:

Below picture shows control when the Load process is fully completed:

Note: The attached application is created in Visual Studio 2005. If you have latest version say Yes to the conversion dialog. 

Source Code : Download

No comments:

Post a Comment

Leave your comment(s) here.

Like this site? Tell it to your Friend :)