Manipulating an Image Data in Visual F#

To manipulate an image data, simply add an oleobject fieldname on your table and insert a bitmap image to it. To display the image on your form, use a picturebox control then bind your oleobject fieldname to it using the following syntax:

view plainprint?

1. Pictureboxobjname.DataBindings.Add(new Binding(pictureboxproperty,datasource,fieldname))  

Pictureboxobjname.DataBindings.Add(new Binding(pictureboxproperty,datasource,fieldname))

For instance:

view plainprint?

1. appico.DataBindings.Add(new Binding("Image",bindingsource,"oleapplogo",true))  

appico.DataBindings.Add(new Binding("Image",bindingsource,"oleapplogo",true))

The last boolean parameter enables the control formatting. We also use the Image property instead of the usual Text for the fact that it is the property used to display an image on your form.

Before proceding to the steps below, I want you to make an Ms-Access 2003 or 2007 database file named “dbApplication”. Create a table inside it and name it “tblApplication”. Use the following specifications:

Chrappname	Text	Handles the application name
Oleapplogo	OLE Object	Handles the application ico

After creating your table, you can add appropriate values to it for instance:

chrappname	oleapplogo
PHP	Bitmap Image
Apache	Bitmap Image

Bitmap Image refers the the Bitmap Object that you have inserted using the Paste From Ms-Paint command.

After creating the table and adding appropriate values to it.We are now ready for our sample application. Just follow these steps:

1. Click Start>All Programs>Microsoft Visual Studio 2008>Microsoft Visual Studio 2008.

2. Click File>New>Project>Select Visual F# in the project types>Select F# application in the Visual Studio installed templates category.

3. Click the Project menu>Add reference>Click the .Net tab>Locate then double-click System.Windows.Forms. Do step 3 again and this time, select System.Drawing and System.Data from the .Net tab.

4. Enter the following code after the line “// Learn more about F# at http://fsharp.net “:

view plainprint?

1. // Learn more about F# at http://fsharp.net  
2. //specifies the memory location of the class files  
3. //that will be needed in our application  
4. open System  
5. open System.Windows.Forms  
6. open System.Data  
7. open System.Drawing  
8. //creates a font  
9. let ffont=new Font("Verdana", 9.75F,FontStyle.Regular, GraphicsUnit.Point)    
10. //creates a connection object  
11. let oleconn = new System.Data.OleDb.OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;  
12.   Data Source=C:\Documents and Settings\station 2\My Documents\dbApplication.mdb")  
13.  //creates an OleDbDataAdapter  
14. let dataadpter = new System.Data.OleDb.OleDbDataAdapter("Select * from tblApplication", oleconn)  
15. //generates a dataset  
16. let dataset11 = new DataSet()  
17. //fills the dataset with recod values  
18. dataadpter.Fill(dataset11,"tblApplication")|>ignore  
19. //creates a form  
20. let dataform = new Form(Text="Manipulate Image Data",AutoScaleDimensions=new System.Drawing.SizeF(60.0F, 13.0F),ClientSize=new System.Drawing.Size(300, 200),StartPosition=FormStartPosition.CenterScreen)  
21. //creates our controls    
22. let label1=new Label(Text="App. name:",Location=new System.Drawing.Point(0, 10),AutoSize=true)  
23. let label2=new Label(Text="Icon:",Location=new System.Drawing.Point(0, 50),AutoSize=true)  
24. let appnamelabel=new Label(Location=new System.Drawing.Point(140,10),BorderStyle=BorderStyle.FixedSingle)  
25. let appico=new PictureBox(SizeMode=PictureBoxSizeMode.StretchImage,Location=new System.Drawing.Point(140,50))  
26.   
27. let bindingsource=new BindingSource()  
28. //creates a binding navigator  
29. //this will allow us to add navigational buttons to our data grid  
30. let bindingnav=new BindingNavigator(Dock=DockStyle.None,Location=new System.Drawing.Point(100, 170))  
31. //creates a toolstrip buttons for our binding navigator  
32. let movefirst=new ToolStripButton(Text="Top")  
33. let moveprev=new ToolStripButton(Text="Prev")  
34. let movenext=new ToolStripButton(Text="Next")  
35. let movelast=new ToolStripButton(Text="Bottom")  
36. let exitbutton=new ToolStripButton(Text="Exit")  
37. //adds the toolstripbuttons to our binding navigator  
38. bindingnav.Items.Add(movefirst)|>ignore  
39. bindingnav.Items.Add(moveprev)|>ignore  
40. bindingnav.Items.Add(movenext)|>ignore  
41. bindingnav.Items.Add(movelast)|>ignore  
42. bindingnav.Items.Add(exitbutton)|>ignore  
43. //adds a function to each buttons  
44. bindingnav.MoveFirstItem<-movefirst  
45. bindingnav.MoveNextItem<-movenext  
46. bindingnav.MovePreviousItem<-moveprev  
47. bindingnav.MoveLastItem<-movelast  
48. exitbutton.Click.Add(fun exit->  
49. //close the form and dataconnection  
50.                     dataform.Close()  
51.                     oleconn.Close())  
52. //assigns the dataset name as a bindingsource datasource  
53. bindingsource.DataSource<-dataset11  
54. //assigns our table as a binding source datamember  
55. bindingsource.DataMember<-"tblApplication"  
56. //assigns the bindingsource name as a binding navigators  
57. //bindingsource value  
58. bindingnav.BindingSource<-bindingsource  
59. //opens the connection  
60. oleconn.Open()  
61. //assings the font to our form  
62. dataform.Font<-ffont  
63. //adds the controls to our form  
64. dataform.Controls.Add(label1)  
65. dataform.Controls.Add(label2)  
66. dataform.Controls.Add(appnamelabel)  
67. dataform.Controls.Add(appico)  
68.   
69. dataform.Controls.Add(bindingnav)  
70. //binds the fieldnames to our label  
71. appnamelabel.DataBindings.Add(new Binding("Text",bindingsource,"chrappname"))  
72. appico.DataBindings.Add(new Binding("Image",bindingsource,"oleapplogo",true))  
73. //executes our application  
74. dataform.Show()  
75. Application.Run(dataform)  

// Learn more about F# at http://fsharp.net
//specifies the memory location of the class files
//that will be needed in our application
open System
open System.Windows.Forms
open System.Data
open System.Drawing
//creates a font
let ffont=new Font("Verdana", 9.75F,FontStyle.Regular, GraphicsUnit.Point)  
//creates a connection object
let oleconn = new System.Data.OleDb.OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;
  Data Source=C:\Documents and Settings\station 2\My Documents\dbApplication.mdb")
 //creates an OleDbDataAdapter
let dataadpter = new System.Data.OleDb.OleDbDataAdapter("Select * from tblApplication", oleconn)
//generates a dataset
let dataset11 = new DataSet()
//fills the dataset with recod values
dataadpter.Fill(dataset11,"tblApplication")|>ignore
//creates a form
let dataform = new Form(Text="Manipulate Image Data",AutoScaleDimensions=new System.Drawing.SizeF(60.0F, 13.0F),ClientSize=new System.Drawing.Size(300, 200),StartPosition=FormStartPosition.CenterScreen)
//creates our controls  
let label1=new Label(Text="App. name:",Location=new System.Drawing.Point(0, 10),AutoSize=true)
let label2=new Label(Text="Icon:",Location=new System.Drawing.Point(0, 50),AutoSize=true)
let appnamelabel=new Label(Location=new System.Drawing.Point(140,10),BorderStyle=BorderStyle.FixedSingle)
let appico=new PictureBox(SizeMode=PictureBoxSizeMode.StretchImage,Location=new System.Drawing.Point(140,50))

let bindingsource=new BindingSource()
//creates a binding navigator
//this will allow us to add navigational buttons to our data grid
let bindingnav=new BindingNavigator(Dock=DockStyle.None,Location=new System.Drawing.Point(100, 170))
//creates a toolstrip buttons for our binding navigator
let movefirst=new ToolStripButton(Text="Top")
let moveprev=new ToolStripButton(Text="Prev")
let movenext=new ToolStripButton(Text="Next")
let movelast=new ToolStripButton(Text="Bottom")
let exitbutton=new ToolStripButton(Text="Exit")
//adds the toolstripbuttons to our binding navigator
bindingnav.Items.Add(movefirst)|>ignore
bindingnav.Items.Add(moveprev)|>ignore
bindingnav.Items.Add(movenext)|>ignore
bindingnav.Items.Add(movelast)|>ignore
bindingnav.Items.Add(exitbutton)|>ignore
//adds a function to each buttons
bindingnav.MoveFirstItem<-movefirst
bindingnav.MoveNextItem<-movenext
bindingnav.MovePreviousItem<-moveprev
bindingnav.MoveLastItem<-movelast
exitbutton.Click.Add(fun exit->
//close the form and dataconnection
                    dataform.Close()
                    oleconn.Close())
//assigns the dataset name as a bindingsource datasource
bindingsource.DataSource<-dataset11
//assigns our table as a binding source datamember
bindingsource.DataMember<-"tblApplication"
//assigns the bindingsource name as a binding navigators
//bindingsource value
bindingnav.BindingSource<-bindingsource
//opens the connection
oleconn.Open()
//assings the font to our form
dataform.Font<-ffont
//adds the controls to our form
dataform.Controls.Add(label1)
dataform.Controls.Add(label2)
dataform.Controls.Add(appnamelabel)
dataform.Controls.Add(appico)

dataform.Controls.Add(bindingnav)
//binds the fieldnames to our label
appnamelabel.DataBindings.Add(new Binding("Text",bindingsource,"chrappname"))
appico.DataBindings.Add(new Binding("Image",bindingsource,"oleapplogo",true))
//executes our application
dataform.Show()
Application.Run(dataform)

5. Click the run icon to execute your application. You should now see an output similar to the following screen shot: 6. Here’s another version of the code above without BindingSource and BindingNavigator.

view plainprint?

1. // Learn more about F# at http://fsharp.net  
2. //specifies the memory location of the class files  
3. //that will be needed in our application  
4. open System  
5. open System.Windows.Forms  
6. open System.Data  
7. open System.Drawing  
8. //creates a font  
9. let ffont=new Font("Verdana", 9.75F,FontStyle.Regular, GraphicsUnit.Point)    
10. //creates a connection object  
11. let oleconn = new System.Data.OleDb.OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;  
12.   Data Source=C:\Documents and Settings\station 2\My Documents\dbApplication.mdb")  
13.  //creates an OleDbDataAdapter  
14. let dataadpter = new System.Data.OleDb.OleDbDataAdapter("Select * from tblApplication", oleconn)  
15. //generates a dataset  
16. let dataset11 = new DataSet()  
17. //fills the dataset with recod values  
18. dataadpter.Fill(dataset11,"tblApplication")|>ignore  
19. //creates a form  
20. let dataform = new Form(Text="Manipulate Image Data",AutoScaleDimensions=new System.Drawing.SizeF(60.0F, 13.0F),ClientSize=new System.Drawing.Size(300, 200),StartPosition=FormStartPosition.CenterScreen)  
21. //creates our controls    
22. let label1=new Label(Text="App. name:",Location=new System.Drawing.Point(0, 10),AutoSize=true)  
23. let label2=new Label(Text="Icon:",Location=new System.Drawing.Point(0, 50),AutoSize=true)  
24. let appnamelabel=new Label(Location=new System.Drawing.Point(140,10),BorderStyle=BorderStyle.FixedSingle)  
25. let appico=new PictureBox(SizeMode=PictureBoxSizeMode.StretchImage,Location=new System.Drawing.Point(140,50))  
26. //opens the connection  
27. oleconn.Open()  
28. //assings the font to our form  
29. dataform.Font<-ffont  
30. //adds the controls to our form  
31. dataform.Controls.Add(label1)  
32. dataform.Controls.Add(label2)  
33. dataform.Controls.Add(appnamelabel)  
34. dataform.Controls.Add(appico)  
35. //binds the fieldnames to our label  
36. appnamelabel.DataBindings.Add(new Binding("Text",dataset11,"tblApplication.chrappname"))  
37. appico.DataBindings.Add(new Binding("Image",dataset11,"tblApplication.oleapplogo",true))  
38. //executes our application  
39. dataform.Show()  
40. Application.Run(dataform)  

// Learn more about F# at http://fsharp.net
//specifies the memory location of the class files
//that will be needed in our application
open System
open System.Windows.Forms
open System.Data
open System.Drawing
//creates a font
let ffont=new Font("Verdana", 9.75F,FontStyle.Regular, GraphicsUnit.Point)  
//creates a connection object
let oleconn = new System.Data.OleDb.OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;
  Data Source=C:\Documents and Settings\station 2\My Documents\dbApplication.mdb")
 //creates an OleDbDataAdapter
let dataadpter = new System.Data.OleDb.OleDbDataAdapter("Select * from tblApplication", oleconn)
//generates a dataset
let dataset11 = new DataSet()
//fills the dataset with recod values
dataadpter.Fill(dataset11,"tblApplication")|>ignore
//creates a form
let dataform = new Form(Text="Manipulate Image Data",AutoScaleDimensions=new System.Drawing.SizeF(60.0F, 13.0F),ClientSize=new System.Drawing.Size(300, 200),StartPosition=FormStartPosition.CenterScreen)
//creates our controls  
let label1=new Label(Text="App. name:",Location=new System.Drawing.Point(0, 10),AutoSize=true)
let label2=new Label(Text="Icon:",Location=new System.Drawing.Point(0, 50),AutoSize=true)
let appnamelabel=new Label(Location=new System.Drawing.Point(140,10),BorderStyle=BorderStyle.FixedSingle)
let appico=new PictureBox(SizeMode=PictureBoxSizeMode.StretchImage,Location=new System.Drawing.Point(140,50))
//opens the connection
oleconn.Open()
//assings the font to our form
dataform.Font<-ffont
//adds the controls to our form
dataform.Controls.Add(label1)
dataform.Controls.Add(label2)
dataform.Controls.Add(appnamelabel)
dataform.Controls.Add(appico)
//binds the fieldnames to our label
appnamelabel.DataBindings.Add(new Binding("Text",dataset11,"tblApplication.chrappname"))
appico.DataBindings.Add(new Binding("Image",dataset11,"tblApplication.oleapplogo",true))
//executes our application
dataform.Show()
Application.Run(dataform)

For more sketchy tutorials on Visual F# visit Microsoft F# Developer Center.

Adding navigational Buttons to your database application

The fastest way to add navigational buttons to your database application is to use a BindingNavigator. If you are not yet familiar with Binding Navigator, I suggest reading this post first before proceeding to the steps below:

Before the Database Connection and Binding process I want you to make an Ms-Access database file named “dbEmployee” containing a table named “tblEmployee”. Use the following specifications:

Field Name	Data Type	Description
chrempno	text	Handles employee id
chrfname	text	Handles employee’s name
chrlname	text	Holds employee’s last name

After designing the structure of your table, you can enter appropriate values for each field. For instance:

chrempno	chrfname	Chrlname
1	John	Doe
2	Jean	Doe

Now that we are done creating a table, we can now link to it by using OleDbDataAdapter in Visual F#:


1. Click Start>All Programs>Microsoft Visual Studio 2008>Microsoft Visual Studio 2008.

2. Click File>New>Project>Select Visual F# in the project types>Select F# application in the Visual Studio installed templates category.

3. Click the Project menu>Add reference>Click the .Net tab>Locate then double-click System.Windows.Forms. Do step 3 again and this time, select System.Drawing and System.Data from the .Net tab.

4. Enter the following code after the line “// Learn more about F# at http://fsharp.net “:

view plainprint?

1. // Learn more about F# at http://fsharp.net  
2. //specifies the memory location of the class files  
3. //that will be needed in our application  
4. open System  
5. open System.Windows.Forms  
6. open System.Data  
7. open System.Drawing  
8. //creates a font  
9. let ffont=new Font("Verdana", 9.75F,FontStyle.Regular, GraphicsUnit.Point)    
10. //creates a connection object  
11. let oleconn = new System.Data.OleDb.OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;  
12.   Data Source=C:\Documents and Settings\station 2\My Documents\dbEmployee.mdb")  
13.  //creates an OleDbDataAdapter  
14. let dataadpter = new System.Data.OleDb.OleDbDataAdapter("Select * from tblEmployee", oleconn)  
15. //generates a dataset  
16. let dataset11 = new DataSet()  
17. //fills the dataset with recod values  
18. dataadpter.Fill(dataset11,"tblEmployee")|>ignore  
19. //creates a form  
20. let dataform = new Form(Text="Add Navigational Buttons",AutoScaleDimensions=new System.Drawing.SizeF(60.0F, 13.0F),ClientSize=new System.Drawing.Size(300, 200),StartPosition=FormStartPosition.CenterScreen)  
21. //creates our controls    
22. let label1=new Label(Text="Employee number:",Location=new System.Drawing.Point(0, 10),AutoSize=true)  
23. let label2=new Label(Text="Firstname:",Location=new System.Drawing.Point(0, 50),AutoSize=true)  
24. let label3=new Label(Text="Lastname:",Location=new System.Drawing.Point(0,100),AutoSize=true)  
25. let emplabel=new Label(Location=new System.Drawing.Point(140,10),BorderStyle=BorderStyle.FixedSingle)  
26. let fnamelabel=new Label(Location=new System.Drawing.Point(100,50),BorderStyle=BorderStyle.FixedSingle)  
27. let lnamelabel=new Label(Location=new System.Drawing.Point(100,100),BorderStyle=BorderStyle.FixedSingle)  
28. let bindingsource=new BindingSource()  
29. //creates a binding navigator  
30. //this will allow us to add navigational buttons to our data grid  
31. let bindingnav=new BindingNavigator(Dock=DockStyle.None,Location=new System.Drawing.Point(100, 170))  
32. //creates a toolstrip buttons for our binding navigator  
33. let movefirst=new ToolStripButton(Text="Top")  
34. let moveprev=new ToolStripButton(Text="Prev")  
35. let movenext=new ToolStripButton(Text="Next")  
36. let movelast=new ToolStripButton(Text="Bottom")  
37. let exitbutton=new ToolStripButton(Text="Exit")  
38. //adds the toolstripbuttons to our binding navigator  
39. bindingnav.Items.Add(movefirst)|>ignore  
40. bindingnav.Items.Add(moveprev)|>ignore  
41. bindingnav.Items.Add(movenext)|>ignore  
42. bindingnav.Items.Add(movelast)|>ignore  
43. bindingnav.Items.Add(exitbutton)|>ignore  
44. //adds a function to each buttons  
45. bindingnav.MoveFirstItem<-movefirst  
46. bindingnav.MoveNextItem<-movenext  
47. bindingnav.MovePreviousItem<-moveprev  
48. bindingnav.MoveLastItem<-movelast  
49. exitbutton.Click.Add(fun exit->  
50. //close the form and dataconnection  
51.                     dataform.Close()  
52.                     oleconn.Close())  
53. //assigns the dataset name as a bindingsource datasource  
54. bindingsource.DataSource<-dataset11  
55. //assigns our table as a binding source datamember  
56. bindingsource.DataMember<-"tblEmployee"  
57. //assigns the bindingsource name as a binding navigators  
58. //bindingsource value  
59. bindingnav.BindingSource<-bindingsource  
60. //opens the connection  
61. oleconn.Open()  
62. //assings the font to our form  
63. dataform.Font<-ffont  
64. //adds the controls to our form  
65. dataform.Controls.Add(label1)  
66. dataform.Controls.Add(label2)  
67. dataform.Controls.Add(label3)  
68. dataform.Controls.Add(emplabel)  
69. dataform.Controls.Add(fnamelabel)  
70. dataform.Controls.Add(lnamelabel)  
71. dataform.Controls.Add(bindingnav)  
72. //binds the fieldnames to our label  
73. emplabel.DataBindings.Add(new Binding("Text",bindingsource,"chrempno"))  
74. fnamelabel.DataBindings.Add(new Binding("Text",bindingsource,"chrfname"))  
75. lnamelabel.DataBindings.Add(new Binding("Text",bindingsource,"chrlname"))  
76. //executes our application  
77. dataform.Show()  
78. Application.Run(dataform)  

// Learn more about F# at http://fsharp.net
//specifies the memory location of the class files
//that will be needed in our application
open System
open System.Windows.Forms
open System.Data
open System.Drawing
//creates a font
let ffont=new Font("Verdana", 9.75F,FontStyle.Regular, GraphicsUnit.Point)  
//creates a connection object
let oleconn = new System.Data.OleDb.OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;
  Data Source=C:\Documents and Settings\station 2\My Documents\dbEmployee.mdb")
 //creates an OleDbDataAdapter
let dataadpter = new System.Data.OleDb.OleDbDataAdapter("Select * from tblEmployee", oleconn)
//generates a dataset
let dataset11 = new DataSet()
//fills the dataset with recod values
dataadpter.Fill(dataset11,"tblEmployee")|>ignore
//creates a form
let dataform = new Form(Text="Add Navigational Buttons",AutoScaleDimensions=new System.Drawing.SizeF(60.0F, 13.0F),ClientSize=new System.Drawing.Size(300, 200),StartPosition=FormStartPosition.CenterScreen)
//creates our controls  
let label1=new Label(Text="Employee number:",Location=new System.Drawing.Point(0, 10),AutoSize=true)
let label2=new Label(Text="Firstname:",Location=new System.Drawing.Point(0, 50),AutoSize=true)
let label3=new Label(Text="Lastname:",Location=new System.Drawing.Point(0,100),AutoSize=true)
let emplabel=new Label(Location=new System.Drawing.Point(140,10),BorderStyle=BorderStyle.FixedSingle)
let fnamelabel=new Label(Location=new System.Drawing.Point(100,50),BorderStyle=BorderStyle.FixedSingle)
let lnamelabel=new Label(Location=new System.Drawing.Point(100,100),BorderStyle=BorderStyle.FixedSingle)
let bindingsource=new BindingSource()
//creates a binding navigator
//this will allow us to add navigational buttons to our data grid
let bindingnav=new BindingNavigator(Dock=DockStyle.None,Location=new System.Drawing.Point(100, 170))
//creates a toolstrip buttons for our binding navigator
let movefirst=new ToolStripButton(Text="Top")
let moveprev=new ToolStripButton(Text="Prev")
let movenext=new ToolStripButton(Text="Next")
let movelast=new ToolStripButton(Text="Bottom")
let exitbutton=new ToolStripButton(Text="Exit")
//adds the toolstripbuttons to our binding navigator
bindingnav.Items.Add(movefirst)|>ignore
bindingnav.Items.Add(moveprev)|>ignore
bindingnav.Items.Add(movenext)|>ignore
bindingnav.Items.Add(movelast)|>ignore
bindingnav.Items.Add(exitbutton)|>ignore
//adds a function to each buttons
bindingnav.MoveFirstItem<-movefirst
bindingnav.MoveNextItem<-movenext
bindingnav.MovePreviousItem<-moveprev
bindingnav.MoveLastItem<-movelast
exitbutton.Click.Add(fun exit->
//close the form and dataconnection
                    dataform.Close()
                    oleconn.Close())
//assigns the dataset name as a bindingsource datasource
bindingsource.DataSource<-dataset11
//assigns our table as a binding source datamember
bindingsource.DataMember<-"tblEmployee"
//assigns the bindingsource name as a binding navigators
//bindingsource value
bindingnav.BindingSource<-bindingsource
//opens the connection
oleconn.Open()
//assings the font to our form
dataform.Font<-ffont
//adds the controls to our form
dataform.Controls.Add(label1)
dataform.Controls.Add(label2)
dataform.Controls.Add(label3)
dataform.Controls.Add(emplabel)
dataform.Controls.Add(fnamelabel)
dataform.Controls.Add(lnamelabel)
dataform.Controls.Add(bindingnav)
//binds the fieldnames to our label
emplabel.DataBindings.Add(new Binding("Text",bindingsource,"chrempno"))
fnamelabel.DataBindings.Add(new Binding("Text",bindingsource,"chrfname"))
lnamelabel.DataBindings.Add(new Binding("Text",bindingsource,"chrlname"))
//executes our application
dataform.Show()
Application.Run(dataform)

5. Click the run icon to execute your application. You should now see an output similar to the following screen shot: For more sketchy tutorials on Visual F# visit Microsoft F# Developer Center.