1. Introduction
In this article we will explore the PictureBox and Progressbar controls with a sample walk through. The Picturebox control is mainly used to shiow an image. The image type can be bmp, jpg, gif, png etc. The Progressbar control is used to show the progress of a 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 in the picturebox control when the form is displayed. Below you will see a set of LinkLabel controls, which changes the SizeMode property of the picturebox control when a click event is produced for 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 very large then the 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 the percentage of loading completed is shown. 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 close 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 an embedded resource. Once we make a resource an embedded resource, 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 controls provide a 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.Load("../../Winter.jpg");
else
{
pict.WaitOnLoad = true;
pict.LoadAsync("../../Winter.jpg");
}
}
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 screen shot below 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)
{
try
{
if (radNormal.Checked == true)
pict.Load("http://www.stanford.edu/~jbaugh/saw/studentphoto/Scenery/CampsBaySunset.JPG");
else
{
pict.WaitOnLoad = false;
pict.LoadAsync("http://www.stanford.edu/~jbaugh/saw/studentphoto/Scenery/CampsBaySunset.JPG");
}
}
catch
{
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 the 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 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 picture below shows the Load from Internet button handler in the middle of the progress [Async option button selected]:
The picture below 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.