Post
Ask Question

PictureBox Control in F#

Introduction
 
In this article I have explained the "PictureBox" Control and how to use this control in a Windows Forms application. The "PictureBox" Control is generally used for containing images; its just like a container of images. You will see the images with the scrollable container and I have explained the "SizeMode" Property of the "PictureBox" Control.
 
PictureBox Control
 
The "PictureBox" Control is generally used to display an image in a Windows Forms application. The Image can be of any type, like jpg, jpeg, .png, bitmap and so on. The "PictureBox" control is a control of the PictureBox class. You can specify the image by the "ImageLocation" property of the "PictureBox" class.
 
Syntax:
  1. let imagebox=new PictureBox(SizeMode=PictureBoxSizeMode.AutoSize,BorderStyle=BorderStyle.FixedSingle,Top=10)  
SizeMode Property
  • Show the picture at the upper-left corner (Normal mode) by default.
  • Center the picture within the control (CenterSize)
  • Adjust the size of image depending on the control size (AutoSize).
  • Stretch the picture it displays to the fit to the control (StretchSize).
The "AutoSize" property is replaced by the SizeMode property in Visual Studio 2008. We can do the "AutoSize" and normal modes. In addition options are center, stretch, or zoom. Normal mode is the default mode; that means that the image is placed at the upper-left corner of the Windows Forms application. CenterImage means that the image is localize at the centered of the form. "AutoSize" is used when the image size is greater than the control. The autosize is then adjusted to the control size depending on the image's size and Stretch size is for the streched size of the image to adjust it to the control size.
 
SizeMode=PictureBoxSizeMode.AutoSize,BorderStyle=BorderStyle.FixedSingle
 
Now let's use the following procedure.
 
Step 1
 
Open Visual Studio then seelct "Create New Project" --> "F# Console Application".
 
create-app.png
 
Step 2
 
Now go the Solution Explorer on the right side of Visual Studio. Select the references and right-click on it and select "Add references".
 
select-refrnces.png

addrefnces.png
 

Step 3
 
After selecting "Add References", in the framework template you need to select "System.Windows.Forms" and "System.Drawing" while holding down the "Ctrl" key and click on "Ok." 
 
imprtnamespaces.png
 
Step 4
 
Write the code for the F# application as in the following
  1. open System   
  2. open System.Drawing     
  3. open System.Windows.Forms    
  4. let pictureboxform=new Form(Text="PictureBoxControl")  
  5. let scrollbar=new HScrollBar(Location=new System.Drawing.Point(0, 260),Width=350)//Horizontal Scroll bar  
  6. let scrollbar2=new HScrollBar(Location=new System.Drawing.Point(0, 510),Width=350)//Horizontal Scroll bar  
  7. let tip=new ToolTip(IsBalloon=true,ToolTipIcon=ToolTipIcon.Info)  //define tooltip  
  8. let tip2=new ToolTip(IsBalloon=true,ToolTipIcon=ToolTipIcon.Info)  //define tooltip  
  9. let imagebox=new PictureBox(SizeMode=PictureBoxSizeMode.AutoSize,BorderStyle=BorderStyle.FixedSingle,Top=10)//Create picturebox that contains the images  
  10. let imagebox2=new PictureBox(SizeMode=PictureBoxSizeMode.AutoSize,BorderStyle=BorderStyle.FixedSingle,Top=350)  
  11. imagebox.ImageLocation<-("C:\csharp.png") //image for imagebox  
  12. imagebox2.ImageLocation<-("C:\ms.png") //image for imagebox2  
  13. pictureboxform.Controls.Add(imagebox)  //adding the controls in form  
  14. pictureboxform.Controls.Add(imagebox2)  //adding the controls in form  
  15. pictureboxform.Controls.Add(scrollbar)   //adding the controls in form  
  16. pictureboxform.Controls.Add(scrollbar2)   //adding the controls in form  
  17. scrollbar.MouseHover.Add(fun moving->tip.SetToolTip(scrollbar,"Move the image by draging"))   
  18. scrollbar2.MouseHover.Add(fun moving->tip2.SetToolTip(scrollbar2,"Move the picture by draging"))   
  19. scrollbar.Scroll.Add(fun move->imagebox.Left<-Convert.ToInt32(scrollbar.Value.ToString()))   
  20. scrollbar2.Scroll.Add(fun move->imagebox2.Left<-Convert.ToInt32(scrollbar2.Value.ToString()))   
  21. pictureboxform.Show()   
  22. Application.Run(pictureboxform)    
Step 5
 
Debug the application by pressing F5 and the results will be shown in the application as in the figure below.
 
after-debug.png
 
Step 6
 
It's the first picture box containing an image, you can move this image by the horizontal scroll bar.
 
c-sharp.png
 
Step 7
 
It's Second picture box containing image you can move this image to by horizontal scroll bar.
 
ms.png
 
Summary
 
In this article, we explained how to create and use a "PictureBox" control. First we explained how to create a "PictureBox" Control in a Windows Forms application then how to use the "SizeMode" Property of the PictureBox Control. I hope it will help you to understand the "PictureBox" control.


Similar Articles