Goals to demonstrate:

• The simplest Windows Forms application.
• Creating Windows Forms using Visual Studio Designer.
• Examples of using Windows Forms controls.
• Drawing using GDI+.
• Using dialog boxes in Windows Forms.
• Using a background worker thread.

Steps:

1. The simplest Windows Forms application
   • Create a new project (Visual C# / Windows / Empty Project).
   • Add a new item to the project - a class (menu Project / Add Class).
   • Replace the generated code with the following:
   using System;
   using System.Windows.Forms;
   
   public class HelloWorld : Form
   {
       public static void Main()
       {
           Application.Run(new HelloWorld());
       }
   
       public HelloWorld()
       {
           this.Text = "Hello World!";
       }
   }
   • Note that the created class is derived from the Form class - one of the fundamental classes of Windows Forms which provide functionality of a form (i.e. a window).
   • Try to compile the project.
     • Add a reference to Windows.Forms (menu Project / Add Reference / .NET / System.Windows.Forms).
     • Remove not used references to System.Data and System.Xml (right click on the reference).
   • Run the application. Note that two windows appear, the console and the main window of the application.
     • Change the output type of the project to 'Windows Application' (menu Project / <project_name> Properties / Application / Output type).
2. Creating Windows Forms application using Visual Studio - a simple calculator.
   • Create a new project (Visual C# / Windows / Windows Forms Application).
   • Investigate files with the source code:
     • Program.cs
     • Form1.cs (right click on it / View Code)
     • Form1.Designer.cs (notice the 'Windows Form Designer generated code' section with the InitializeComponent method)
       • All changes done on the form using the designer will be written here as C# source code.
   • Exercise: create a simple calculator:
     
   • Hints:
     • Change names of controls
       
     • Change sizes of controls (use the mouse or modify the Size property).
     • Check the functionality of the FlowLayoutPanel and TableLayoutPanel controls (from the Containers group on the Toolbox).
       • Use the Dock property.
     • Change the ComboBox.DropDownStyle property.
     • Double click the button to write code for the handler of the Click event:
       private void button1_Click(object sender, EventArgs e)
       {
           int left = 0, right = 0, result = 0;
           if (leftTextBox.Text.Length > 0)
           {
               left = int.Parse(leftTextBox.Text);
           }
           if (rightTextBox.Text.Length > 0)
           {
               right = int.Parse(rightTextBox.Text);
           }
           switch (operatorComboBox.Text)
           {
               case "-": result = left - right; break;
               case "+": result = left + right; break;
               case "*": result = left * right; break;
               case "/":
                   if (right == 0)
                   {
                       MessageBox.Show("Divide by 0", "Error", MessageBoxButtons.OK, MessageBoxIcon.Error);
                   }
                   else
                   {
                       result = left / right;
                   }
                   break;
           }
           resultTextBox.Text = result.ToString();
       }
   • Investigate the code in the 'Windows Form Designer generated code' section again to see all changes done using the designer.
   • Run the application and note the exception thrown when an incorrect number was input.
   • Add an ErrorProvider control and use it to inform about incorrect input values
     
     • Add an ErrorProvider control to the form. Name it 'errorProvider'.
     • Add the following method to the class:
       private void ValidatedInput(object sender, EventArgs e)
       {
           string s = (sender as TextBox).Text;
           if (s.Length > 0)
           {
               int res;
               if (!int.TryParse(s, out res))
               {
                   errorProvider.SetError(resultTextBox, "Not a number!");
                   return;
               }
           }
           errorProvider.SetError(resultTextBox, "");
       }
     • Set the ValidatedInput method as a handler of the Validated event for both the leftTextBox and rightTextBox controls. It can be done using the Properties window:
       
     • Run and test the application. Note that this solution does not prevent throwing an exception (the button can be clicked when an improper number is in a textbox):
       
     • To correct the problem, add a handler for the Validating event for both the leftTextBox and rightTextBox controls and use the following code:
       • Note that the handler for the Validated event is no longer needed.
3. Using controls - creating an image viewer:
   
   • Generate a Windows Forms application
   • Add a StatusStrip control (from the Menus & Toolbars group on the Toolbox)
     • Set the Name property to 'statusStrip'
   • Add a SplitContainer control (from the Containers group on the Toolbox)
   • Add a ListView control to the Panel1 of the SplitContainer
     • Set the Dock property to Fill
     • Set the Name property to filesListView
   • Add a Panel control (from the Containers group on the Toolbox) to the Panel2 of the SplitContainer
     • Set the Name property to 'imagePanel'
     • Set the Dock property to Fill
     • Set the BackColor property to Black
   • Compile and run the project.
     • Test changing size of the window and position of the splitter.
   • Add a MenuStrip control (from the Menus & Toolbars group on the Toolbox).
     • Note the difference in positioning the menu depending on the drop position. To anchor the menu to the window (not to any of panels), drop it on the status bar.
     • Create a 'Directory' group with options: 'Change', separator, 'Exit'.
     • Use '&' to underline a shortcut letter.
     • Use '-' to create a separator.
       
• Add a FolderBrowserDialog control (Toolbox: Dialogs).
  • Change the name to 'folderBrowserDialog'.
• Add an event handler for clicking the Directory / Change menu item:
  
  private void changeToolStripMenuItem_Click(object sender, EventArgs e)
  {
      if (folderBrowserDialog.ShowDialog() == DialogResult.OK)
      {
          try
          {
              filesListView.Items.Clear();
              DirectoryInfo di = new DirectoryInfo(folderBrowserDialog.SelectedPath);
              Environment.CurrentDirectory = folderBrowserDialog.SelectedPath;
              FileInfo[] files = di.GetFiles();
              foreach (FileInfo file in files)
              {
                  filesListView.Items.Add(file.Name);
              }
          }
          catch (Exception ex)
          {
              MessageBox.Show("Error during changing the directory:\n" + ex.Message, "Error",
                  MessageBoxButtons.OK, MessageBoxIcon.Error);
          }
      }
  }
  • Add necessary using statements to compile this code successfully.
• Add a ContextMenuStrip control
  • Set the Name property to 'filesContextMenuStrip'.
  • Add two items: 'Large Icons', 'List'. Note that the context menu is displayed as a window menu only for editing.
    
  • Add event handlers for Click event of both menu items and set appropriate display mode for the list view.
    
    private void largeIconsToolStripMenuItem_Click(object sender, EventArgs e)
    {
        filesListView.View = View.LargeIcon;
    }
    
    private void listToolStripMenuItem_Click(object sender, EventArgs e)
    {
        filesListView.View = View.List;
    }
  • Set the filesListView.ContextMenuStrip property to filesContextMenuStrip.
• Run the application and test the context menu appearing on the left panel of the window.
• Add a PictureBox control to the imagePanel
  • Set the Dock property to Fill
  • Set the Visible property to False
  • Set the Name property to 'pictureBox'
• Add a Label to the imagePanel
  • Set the Text property to 'Not an image!'
  • Set the ForeColor property to White
  • Set the Dock property to Fill
  • Set the TextAlign property to MiddleCenter
  • Set the AutoSize property to False
  • Change the Font property to Verdana 24pt, bold
  • Set the Visible property to False
  • Set the Name property to notImageLabel
• Modify the filesListView
  • Set the MultiSelect property to False
  • Add a handler for the SelectedIndexChanged event:
    private void filesListView_SelectedIndexChanged(object sender, EventArgs e)
    {
        ListView.SelectedListViewItemCollection selected = filesListView.SelectedItems;
        if (selected.Count == 0)
        {
            pictureBox.Visible = notImageLabel.Visible = false;
        }
        else
        {
            string file = selected[0].Text;
            try
            {
                pictureBox.Image = Image.FromFile(file);
                pictureBox.Visible = true;
                notImageLabel.Visible = false;
            }
            catch (Exception)
            {
                pictureBox.Visible = false;
                notImageLabel.Visible = true;
            }
        }
    }
• Run and test the application.
• Modify the statusStrip:
  • Add a StatusLabel item (using the Items property)
    • Set the Name property to 'nameToolStripStatusLabel'
    • Clear the Text property
    • Set the TextAlign property to MiddleLeft
    • Set the Spring property to true
  • Add another StatusLabel:
    • Set the Name property to 'sizeToolStripStatusLabel'
    • Clear the Text property
    • Set the BorderSides property to All
    • Set the BorderStyle property to SunkenOuter
• Modify the filesListView_SelectedIndexChanged method:
  private void filesListView_SelectedIndexChanged(object sender, EventArgs e)
  {
      ListView.SelectedListViewItemCollection selected = filesListView.SelectedItems;
      if (selected.Count == 0)
      {
          pictureBox.Visible = notImageLabel.Visible = false;
  
          nameToolStripStatusLabel.Text = "";
          sizeToolStripStatusLabel.Text = "";
      }
      else
      {
          string file = selected[0].Text;
          try
          {
              pictureBox.Image = Image.FromFile(file);
              pictureBox.Visible = true;
              notImageLabel.Visible = false;
  
              nameToolStripStatusLabel.Text = Environment.CurrentDirectory + '\\' + file;
              sizeToolStripStatusLabel.Text = string.Format("{0} x {1}",
                  pictureBox.Image.Width, pictureBox.Image.Height);
              imagePanel.AutoScrollMinSize = new Size(pictureBox.Image.Width, pictureBox.Image.Height);
          }
          catch (Exception)
          {
              pictureBox.Visible = false;
              notImageLabel.Visible = true;
          }
      }
  }
  • Note the line setting the AutoScrollMinSize property of the imagePanel. It is enough to get a perfect scrolling support.
4. Drawing and using dialog boxes.
   
   • Add a new form to the project
     • Set the name of the class to 'DrawingForm'
     • Add a Drawing item to the menu. In response for the Click event show the DrawingForm:
       
       private void drawingToolStripMenuItem_Click(object sender, EventArgs e)
       {
           DrawingForm drawingForm = new DrawingForm();
           drawingForm.ShowDialog();
       }
     • Run and test the application.
     • Modify the DrawingForm:
       • Set the StartPosition property to CenterParent.
       • Set the ShowInTaskbar property to False.
       • Set the FormBorderStyle property to FixedDialog.
       • Set the MinimizeBox property to False.
       • Set the MaximizeBox property to False.
   • Drawing in the form.
     • Add a handler for the Paint event for the DrawingForm:
       
       private void DrawingForm_Paint(object sender, PaintEventArgs e)
       {
           e.Graphics.FillRectangle(Brushes.White, 0, 0,
               ClientRectangle.Width, ClientRectangle.Height);
       
           Font font = new Font("Verdana", 52, FontStyle.Bold);
           Brush specialBrush = new LinearGradientBrush(ClientRectangle,
              Color.Yellow, Color.Red, 45, false);
           StringFormat sf = (StringFormat)StringFormat.GenericDefault.Clone();
           sf.Alignment = StringAlignment.Center;
           sf.LineAlignment = StringAlignment.Center;
           e.Graphics.DrawString("I'm painting!", font, specialBrush,
              ClientRectangle.Right / 2, ClientRectangle.Bottom / 2, sf);
       }
   • Add an animation of a moving ball.
     • Add the following members to the DrawingForm class:
       const int ballRadius = 50;
       Point ballCenter = new Point(ballRadius, ballRadius);
       int ballSpeed = 10;
     • Add a Timer control to the DrawingForm (Toolbox: Components). Add a handler for the Timer's Tick event:
       private void timer_Tick(object sender, EventArgs e)
       {
           ballCenter.X += ballSpeed;
           if (ballCenter.X < ballRadius)
           {
               ballCenter.X = ballRadius;
               ballSpeed = Math.Abs(ballSpeed);
           }
           else if (ballCenter.X > ClientRectangle.Width - ballRadius)
           {
               ballCenter.X = ClientRectangle.Width - ballRadius;
               ballSpeed = -Math.Abs(ballSpeed);
           }
           Invalidate();
       }
     • Add the following code and the end of the DrawingForm_Paint method:
       
       e.Graphics.FillEllipse(Brushes.Black,
           ballCenter.X - ballRadius, ballCenter.Y - ballRadius,
           2 * ballRadius, 2 * ballRadius);
     • Add a handler for the DrawingForm.Load event and start the timer in it:
       private void DrawingForm_Load(object sender, EventArgs e)
       {
           timer.Start();
       }
     • Run and test the application. Note the ugly flickering during animation.
   • Prevent flickering
     • Add the following code to the DrawingForm_Load method:
       
       DoubleBuffered = true;
5. Add options for changing the displayed image to grayscale.
• Add a 'Grayscale' menu item with 3 subitems: 'Slow', 'Slow in Background', and 'Fast':
  
• In the handler of the Click event of the 'Slow' item add the following code:
  private void slowToolStripMenuItem_Click(object sender, EventArgs e)
  {
      if (pictureBox.Image != null)
      {
          Cursor = Cursors.WaitCursor;
          Bitmap bmp = new Bitmap(pictureBox.Image);
  
          Color clr;
          int v;
          for (int x = 0; x < bmp.Width; x++)
          {
              for (int y = 0; y < bmp.Height; y++)
              {
                  clr = bmp.GetPixel(x, y);
                  v = (int)((clr.R * .299) + (clr.G * .587) + (clr.B * .114) + 0.5);
                  bmp.SetPixel(x, y, Color.FromArgb(v, v, v));
              }
          }
  
          pictureBox.Image = bmp;
          Cursor = Cursors.Arrow;
      }
  }
  • Note that the application is not responding during processing the image.
• As a solution for the 'not responding' problem, try to make all calculations in the background thread.
  • Add a new member to the class:
    Bitmap bmpToGrayscale = null;
  • Add a BackgroundWorker component to the form (Toolbox: Components)
    • Set the Name property to 'backgroundWorker'
    • Add an event handler for the DoWork event (here the image processing will be done): 
      private void backgroundWorker_DoWork(object sender, DoWorkEventArgs e)
      {
          Color clr;
          int v;
          for (int x = 0; x < bmpToGrayscale.Width; x++)
          {
              for (int y = 0; y < bmpToGrayscale.Height; y++)
              {
                  clr = bmpToGrayscale.GetPixel(x, y);
                  v = (int)((clr.R * .299) + (clr.G * .587) + (clr.B * .114) + 0.5);
                  bmpToGrayscale.SetPixel(x, y, Color.FromArgb(v, v, v));
              }
          }
      }
    • Add an event handler for the RunWorkerCompleted event (this method will be call when the DoWork finishes):
      private void backgroundWorker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
      {
          pictureBox.Image = bmpToGrayscale;
          slowInBackgroundToolStripMenuItem.Enabled = true;
      }
  • Start grayscaling using a background thread in response for the Click event on the menu item:
    private void slowInBackgroundToolStripMenuItem_Click(object sender, EventArgs e)
    {
        if (pictureBox.Image != null)
        {
            bmpToGrayscale = new Bitmap(pictureBox.Image);
            slowInBackgroundToolStripMenuItem.Enabled = false;
            backgroundWorker.RunWorkerAsync();
        }
    }
  • Test the application. Note that the second option in the Grayscale menu allows to continue working with the application (e.g. resizing or moving the window) during calculations.
  • As an exercise, try to add a progress bar to the status bar informing about the progress of image processing.
• The above method of grayscaling the image needs to modify colour of each pixel of the image. Such method must be very time consuming for large images. Fortunately, there is another way of grayscaling an image.
  • Add a handler for the Click event of the 'Fast' menu item:
    private void fastToolStripMenuItem_Click(object sender, EventArgs e)
    {
        if (pictureBox.Image != null)
        {
            Bitmap bmp = new Bitmap(pictureBox.Image);
    
            Graphics g = Graphics.FromImage(bmp);
            ColorMatrix colorMatrix = new ColorMatrix(new float[][]
            {
                new float[] {.299f, .299f, .299f, 0, 0},
                new float[] {.587f, .587f, .587f, 0, 0},
                new float[] {.114f, .114f, .114f, 0, 0},
                new float[] {0, 0, 0, 1, 0},
                new float[] {0, 0, 0, 0, 1}
            });
    
            ImageAttributes attributes = new ImageAttributes();
            attributes.SetColorMatrix(colorMatrix);
    
            g.DrawImage(pictureBox.Image,
                new Rectangle(0, 0, pictureBox.Image.Width, pictureBox.Image.Height),
                0, 0, pictureBox.Image.Width, pictureBox.Image.Height,
                GraphicsUnit.Pixel, attributes);
    
            g.Dispose();
            pictureBox.Image = bmp;
        }
    }

[Source code]