Home

Windows Applications:
The Picture Viewer

 

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.

 

Practical LearningPractical Learning: Creating the Application

  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
     
    Click to open Click to open
    Cocorico Field
  4. In the Dialogs section of the Toolbox, click the OpenFileDialog button OpenFileDialog 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 Events 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
     
    Moving a menu item Moving a menu category
  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
     
    Picture Viewer After mirroring a picture
  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:
     
    Flip
  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:
     
    Mirror
  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:
     
    IDI_ROTATE90RIGHT
  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:
     
    IDI_ROTATE90LEFT
  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:
     
    IDI_ROTATE180
  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:
     
    IDI_FLIPROTATE90RIGHT
  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:
     
    IDI_FLIPROTATE180
  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
 

Home Copyright © 2007-2012 FunctionX