C# Screenshot Utility to Capture a Portion of the Screen

.NET Framework, VS 2019, Windows 10, Desktop

Image Courtesy blog.mozilla.org

So recently I wanted to create an app to capture the screen, not the whole screen but a portion of it. I asked help from the internet and this post is all about what I found. You can follow along even with .NET Core 3.0 Windows Forms Applications, I decided to stick with .NET Framework because .NET Core Designer is still at preview at the time of writing this. But the controls are same, I know because I tried it too.

What we are building.

The project is published to github.

nishanc/csharp-screenshot-winforms

Open up Visual Studio 2019 and click on Create a new project

Search for winforms and click on Windows Forms App the one with .NET Framework, and click Next (If you want to use .NET Core you need to download and install Windows Forms .NET Core Designer VSIX package.)

Give a name, location and click Create

Lets plan ahead. This will be our path of doing things. For this we need 3 forms.

Let’s create the first form, It’s fairly simple.

I have set some additional properties to make it more user and developer friendly. You can choose to omit those. You can do these changes via code or via the Properties panel.

//
// frmHome
//
this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.FixedSingle;
this.MaximizeBox = false;
this.Name = "frmHome";
this.StartPosition = System.Windows.Forms.FormStartPosition.CenterScreen;
this.Text = "Home";
// 
// btnCapture
//
this.btnCapture.Name = "btnCapture";
this.btnCapture.Text = "Capture";

Next, let’s design the area selection form. Create a new form SelectArea, remove the border by setting FormBorderStyle property to ‘None and copy following code to the SelectArea.cs

This will make a half transparent re-sizable form with a green border. Let’s add the ability to drag the form. To do this, add a panel to form, (I’m naming it as panelDrag), Make it slightly smaller than the form itself.

Add following properties to the panel to make it behave the way we want.

this.panelDrag.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom) 
    | System.Windows.Forms.AnchorStyles.Left) 
    | System.Windows.Forms.AnchorStyles.Right)));
this.panelDrag.AutoSizeMode = System.Windows.Forms.AutoSizeMode.GrowAndShrink;
this.panelDrag.Cursor = System.Windows.Forms.Cursors.SizeAll;
this.panelDrag.Name = "panelDrag";

Go to Events tab, scroll to MouseDown event.

Double Click on it to create the event and add the following code.

private void panelDrag_MouseDown(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left)
    {
        ReleaseCapture();
        SendMessage(Handle, WM_NCLBUTTONDOWN, HTCAPTION, 0);
    }
}

To make it work you need some additional code to put on top as follows.

Now you have a transparent re-sizable, draggable rectangle. Entire code can be found here.

Add another form (Save.cs in my case) and add a button to capture the X, Y coordinates (top, right) and Width, Height of the rectangle, so that in the next window; Save window can grab what’s behind this rectangle.

private void btnCaptureThis_Click(object sender, EventArgs e)
{
    this.Hide();
    Save save = new Save(this.Location.X, this.Location.Y, this.Width, this.Height, this.Size);
    save.Show();
}

At this point VS will complain that Save cannot take 5 parameters,

That’s because we haven’t told it yet. Let’s go ahead and do it now. Before that, add a pictureBox to Save form (I named it as pdCapture). This picture box has to grow with respect to the captured area size and when the picture box grows, form should grow too. To do that set following properties.

// 
// pbCapture
// 
this.pbCapture.SizeMode = System.Windows.Forms.PictureBoxSizeMode.AutoSize;
// 
// Save
// 
this.AutoSize = true;

Then add following code to Save.cs

We have modified the constructor to accept 5 parameters that was sent by SelectArea form. Now when you run it, your screenshot should appear.

Now, let’s save it. Add a button(btnSave in my case) and add following code to the click event.

private void btnSave_Click(object sender, EventArgs e)
{
    SaveFileDialog sfd = new SaveFileDialog();
    sfd.CheckPathExists = true;
    sfd.FileName = "Capture"; 
    sfd.Filter = "PNG Image(*.png)|*.png|JPG Image(*.jpg)|*.jpg|BMP Image(*.bmp)|*.bmp";
    if (sfd.ShowDialog() == DialogResult.OK)
    {
        pbCapture.Image.Save(sfd.FileName);
    }
}

Done! you can however shape it the way you want, this is just a skeleton. Thank you for coming this far, see you next time. 😊

Consider helping me out!