1. Introduction to PictureBox Control and ProgressBar Control

In this article we will explore the PictureBox Control and ProgressBar Control with an example walk through. PictureBox control is mainly used for an image. Using this control, one can show standard images files in a C# windows form. The image type can be BMP, JPG, JIF, PNG, etc. A ProgressBar control shows the progress of long-running process.

We will walk through an example and explore the control properties, methods and events. The below youtube video explains the basics of PictureBox and ProgressBar controls:

2. The PictureBox Control Example

The screenshot of the application that we will create in this article is shown below:

In the above screenshot, the PictureBox Control shows the Image after the form is loaded. Below this Control, we will see a set of LinkLable Controls, which changes the SizeMode Property of the PictureBox when a Clicks it. In the right-side Group, we will try to load the Image to the PictureBox at run-time both from your local PC and from the remote PC (Internet URL). Loading the Image from a remote machine requires internet access.

The radio buttons control how the PictureBox Control loads the image in it. In Asynchronous Mode, a thread takes care of loading an image from the Internet or even from the local machine. If the image in the Internet is of huge size and load process does not block the user interface. For a test when the Asynchronous option is selected, we can try moving the window while the image is loading.

We use the progress bar in the above application to show the progress of loading the image. The Label Control (Not visible above) next to the progress bar shows the percentage of completed image load. Now, we will start with this example.

3. Form Design of The Example

3.1 Start a C# Project

Follow the instruction below to create the startup application.

1. Open the application available for download for a reference. The link is there at the end of this article. We will call this as Reference Application.
2. Create a new Visual C# Windows Application using visual studio 2005 or Later.
3. Place all the required control discussed in the previous section.
4. First set the properties for the PictureBox Control. We can do that by checking the property for the PictureBox Control on our solution opened in the first step. Check for the Bold Font property values in the Reference Application and those are all the properties we need to change in our Application.

3.2 Set an Image to PictureBox Control

Let us see frequently used properties of the PictureBox Control before we move on to the next step. If we click the Image Property ‘…’ button C# displays a Select Resource Dialog (Refer the below Picture).

From the displayed dialog, we must select the Resource File option and click the Import Button. Now, we can pick any image in our computer system which we want to add it as a Resource. During the Form load event at run-time, we will use this image as a Resource. Once we selected the image click OK to this dialog. The below picture shows the dialog before clicking OK button below:

3.3 Embedded Image Resource

In the explorer window, we can see the picture loaded as a resource. This is shown below as sunset.jpg:

Now, we mark this Image as ‘Embedded Resource’. Once we make a resource as Embedded Resource, we no need to copy the image file to a physical location of the end user machine. But, note that the file should exist on our build and packaging machine. The below steps show the properties required for our example.

1. Right click the loaded resource (In our case it is Sunset.jpg) and select properties.
2. Select Embedded Resource as value for the ‘Build Action‘ Property.
3. Nothing special with the LinkLabel Control. We can easily set it using the reference application.
4. Same holds true for Groupbox, Radiobutton and the button controls.
5. For ProgressBar Control, we accepted all the default values.
6. Do not forget to add a label control next to the Progress Bar, 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. You can also watch the below youtube video to know how the form was designed:

4. Start Coding the Example

4.1 SizeMode Property of PictureBox Control

For all the LinkLabel Control, we provide a handler for the LinkClicked Event. Inside the handler we are going to the set the ‘SizeMode Property’ to a constant value from the ‘PictureBoxSizeMode Enumeration’. Below is the code for the entire LinkLabel handlers:

The SizeMode Property tells how C# should draw the image on the PictureBox Control. Below are the PictureBoxSizeMode Enumeration Constants and the image behavior:

• Normal: This SizeMode value sets the image as it is, and the PictureBox control remains in same size.
• StretchImage: C# Form does not resize the PictureBox control. But, it adjusts the image size to fit the full PictureBox window.
• Autosize: This SizeMode value keeps the Image size as fixed and resizes the PictureBox Control to hold entire image.
• CenterImage: When we set this value to SizeMode Property, both image size and PictureBox Control size is not changed. But C# moves the Image in such a way that its center aligns with the PictureBox Control’s center
• Zoom: This Enumeration value fits the image to the full picture box control. But, unlike the stretch, the Aspect Ratio (Height: Width) of the Image is maintained.

Now we can run the application and check how these properties controls the Image and the hosting PictureBox control by clicking the LinkLabel buttons.

4.2 Load Image From Local Path

Next, we will give the button click handler for the LoadLocal Button. Here, we will load the Image from our local system. Copy the Image ‘Winter.jpg’ from the Reference Application to the same relative location in our example. If we want to store it in a different path, then we should change the relative path or point out the full path to the image. Below is the code that loads the image to PictureBox Control at run-time from the local machine.

The ‘

Load

’ Function can load the image from Local or Internet Location. But, with this method we cannot get the progress of the image loading. In a local system, the image loading will be fast. The progress is important when we load big image over the Internet.

The ‘

LoadAsync

‘ Function loads the Image either synchronously or asynchronously. This is managed by the property ‘

WaitOnLoad

’. When this Property is false, Image loads asynchronously. When we load the image synchronously the call to load is blocked till all the image bytes are transferred to the PictureBox Control. Also note that, this function supports tracking the progress of Image Load.

4.3 Load Image from Internet

Now, we will provide the handler for the Load From Internet button. This handler will load the image from an Internet site. Setting the

WaitOnLoad

Property to false, makes the loading process asynchronous so that our form can interact with form while the image is loading. For example, when loading the image from Internet takes five seconds, we can still interact with the form. Since, the load is asynchronous, C# will not block the form. Below is the code that loads the image from the Internet location:

4.4 Show Image Load Progress

Now, we will write the handler function for the

<strong>LoadProgressChanged</strong> Event

of the PictureBox Control. Unlike the Load Method, the

<strong>LoadAsync</strong> Method

will trigger the LoadProgressChanged Event when some amount of image bits are downloaded from the HTTP path. Inside this handler, we will use the Event argument to say how much of image is wired and update the progress bar value. We also update the label control to show the image load progress in Percentage of Completion.

The below picture shows Image load in progress [Asynchronous option button is selected]:

The below youtube video shows code implementation and testing the example:

5. Summary and Code Download

In this article, first, we explored using an Image as Embedded Resource. Then, we learned various PictureBox Size Modes and how C# resizes the image to fit the hosting Control. We also explored both Load and LoadAsync Functions to load the image. Unlike the Load Function, the LoadAsync function will raise special event for tacking the completion image load operation. We can see the Image Loading progress by clicking the Load From Internet button with the Asynchronous radio option selected.

Source Code: Download From Google Drive

• NumericUpDown and LinkLabel Control in C#
• StreamReader and StreamWriter Explained

Categories: C#

Tags: PictureBox Load, PictureBox LoadAsync, PictureBox LoadProgressChanged Event, PictureBox SizeMode

This site uses Akismet to reduce spam. Learn how your comment data is processed.