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.