Images

The Image class allows us to pull in image file assets and pass them to the Graphics object to draw them somewhere in our UI. The most common applications for this include a (mostly transparaent, so as to not be overtly distracting) background image (although you'll rarely find UI's that have actual image backgrounds, with the exception of perhaps a logo), or to use very small (typically squares, less than 50x50 pixels) images (what we refer to as "icons") to replace the display of UI elements.

For example, you may want to use a custom display for your buttons, including versions of them that represent being pushed down and another to represent them having been pressed. So rather than designing a literal Button object in your UI, you would instead cycle through those three Images instead, swapping them out depending on which MouseEvent is currently being triggered.

You could also use them to substitute text sign posts, for common links or actions to be taken, like going to the home page or clicking on this icon to begin downloading a file. You want to be careful not to go overboard with these icons, though, as you might end up confusing a user as to what the menu icon does, or allowing it to become overlooked. You can compensate for excessive icon use by carefully grouping together all of the "administrative" tools together in one place (like Facebook does), or simply as an established practice becomes more commonplace. Clicking the heart icon from various social media platforms represents liking or favoriting something, while thumbs up/down icons are commonly accepted as being clickable to represent liking/disliking something.

Which then transitions into the cautionary tale of designing some element of your UI that presents itself as something the user can manipulate, but either (1) doesn't actually response to their interaction or (2) doesn't produce some sort of announcement or visual cue that the interaction was registered or did anything at all. This can be a source of confusion and worse, frustration, when clicking a button to "Continue", for example, that doesn't allow the user to continue. No amount of clever back-end implementation will overshadow a user's refusal to interact with your software's UI!

Let's look at the simplest way to pull in an Image asset, and then draw it.

Graphics g = this.CreateGraphics();
Image myImage = Image.FromFile("happiness.jpg");

g.DrawImage(myImage, 0, 0, 200, 200);


DrawImage has various overloaded versions of it, including one where you pass a Point structure as the second argument, and one where you don't specify the width and height (respectively). The latter is likely the best way to ever draw images in your UI, as once you start utilizing the .NET Framework's image re-size functionality, you'll often end up with distorted images, especially if you try drawing an image in larger dimensions then it's source material. Unless the intention is to explicitly allow for an image to be re-sized by some action the user takes, it's best to make as many image copies as necessary for each of the sizes you would like represented. For example, "happiness_icon.jpg", "happiness_medium.jpg", and "happiness_large.jpg", should all be built to fixed dimensions that can be dynamically pulled in, depending on the dimensions the user has stretched the UI to fit.