Home

Example Application: The Picture Viewer

 

Introduction

This application explores some features of various controls:

  • The Open dialog box is used to allow the user to open a (any) picture
  • A picture box is used to show a picture opened by the user
  • A menu is created to show pictures. This menu allows the user to change the views of the picture
  • The flipping and rotating characteristics of a bitmap are used to programmatically change the ways the picture displays or appears

Practical LearningPractical Learning: Creating the Application

  1. Start a new Windows Forms Application named PictureViewer2
  2. Change the properties of the form as follows:
    Text: Picture Viewer
    StartPosition: CenterScreen
  3. On the main menu, click Project -> Add New Item...
  4. In the Add New Item dialog box, click Icon File
  5. Set the Name to openpicture and click Add
  6. Right-click the picture and click Delete Image Type
  7. Design the 16x16 icon as follows:
     
  8. On the main menu, click File -> Save openpicture.ico As...
  9. Select the PictureViewer2\PictureViewer2\bin\Debug folder
  10. Click Save
  11. In the Solution Explorer, expand the bin\Debug folder. Right-click the Debug folder -> Add -> New Item...
  12. Select Icon File. Set the Name to f the project -> Add -> Resource...
  13. In the Add Resource dialog box, double-click Icon flip and click Add
  14. Right-click the picture and click Delete Image Type
  15. Design the 16x16 icon as follows:
     
    Flip
  16. Save and close the icon design
  17. In the Solution Explorer, right-click the Debug folder -> Add -> New Item...
  18. Select Icon File. Set the Name to mirror.ico and click Add
  19. Right-click the picture and click Delete Image Type
  20. Design the 16x16 icon as follows:
     
    Mirror
  21. Save and close the icon design
  22. In the Solution Explorer, right-click the Debug folder -> Add -> New Item...
  23. Select Icon File. Set the Name to rotate90right and click Add
  24. Right-click the picture and click Delete Image Type
  25. Design the 16x16 icon as follows:
     
    IDI_ROTATE90RIGHT
  26. Save and close the icon design
  27. In the Solution Explorer, right-click the Debug folder -> Add -> New Item...
  28. Select Icon File. Set the Name to rotate90left and click Add
  29. Right-click the picture and click Delete Image Type
  30. Design the 16x16 icon as follows:
     
    IDI_ROTATE90LEFT
  31. Save and close the icon design
  32. In the Solution Explorer, right-click the Debug folder -> Add -> New Item...
  33. Select Icon File. Set the Name to rotate180 and click Add
  34. Right-click the picture and click Delete Image Type
  35. Design the 16x16 icon as follows:
     
    IDI_ROTATE180
  36. Save and close the icon design
  37. In the Solution Explorer, right-click the Debug folder -> Add -> New Item...
  38. Select Icon File. Set the Name to fliprotate90right and click Add
  39. Right-click the picture and click Delete Image Type
  40. Design the 16x16 icon as follows:
     
    IDI_FLIPROTATE90RIGHT
  41. Save and close the icon design
  42. In the Solution Explorer, right-click the Debug folder -> Add -> New Item...
  43. Select Icon File. Set the Name to fliprotate90left and click Add
  44. Right-click the picture and click Delete Image Type
  45. Design the 16x16 icon as follows:
     
  46. Save and close the icon design
  47. In the Solution Explorer, right-click the Debug folder -> Add -> New Item...
  48. Select Icon File. Set the Name to fliprotate180 and click Add
  49. Right-click the picture and click Delete Image Type
  50. Design the 16x16 icon as follows:
     
    IDI_FLIPROTATE180
  51. Save and close the icon design
  52. From the Menus & Toolbars section of the Toolbox, click MenuStrip and click the form
  53. While the menu strip is still selected under the form, in the Properties window, click (Name) and type mnuMain
  54. Use the menu designer and/or the Items field of the Properties window to create the menu items as follows:
     
    Menu Top Sub Items/DropDownItems
    Text Name Text Name Image
    &File mnuFile &Open Picture... mnuFileOpenPicture openpicture.ico
        Separator    
        E&xit mnuFileExit  
     
    Picture Viewer
     
    Menu Top Sub Items/DropDownItems
    Text Name Text Name Image
    &Tools mnuTools &Flip mnuToolsFlip flip.ico
        &Mirror mnuToolsMirror mirror.ico
        Separator    
        &Rotate mnuToolsRotate  
        Flip && R&otate mnuToolsFlipRotate  
     
    Picture Viewer
     
     
    Sub Item Sub Items/DropDownItems
    Text Text Name Image
    Rotate 90 mnuToolsRotate90  
      180 mnuToolsRotate180 rotate180.ico
    Flip & Rotate 90 mnuToolsFlipRotate90  
      180 mnuToolsFlipRotate180 fliprotate180.ico
    Picture Viewer
     
    Picture Viewer
     
    Sub Item Sub Item Sub Items/DropDownItems
    Text Text Text Name Image
    Rotate 90 &Left mnuToolsRotate90Left rotate90left.ico
        &Right mnuToolsRotate90Right rotate90right.ico
    Flip & Rotate 90 &Left mnuToolsFlipRotate90Left fliprotate90left.ico
        &Right mnuToolsFlipRotate90Right fliprotate90right.ico
     

     
     
    Menu Top Sub Item
    Text Text Name
    &Tools Flip & Rotate  
      Separator  
      &Original Size mnuOriginalSize
      Ce&nter Image mnuCenterImage
      R&esize Form to Fit Picture mnuResizeForm
      O&ccupy Client Area mnuOccupyClientArea
      &Zoom mnuZoom
    Picture Viewer
  55. From the Common Controls section of the Toolbox, click PictureBox and click the form
  56. In the Properties window, change its characteristics as follows:
    BorderStyle: Fixed3D
    (Name): pbxViewer
    Dock: Fill 
  57. You can copy the following pictures and add them to a folder on your computer (for example the PictureViewer2\PictureViewer2\bin\Debug folder of the current project)
     
    Click to open Click to open
  58. In the Solution Explorer, right-click Form1.cs and click Rename
  59. Type PictureViewer.cs and press Enter twice
  60. Right-click the form and click View Code
  61. Declare a private Bitmap variable named bmpPicture
     
    namespace PictureViewer2
    {
        public partial class Form1 : Form
        {
            Bitmap bmpPicture;
    
            public Form1()
            {
                InitializeComponent();
            }
        }
    }
  62. Return to the form
  63. On top of the Properties window, click the arrow of the combo box and select PictureViewer
  64. Click the Events button Events and double-click Paint
  65. Implement the event as follows:
     
    private void PictureViewer_Paint(object sender, PaintEventArgs e)
    {
        if( bmpPicture != null )
        {
            pbxViewer.Image = bmpPicture;
        }
    }
  66. Return to the form
  67. Click Tools and double-click Flip
  68. Implement the event as follows:
     
    private void mnuToolsFlip_Click(object sender, EventArgs e)
    {
        if( bmpPicture != null )
        {
            bmpPicture.RotateFlip(RotateFlipType.RotateNoneFlipY);
            Invalidate();
        }
    }
  69. Return to the form, click Tools and double-click Mirror
  70. Implement the event as follows:
     
    private void mnuToolsMirror_Click(object sender, EventArgs e)
    {
        if (bmpPicture != null)
        {
            bmpPicture.RotateFlip(RotateFlipType.RotateNoneFlipX);
            Invalidate();
        }
    }
  71. Return to the form, click Tools, then click Rotate, then click 90 and double-click Left
  72. Implement the event as follows:
     
    private void mnuToolsRotate90Left_Click(object sender, EventArgs e)
    {
        if (bmpPicture != null)
        {
            bmpPicture.RotateFlip(RotateFlipType.Rotate270FlipNone);
            Invalidate();
        }
    }
  73. Return to the form, click Tools, then click Rotate, then click 90 and double-click Right
  74. Implement the event as follows:
     
    private void mnuToolsRotate90Right_Click(object sender, EventArgs e)
    {
        if (bmpPicture != null)
        {
            bmpPicture.RotateFlip(RotateFlipType.Rotate90FlipNone);
            Invalidate();
        }
    }
  75. Return to the form, click Tools, then click Rotate, and double-click 180
  76. Implement the event as follows:
     
    private void mnuToolsRotate180_Click(object sender, EventArgs e)
    {
        if (bmpPicture != null)
        {
            bmpPicture.RotateFlip(RotateFlipType.Rotate180FlipNone);
            Invalidate();
        }
    }
  77. Return to the form, click Tools, then click Flip & Rotate, then click 90 and double-click Left
  78. Implement the event as follows:
     
    private void mnuToolsFlipRotate90Left_Click(object sender, EventArgs e)
    {
        if (bmpPicture != null)
        {
            bmpPicture.RotateFlip(RotateFlipType.Rotate270FlipX);
            Invalidate();
        }
    }
  79. Return to the form, click Tools, then click Flip & Rotate, then click 90 and double-click Right
  80. Implement the event as follows:
     
    private void mnuToolsFlipRotate90Right_Click(object sender, EventArgs e)
    {
        if (bmpPicture != null)
        {
            bmpPicture.RotateFlip(RotateFlipType.Rotate90FlipX);
            Invalidate();
        }
    }
  81. Return to the form, click Tools, then click Flip & Rotate, and double-click 180
  82. Implement the event as follows:
     
    private void mnuToolsFlipRotate180_Click(object sender, EventArgs e)
    {
        if (bmpPicture != null)
        {
            bmpPicture.RotateFlip(RotateFlipType.Rotate180FlipX);
            Invalidate();
        }
    }
  83. Return to the form, click Tools and double-click Original Size
  84. Implement its event as follows:
     
    private void mnuToolsOriginalSize_Click(object sender, EventArgs e)
    {
        if (bmpPicture != null)
        {
            pbxViewer.SizeMode = PictureBoxSizeMode.Normal;
    
            mnuOriginalSize.Checked = true;
            mnuCenterImage.Checked = false;
            mnuOccupyClientArea.Checked = false;
            mnuZoom.Checked = false;
        }
    }
  85. Return to the form, click Tools and double-click Center Image
  86. Implement its event as follows:
     
    private void mnuToolsCenterImage_Click(object sender, EventArgs e)
    {
        if (bmpPicture != null)
        {
            pbxViewer.SizeMode = PictureBoxSizeMode.CenterImage;
    
            mnuOriginalSize.Checked = false;
            mnuCenterImage.Checked = true;
            mnuOccupyClientArea.Checked = false;
            mnuZoom.Checked = false;
        }
    }
  87. Return to the form, click Tools and double-click Occupy Client Area
  88. Implement its event as follows:
     
    private void mnuOccupyClientArea_Click(object sender, EventArgs e)
    {
        if (bmpPicture != null)
        {
            pbxViewer.SizeMode = PictureBoxSizeMode.StretchImage;
    
            mnuOriginalSize.Checked = false;
            mnuCenterImage.Checked = false;
            mnuOccupyClientArea.Checked = true;
            mnuZoom.Checked = false;
        }
    }
  89. Return to the form, click Tools and double-click Zoom
  90. Implement its event as follows:
     
    private void mnuZoom_Click(object sender, EventArgs e)
    {
        if (bmpPicture != null)
        {
            pbxViewer.SizeMode = PictureBoxSizeMode.Zoom;
    
            mnuOriginalSize.Checked = false;
            mnuCenterImage.Checked = false;
            mnuOccupyClientArea.Checked = false;
            mnuZoom.Checked = true;
        }
    }
  91. Return to the form
  92. From the Dialogs section of the Toolbox, click OpenFileDialog OpenFileDialog and click the form
  93. While the open file control is still selected under the form, in the Properties window, click (Name) and type ofdPicture
  94. Still in the Properties window for the open file control, click FileName and delete its string
  95. Still in the Properties window for the open file control, click Filter and type:
    Bitmap Files (*.bmp)|*.bmp|JPEG Files (*.jpg,*.jpeg)|*.jpg|GIF Files (*.gif)|*.gif|PNG Files (*.png)|*.png
  96. Save the form
  97. Still in the Properties window for the open file control, click DefaultExt and type bmp
  98. Save the form
  99. On the form, click File and double-click Open Picture
  100. Implement the event as follows:
     
    private void mnuFileOpenPicture_Click(object sender, EventArgs e)
    {
        if (ofdPicture.ShowDialog() == DialogResult.OK)
        {
            bmpPicture = new Bitmap(ofdPicture.FileName);
            Invalidate();
            mnuToolsOriginalSize_Click(sender, e);
        }
    }
  101. Return to the form
  102. Click Tools and double-click Exit
  103. Implement the event as follows:
     
    private void mnuFileExit_Click(object sender, EventArgs e)
    {
        Close();
    }
  104. Execute the application
  105. Open a picture and use the menu items
     
  106. Close the form and return to your programming environment
 

Home Copyright © 2007 FunctionX, Inc.