Introduction

The Image class of the .NET Framework provides various image manipulation techniques. For example, it makes it possible to resize a picture, to rotate, to change its orientation, or its position. We will review how you can use these techniques to create an application used to view some pictures.

1. Start a new Windows Forms Application named PictureViewer3
2. Change the properties of the form as follows:
   Text: Picture Viewer
   StartPosition: CenterScreen
3. You can copy the following pictures and add them to a folder on your computer
    
4. In the Dialogs section of the Toolbox, click the OpenFileDialog button and click the form
5. Change its characteristics as follows:
   Title: Open a Picture
   DefaultExt: bmp
   Filter: Bitmap Files (*.bmp)|*.bmp|JPEG Files (*.jpg,*.jpeg)|*.jpg|GIF Files (*.gif)|*.gif|PNG Files (*.png)|*.png
   (Name): ofdPicture
6. Right-click the form and click View Code
7. Declare a private Bitmap variable named bmpPicture
    

   private: /// <summary> /// Required designer variable. /// </summary> System::ComponentModel::Container ^components; Bitmap ^ bmpPicture;

8. In the Menus & Toolbars section of the Toolbox, click the MenuStrip button and click the form
9. While the menu strip is still selected, in the Properties window, click (Name) and type mnuMain
10. In the Common Controls section of the Toolbox, click PictureBox and click the form
11. While the picture box is still selected, in the Properties window, change its characteristics as follows:
    BorderStyle: Fixed3D
    (Name): pbxViewer
    Dock: Fill
12. On top of the Properties window, click the arrow of the combo box and select Form1
13. Click the Events button and double-click Paint
14. Implement the event as follows:
     

    System::Void Form1_Paint(System::Object^ sender, System::Windows::Forms::PaintEventArgs^ e) { if( bmpPicture != nullptr ) { pbxViewer->Image = bmpPicture; } }

15. Display the form
16. Under the form, click mnuMain
17. In the Properties window, click Items and click its ellipsis button
18. In the Items Collection Editor, make sure MenuItem is selected in the Select Item And Add To List Below combo box and click Add
19. While toolStripMenuItem1 is selected in the Members combo box, in the right list, change the following characteristics:
    Text: &File
    (Name): mnuFile
20. Still in the right list, click DropDownItems and click its ellipsis button
21. In the Items Collection Editor, make sure MenuItem is selected in the Select Item And Add To List Below combo box and click Add
22. While toolStripMenuItem1 is selected in the Members combo box, in the right list, change the following characteristics:
    Text: &Open
    (Name): mnuFileOpen
23. In the Items Collection Editor (mnuFile.DropDownItems), click OK
24. In the Items Collection Editor, in the Select Item And Add To List Below combo box, make sure MenuItem is selected in the  and click Add
25. While toolStripMenuItem1 is selected in the Members combo box, in the right list, change the following characteristics:
    Text: &Tools
    (Name): mnuTools
26. Still in the right list, click DropDownItems and click its ellipsis button
27. In the Items Collection Editor, make sure MenuItem is selected in the Select Item And Add To List Below combo box and click Add
28. While toolStripMenuItem1 is selected in the Members combo box, in the right list, change the following characteristics:
    Text: &Flip
    (Name): mnuToolsFlip
29. In the Select Item And Add To List Below combo box, make sure MenuItem is selected in the and click Add
30. While toolStripMenuItem1 is selected in the Members combo box, in the right list, change the following characteristics:
    Text: &Mirror
    (Name): mnuToolsMirror
31. In the Items Collection Editor (mnuTools.DropDownItems), click OK
32. In the Items Collection Editor, click OK
33. Under the form, click mnuMain.
    On the form, click File and click Open
34. In the Properties window, click ShortcutKeys and click the arrow of its combo box
35. In the window that appears, click the Ctrl check box
36. Click the arrow of the combo box next to Reset, scroll down and select O
37. On the form, click Tools
38. In the Properties window, click DropDownItems and click its ellipsis button
39. In the Members list of the Items Collection Editor, click Tools
40. On the right side, click DropDownItems and click its ellipsis button
41. In the Members list, click mnuToolsFlip
42. In the right list, click ShortcutKeys and click the arrow of its combo box
43. In the window that appears, click the Ctrl check box
44. Click the arrow of the combo box next to Reset, scroll down and select L
45. In the Members list, click mnuToolsMirror
46. In the right list, click ShortcutKeys, type Ctrl+M and press Enter
47. In the Items Collection Editor (mnuTools.DropDownItems), click OK
48. In the Items Collection Editor, click OK
     
49. On the form, click Tools and double-click Flip
50. Implement the event as follows:
     

    System::Void mnuToolsFlip_Click(System::Object^ sender, System::EventArgs^ e) { if( bmpPicture != nullptr ) { bmpPicture->RotateFlip(RotateFlipType::RotateNoneFlipY); Invalidate(); } }

51. Return to the form, click Tools and double-click Mirror
52. Implement the event as follows:
     

    System::Void mnuToolsMirror_Click(System::Object^ sender, System::EventArgs^ e) { if( bmpPicture != nullptr ) { bmpPicture->RotateFlip(RotateFlipType::RotateNoneFlipX); Invalidate(); } }

53. Save all
54. Under the from, click mnuMain and, on the form, click File
55. On the form, click Open and, in the Properties window, change its Text to &Open...
56. On the form, double-click Open... and implement its event as follows:
     

    System::Void mnuFileOpen_Click(System::Object^ sender, System::EventArgs^ e) { if( ofdPicture->ShowDialog() == System::Windows::Forms::DialogResult::OK ) { bmpPicture = gcnew Bitmap(ofdPicture->FileName); Invalidate(); } }

57. Execute the application
58. Try opening a picture and mirror it
     
59. Close the form and return to your programming environment
60. Under the form, click mnuMain and, on the form, click File
61. Under Open, click Type Here, type - and press Enter
62. Under the new line, click Type Here and type Exit and press Enter
63. On the form, click Exit
64. In the Properties window, change its characteristics as follows:
    (Name): mnuFileExit
    ShortcutKeys: Ctrl+F4
    ShowShortcutKeys: false
65. On the form, click File and double-click Exit
66. Implement the event as follows:
     

    System::Void mnuFileExit_Click(System::Object^ sender, System::EventArgs^ e) { Close(); }

67. Display the form
68. Under the form, click mnuMain and, on the form, click Tools
69. Under Mirror, click Type Here, type &Rotate and press Enter
70. On the form, click Rotate
71. On the right side of Rotate, click Type Here, type &90° and press Enter
72. Continue creating the sub-menus and menu items as follows:
     
73. Click each menu item and change their names as follows:
     

    Menu Item	Sub-Menu Item	Sub-Menu Item	Name
    Rotate			mnuToolsRotate
    	90º		mnuToolsRotate90
    		Left	mnuToolsRotate90Left
    		Right	mnuToolsRotate90Right
    	180º		mnuToolsRotate180
    Flip & Rotate			mnuToolsFlipRotate
    	90º		mnuToolsFlipRotate90
    		Left	mnuToolsFlipRotate90Left
    		Right	mnuToolsFlipRotate90Right
    	180º		mnuToolsFlipRotate180

74. On the form and in the menu designer, click Tools, then click Rotate, then click 90º and double-click Left
75. Implement the event as follows:
     

    System::Void mnuToolsRotate90Left_Click(System::Object^ sender, System::EventArgs^ e) { if( bmpPicture != nullptr ) { bmpPicture->RotateFlip(RotateFlipType::Rotate270FlipNone); Invalidate(); } }

76. Return to the form
77. On the form and in the menu designer, click Tools, then click Rotate, then click 90º and double-click Right
78. Implement the event as follows:
     

    System::Void mnuToolsRotate90Right_Click(System::Object^ sender, System::EventArgs^ e) { if( bmpPicture != nullptr ) { bmpPicture->RotateFlip(RotateFlipType::Rotate90FlipNone); Invalidate(); } }

79. Return to the form
80. On the form and in the menu designer, click Tools, then click Rotate, and double-click 180º
81. Implement the event as follows:
     

    System::Void mnuToolsRotate180_Click(System::Object^ sender, System::EventArgs^ e) { if( bmpPicture != nullptr ) { bmpPicture->RotateFlip(RotateFlipType::Rotate180FlipNone); Invalidate(); } }

82. Return to the form
83. On the form and in the menu designer, click Tools, then click Flip & Rotate, then click 90º and double-click Left
84. Implement the event as follows:
     

    System::Void mnuToolsFlipRotate90Left_Click(System::Object^ sender, System::EventArgs^ e) { if( bmpPicture != nullptr ) { bmpPicture->RotateFlip(RotateFlipType::Rotate270FlipX); Invalidate(); } }

85. Return to the form
86. On the form and in the menu designer, click Tools, then click Flip & Rotate, then click 90º and double-click Right
87. Implement the event as follows:
     

    System::Void mnuToolsFlipRotate90Right_Click(System::Object^ sender, System::EventArgs^ e) { if( bmpPicture != nullptr ) { bmpPicture->RotateFlip(RotateFlipType::Rotate90FlipX); Invalidate(); } }

88. Return to the form
89. On the form and in the menu designer, click Tools, then click Flip & Rotate, and double-click 180º
90. Implement the event as follows:
     

    System::Void mnuToolsFlipRotate180_Click(System::Object^ sender, System::EventArgs^ e) { if( bmpPicture != nullptr ) { bmpPicture->RotateFlip(RotateFlipType::Rotate180FlipX); Invalidate(); } }

91. Execute the application to test it
92. Try opening a picture
93. On the main menu, click View -> Other Windows -> Resource View
    In the Resource View, right-click the name of the project -> Add -> Resource...
     
    
94. In the Add Resource dialog box, click Icon and click New
95. Right-click the icon and click New Image Type
96. In the New Icon Image Type dialog box, make sure 16x16, 16 colors is selected and click OK

97. In the Resource View, click IDI_ICON1 and, in the Properties window, change the following characteristics:
    Filename: openpicture.ico
    ID: IDI_OPENPICTURE

98. Design the icon as follows:
     
    
99. In the Resource View, right-click the name of the project -> Add -> Resource...
100. In the Add Resource dialog box, double-click Icon
101. In the Resource View, click IDI_ICON1 and, in the Properties window, change the following characteristics:
     Filename: flip.ico
     ID: IDI_FLIP
102. Design the icon as follows:
      
     
103. Save and close the icon the design
104. In the Resource View, right-click the name of the project -> Add -> Resource...
105. In the Add Resource dialog box, double-click Icon
106. In the Resource View, click IDI_ICON1 and, in the Properties window, change the following characteristics:
     Filename: mirror.ico
     ID: IDI_MIRROR
107. Design the icon as follows:
      
     
108. Save and close the icon the design
109. In the Resource View, right-click one of the icons and click Insert Icon
110. Right-click the icon designer and click New Image Type
111. In the New Icon Image Type, make sure 16x16, 16 colors is selected and click OK
112. In the Add Resource dialog box, double-click the new icon
113. In the Resource View, click IDI_ICON1 and, in the Properties window, change the following characteristics:
     Filename: rotate90right.ico
     ID: IDI_ROTATE90RIGHT
114. Design the icon as follows:
      
     
115. Save and close the icon the design
116. In the Resource View, right-click one of the icons and click Insert Icon
117. Right-click the icon designer and click New Image Type
118. In the New Icon Image Type, make sure 16x16, 16 colors is selected and click OK
119. In the Add Resource dialog box, double-click the new icon
120. In the Resource View, click IDI_ICON1 and, in the Properties window, change the following characteristics:
     Filename: rotate90left.ico
     ID: IDI_ROTATE90LEFT
121. Design the icon as follows:
      
     
122. Save and close the icon the design
123. In the Resource View, right-click one of the icons and click Insert Icon
124. Right-click the icon designer and click New Image Type
125. In the New Icon Image Type, make sure 16x16, 16 colors is selected and click OK
126. In the Add Resource dialog box, double-click the new icon
127. In the Resource View, click IDI_ICON1 and, in the Properties window, change the following characteristics:
     Filename: rotate180.ico
     ID: IDI_ROTATE180
128. Design the icon as follows:
      
     
129. Save and close the icon the design
130. In the Resource View, right-click one of the icons and click Insert Icon
131. Right-click the icon designer and click New Image Type
132. In the New Icon Image Type, make sure 16x16, 16 colors is selected and click OK
133. In the Add Resource dialog box, double-click the new icon
134. In the Resource View, click IDI_ICON1 and, in the Properties window, change the following characteristics:
     Filename: fliprotate90right.ico
     ID: IDI_FLIPROTATE90RIGHT
135. Design the icon as follows:
      
     
136. Save and close the icon the design
137. In the Resource View, right-click one of the icons and click Insert Icon
138. Right-click the icon designer and click New Image Type
139. In the New Icon Image Type, make sure 16x16, 16 colors is selected and click OK
140. In the Add Resource dialog box, double-click the new icon
141. In the Resource View, click IDI_ICON1 and, in the Properties window, change the following characteristics:
     Filename: fliprotate90left.ico
     ID: IDI_FLIPROTATE90LEFT
142. Design the icon as follows:
      
     
143. Save and close the icon the design
144. In the Resource View, right-click one of the icons and click Insert Icon
145. Right-click the icon designer and click New Image Type
146. In the New Icon Image Type, make sure 16x16, 16 colors is selected and click OK
147. In the Add Resource dialog box, double-click the new icon
148. In the Resource View, click IDI_ICON1 and, in the Properties window, change the following characteristics:
     Filename: fliprotate180.ico
     ID: IDI_FLIPROTATE180
149. Design the icon as follows:
      
     
150. Save and close the icon the design
151. Display the form
152. Under the form, click mnuMain.
     On the form, click File and click Open
153. In the Properties window, click Image and click its ellipsis button
154. Locate the openpicture.ico you designed and select it
155. In the same way, associate the pictures to the menu items as follows:
      

     Sub-Menu	Icon Name
     File -> Open	openpicture.ico
     Tools -> Flip	flip.ico
     Tools -> Mirrow	rotate.ico
     Tools -> Rotate -> 90º -> Left	rotate90left.ico
     Tools -> Rotate -> 90º -> Right	rotate90right.ico
     Tools -> Rotate -> 180º	rotate180.ico
     Tools -> Flip & Rotate -> 90º -> Left	fliprotate90left.ico
     Tools -> Flip & Rotate -> 90º -> Right	fliprotate90right.ico
     Tools -> Flip & Rotate -> 180º	fliprotate180.ico

156. Execute the application to see the result
      
157. Close the form and return to your programming environment
158. On the form, click Tools
159. In the Properties window, double-click Enabled to change its value from True to False
160. Right-click the form and click View Code
161. In the Scope in Form1.h combo box, select PictureViewer3::Form1
162. In the Functions in PictureViewer3::Form1 combo box, select mnuFileOpen_Click
163. Change the event as follows:
      

     System::Void mnuFileOpen_Click(System::Object^ sender, System::EventArgs^ e) { if( ofdPicture->ShowDialog() == System::Windows::Forms::DialogResult::OK ) { bmpPicture = gcnew Bitmap(ofdPicture->FileName); Invalidate(); mnuTools->Enabled = true; } }

164. Execute the application to test it and notice that you cannot use the Tools menu at this time
165. Open a picture and notice that you can use the Tools menu now
166. Close the form and return to your programming environment
167. Under the form, click mnuMain and, on the form, click Tools
168. Under Flip & Rotate, click Type Here, type - and press Enter
169. Under the new menu separator, click Type Here, type &Original Size and press Enter
170. On the form, click Original Size
171. In the Properties window, double-click Checked to change its value to true
172. Complete the menu with the following items
      

     Text Name &Original Size mnuOriginalSize Ce&nter Image mnuCenterImage R&esize Form to Fit Picture mnuResizeForm O&ccupy Client Area mnuOccupyClientArea &Zoom mnuZoom

173. On the form, click Tools and double-click Original Size
174. Implement its event as follows:
      

     System::Void mnuOriginalSize_Click(System::Object^ sender, System::EventArgs^ e) { if( bmpPicture != nullptr ) { pbxViewer->SizeMode = PictureBoxSizeMode::Normal; mnuOriginalSize->Checked = true; mnuCenterImage->Checked = false; mnuResizeToPicture->Checked = false; mnuUseClientArea->Checked = false; mnuResizeZoom->Checked = false; } }

175. Return to the form
176. On the form, click Tools and double-click Center Image
177. Implement its event as follows:
      

     System::Void mnuCenterImage_Click(System::Object^ sender, System::EventArgs^ e) { if( bmpPicture != nullptr ) { pbxViewer->SizeMode = PictureBoxSizeMode::CenterImage; mnuCenterImage->Checked = true; mnuResizeToPicture->Checked = false; mnuOriginalSize->Checked = false; mnuUseClientArea->Checked = false; mnuResizeZoom->Checked = false; } }

178. Return to the form
179. On the form, click Tools and double-click Resize Form to Fit Picture
180. Implement its event as follows:
      

     System::Void mnuResizeForm_Click(System::Object^ sender, System::EventArgs^ e) { if( bmpPicture != nullptr ) { pbxViewer->SizeMode = PictureBoxSizeMode::AutoSize; mnuResizeToPicture->Checked = true; mnuOriginalSize->Checked = false; mnuCenterImage->Checked = false; mnuUseClientArea->Checked = false; mnuResizeZoom->Checked = false; } }

181. Return to the form
182. On the form, click Tools and double-click Occupy Client Area
183. Implement its event as follows:
      

     System::Void mnuOccupyClientArea_Click(System::Object^ sender, System::EventArgs^ e) { if( bmpPicture != nullptr ) { pbxViewer->SizeMode = PictureBoxSizeMode::StretchImage; mnuResizeToPicture->Checked = true; mnuOriginalSize->Checked = false; mnuCenterImage->Checked = false; mnuUseClientArea->Checked = false; mnuResizeZoom->Checked = false; } }

184. Return to the form
185. On the form, click Tools and double-click Zoom
186. Implement its event as follows:
      

     System::Void mnuZoom_Click(System::Object^ sender, System::EventArgs^ e) { if( bmpPicture != nullptr ) { pbxViewer->SizeMode = PictureBoxSizeMode::Zoom; mnuResizeZoom->Checked = true; mnuResizeToPicture->Checked = false; mnuOriginalSize->Checked = false; mnuCenterImage->Checked = false; mnuUseClientArea->Checked = false; } }

187. Execute the application to test
188. Open a picture and use the options under the Tools menu
189. Close the form and return to your programming environment