Home

Windows Control: The Picture Box

 

Fundamentals of the Picture Box

 

Introduction

You can display a picture directly on a form. Still, to give you a more comfortable space to show a picture, the .NET Framework provides a Windows control named PicturePox.

To support picture boxes, the .NET Framework provides a class named PictureBox. Here is an example of creating it:

open System
open System.Windows.Forms

let exercise : Form = new  System.Windows.Forms.Form()
exercise.StartPosition <- FormStartPosition.CenterScreen

let pctBox = new PictureBox()
exercise.Controls.Add pctBox

Application.Run exercise

Introduction to the Characteristics of a Picture Box

As a regular visual control, after a picture box has been added to a form, it assumes a default size (unless you dragged and drew when adding it). You can then move or resize it using the techniques of application design we reviewed in Lessons 3 and 4. Of course, you can also specify the location and the size of the control programmatically. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise : Form = new  System.Windows.Forms.Form()
exercise.StartPosition <- FormStartPosition.CenterScreen

let pctBox = new PictureBox()

pctBox.Location <- new Point(10, 10)
pctBox.Size <- new Size(200, 150)

exercise.Controls.Add pctBox

Application.Run exercise

The Border Style of a Picture Box

By default, when you have added a picture box to a form, it appears without borders. Unless you display an object in the picture box or draw a shape in it, the user would not know where the picture box starts and where it ends:

Picture Box

There is no way of knowing that the above form contains a picture box. If you want the picture box to show its borders to the user, you can use the BorderStyle property:

member BorderStyle : BorderStyle with get, set

The Image of a Picture Box

As stated in the introduction, the primary purpose of a picture box is to display a picture. To support this, the PictureBox class is equipped with a property named Image:

member Image : Image with get, set

This property is of type Image. To specify the picture to display, assign an Image object to the instance of the PictureBox class. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise : Form = new  System.Windows.Forms.Form()
exercise.StartPosition <- FormStartPosition.CenterScreen

let pctBox = new PictureBox()

pctBox.Size <- new Size(200, 150)
pctBox.Location <- new Point(10, 10)
pctBox.Image <- Image.FromFile(@"C:\Exercise\something.jpg")

exercise.Controls.Add pctBox

Application.Run exercise

If you decide to specify the picture, make sure you provide a valid picture or a valid path to the picture otherwise you would receive an error if the application cannot find the image.

The Image Location of the Image of a Picture Box

Besides the PictureBox.Image property, to assist you with specifying the image to display, the PictureBox class provides a property named ImageLocation. This property, which is of type string, expects either the path to the file or the URL of the image:

member ImageLocation : string with get, set

Hereis an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise : Form = new  System.Windows.Forms.Form()
exercise.StartPosition <- FormStartPosition.CenterScreen

let pctBox = new PictureBox()

pctBox.Size <- new Size(200, 150)
pctBox.Location <- new Point(10, 10)
pctBox.ImageLocation <- "http://www.functionx.com/design/une1.gif"

exercise.Controls.Add pctBox

Application.Run exercise

After assigning a string to the ImageLocation property, you can call the PictureBox.Load() method to actually show the image. This method is overloaded with two versions.

When accessing this property, if you use an event such as the Paint event of the picture box or the Click event of a button, you don't have to call the Load() method to show the picture but it is more effective and faster.

Instead of assigning a string to the PictureBox.ImageLocation property and calling the parameter-less PictureBox.Load() method, you can call the other version of the method. Its syntax is:

member Load : 
        url:string -> unit

This version takes as argument the URL of, or the path to, the picture. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise : Form = new  System.Windows.Forms.Form()
exercise.StartPosition <- FormStartPosition.CenterScreen

let pctBox = new PictureBox()

pctBox.Size <- new Size(200, 150)
pctBox.Location <- new Point(10, 10)
pctBox.Load @"F:\Exercise\person.jpg"

exercise.Controls.Add pctBox

Application.Run exercise

After you have specified the image that the picture box would display, by default, it is located from the top-left corner of the control. In some cases, for example if the picture's size is lower than the control's, this would be fine and you may not need to be concerned with that.

The picture box can show only as far as its size. If an image goes beyond the control, its parts would be hidden. In some cases, the image may appear too wide, too narrow, too tall, or too short for the picture box. And in some cases, if the image's size is higher than the picture box, the control would not show some important aspects. Therefore, in some cases, you want to resize either the picture to fit the control, or the control to fit the picture. In some cases, you can programmatically resize a control by changing its Size property:

member Size : Size with get, set

On the other hand, you can scale a picture as we learned with bitmap. The PictureBox class provides an alternative.

 
   
 

The Size Mode of a Picture Box

The SizeMode property of the PictureBox class allows you to specify how the image in the control would be displayed:

member SizeMode : PictureBoxSizeMode with get, set

This property is based on the PictureBoxSizeMode enumeration and its members are as follows:

  • Normal: The picture is positioned from the top-left corner of the control as seen in the above form
  • CenterImage: The picture is positioned in the middle-center of the control. If you give the user the ability to resize the picture box, when this is done, the picture would always be drawn in the middle-center of the control:
open System
open System.Drawing
open System.Windows.Forms

let exercise : Form = new  System.Windows.Forms.Form()
exercise.ClientSize <- new Size(475, 380)
exercise.StartPosition <- FormStartPosition.CenterScreen

let pctBox = new PictureBox()

pctBox.Size <- new Size(450, 350)
pctBox.Location <- new Point(10, 10)
pctBox.BorderStyle <- BorderStyle.FixedSingle
pctBox.Load @"C:\Exercises01\house.jpg"

pctBox.SizeMode <- PictureBoxSizeMode.CenterImage

exercise.Controls.Add pctBox

Application.Run exercise

The Size Mode of a Picture Box

  • StretchImage: The picture is resized to fit the control:

    The Size Mode of a Picture Box

    Any dimension of the picture that is lower than its equivalent on the control is increased to match its equivalent. Any dimension of the picture that is higher than its equivalent on the control is decreased to match its equivalent. If you give the user the ability to resize the picture box, when this is done, the picture would always resize itself to fit the size of the control
  • Zoom:

    The Size Mode of a Picture Box

    The image is positioned in the middle of the control: but it is also resized following a certain algorithm:
    • If the image is taller than the control, the picture gets resized to be smaller so its new width and height can fit in the control and the ratio Bitmap.Width/Bitmap.Height ratio is respected. Here is an example
       
      Before After
    • If the image is wider than the control, the picture gets resized to be small enough so its new width and height can fit in the control and the ratio Bitmap.Width/Bitmap.Height is respected. Here is an example
       
      Before After
    • Imagine the image is smaller than the control:
       


      In this case, the picture's width and height would be increased but the ratio Bitmap.Width/Bitmap.Height is kept.
      To resize the picture, the compiler first finds out what dimension is closer to its equivalent of the control:
      • If the PictureBox.Height/Bitmap.Height ratio is lower than the PictureBox.Width/Bitmap.Width ratio, then the height of the image would first be increased to match the height of the picture box. Then the compiler would use the Bitmap.Width/Bitmap.Height ratio to calculate and apply the new width of the picture. Here is an example:
         
        Before After
      • If the PictureBox.Width/Bitmap.Width ratio is lower than the PictureBox.Height/Bitmap.Height  ratio, then the width of the image would first be increased to match the width of the picture box. Then compiler would then use the Bitmap.Width/Bitmap.Height ratio to calculate and apply the new height of the picture. Here is an example:
         
        Before After

    If you give the user the ability to resize the picture box, every time this is done, the compiler would use the above descriptions to resize and position the picture inside of the control

  • AutoSize: The size of the control would be changed to fit the picture:
    • If the picture is smaller than the control, the size of the control would be increased to show the whole picture:
       
      Before After
    • If the picture is bigger than the control, the size of the picture box control would be decreased to fit the picture
       
      Before After
    If you had given the user the ability to resize the picture box, it cannot be resized and the size of the picture cannot change
 
 
   
 

Home Copyright © 2012-2015, FunctionX, Inc. Home