Get Picture Information inside a StatusStrip

In this brief tutorial I will show you how you can get basic information from a picture and display them inside StatusLabels on a StatusStrip control.

If you are using C# 2010 Express, like I am, you will notice that it's very easy to do this. First, set up a new project and on the main form add a pictureBox, a button, and a statusStrip. On the statusStrip you need to add 4 statusLabels in which we will display the Picture's Pixel Size, the Picture's KB Size, the Picture's Path from where it was loaded and the Cursor Coordinates on the PictureBox.

At first we will set up some initial text for the statusLabels and set up some borders between them.

public Form1()
{
InitializeComponent();
//we set the text for the initial statusStrip statusLabels
picSize.Text = "Picture Pixel Size: "; //will display the picture's pixel size
picSizeKB.Text = "Picture KB Size: "; //will display the picture's size in KB
cursorPosition.Text = "Cursor Position: "; //will display the position of the cursor on the picture
filePath.Text = "Picture Path: "; //will display the path from where the picture has been opened
//creates a Right side border for every statusLabel on the statusStrip only to separate them
picSize.BorderSides = ToolStripStatusLabelBorderSides.Right;
picSize.BorderStyle = Border3DStyle.RaisedOuter;
picSizeKB.BorderSides = ToolStripStatusLabelBorderSides.Right;
picSizeKB.BorderStyle = Border3DStyle.RaisedOuter;
cursorPosition.BorderSides = ToolStripStatusLabelBorderSides.Right;
cursorPosition.BorderStyle = Border3DStyle.RaisedOuter;

//the text displayed on the button
button1.Text = "Load Picture";

//note that all text and borders we set up earlier can be easily
//setup from the respective control's proprieties panel
}

Then we will double click the button that we have added to add a Click event which will allow us to load a picture inside the pictureBox.

private void button1_Click(object sender, EventArgs e)
{
//when clicking the button we open a window that allows us
//to select the picture we want to load inside the picture box
OpenFileDialog openPic = new OpenFileDialog();
//this Filter allows us to open only JPG files
openPic.Filter = "Image Files(*.jpg)|*.jpg;";
if (openPic.ShowDialog() == DialogResult.OK)
{
pictureBox1.Image = new Bitmap(openPic.FileName);
}
//We update the picSize label to show the pixel size of the picture we opened
picSize.Text = "Picture Pixel Size: " + pictureBox1.Image.Width + " X " + pictureBox1.Image.Height;
//The FileInfo is located in IO framework class, so if you haven't called it yet, you should
//before the namespace you will have to add the line "using System.IO;"
//We need this class to get the size of the picture we opened
FileInfo fi = new FileInfo(openPic.FileName);
//Displays the size of the picture in KB
//We have to divide it by 1024 as the Length method calculcates the class in bytes
picSizeKB.Text = "Picture KB Size: " + fi.Length / 1024 + " KB";
//Updates the file path
filePath.Text = "File Path: " + openPic.FileName;
}

Last, we will need to set up a MouseMove event on the Picture box to update the cursor's coordinates.

private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
//An if will be used as we don't want anything to be updated unless a picture is loaded
//inside the if statement we check to see if an image is loaded
if (pictureBox1.Image != null)
{
//We add a MouseMove event to the picturebox
//to display the mouse coordinates on the picture
cursorPosition.Text = "Cursor Poistion: (" + e.X + " : " + e.Y + ")";
}
}

In case you will no longer see some of the Status Labels upon updating them, it means that the form is too small and there is no room to display them. Enlarging the form should fix the problem.

You should obtain something like in the bellow screenshot:

Button Effects Using Mouse Events

Say for example you want to create a button that when the mouse cursor hovers over it the button gets bigger and highlighted. Well, in C# if you want to make the button bigger one way to do it would be to use two Mouse events, MouseEnter and MouseLeave.

First you'll have to set the size and location of your button. Then, in the MouseEnter event assigned to the button you'll have to change the location of the button (usually it's about 4-10 pixels on both axis) and then you'll also have to increase the button's size 2 times the amount of pixels you moved it (on both axis - this way the button will remain in the same position). Finally, in the MouseLeave event (also assigned to the button) you will have to return the button to its original location and size.

Following is an example:

public Form1()
{
InitializeComponent();
//sets the size of the form
this.Size = new Size(500, 500);
//sets the Location of the buton
button1.Location = new Point(100, 100);
//sets the suze of the button
button1.Size = new Size(100, 35);
}

private void button1_MouseEnter(object sender, EventArgs e)
{
//updates the button's Location
button1.Location = new Point(96, 96);
//updates the button's Size
button1.Size = new Size(108, 43);
}

private void button1_MouseLeave(object sender, EventArgs e)
{
//returns the button to its initial location
button1.Location = new Point(100, 100);
//returns the button to its normal size
button1.Size = new Size(100, 35);
}

Display Cursor Coordinates

If you want to display your cursor's coordinates on a form or a control, you can use the MouseMove event assigned to the specific control or form. Once you've added the MouseMove event, all you'll have to do is update the coordinates inside the event.

Bellow is an example that will show you how to display the cursor's coordinates on a form into a label:

public Form1()
{
InitializeComponent();
//sets the size of the form
this.Size = new Size(500, 500);
//initial text to be displayed in the label
label1.Text = "move your mouse over the form";
}

private void Form1_MouseMove(object sender, MouseEventArgs e)
{
//update the label text
label1.Text = "( " + e.X + ", " + e.Y + " )";
}

Resizing a C# Control

Resizing a C# control as the entire form is resized is very easy actually. All you have to do is set up a resize event for the form and inside the event tell the control to update its size according to the form’s size.

Bellow is an example on how to resize a picture box when the form is resized. First add a picture box to your form.

public Form1()
{
InitializeComponent();
//the size of the form
this.Size = new Size(400, 400);
//the location of the pictureBox's top right corner
pictureBox1.Location = new Point(10, 10);
//the width and height of the picture box.
//ClientSize gets the width and height of the form's inner area
//from the ClientSize Width and Height we substarct 20
//(twice the gap from the left side)
pictureBox1.Width = ClientSize.Width - 20;
pictureBox1.Height = ClientSize.Height - 20;
}

private void Form1_Resize(object sender, EventArgs e)
{
//while resizing we constantly update the width and height of the pictureBox
pictureBox1.Width = ClientSize.Width - 20;
pictureBox1.Height = ClientSize.Height - 20;
}