Introduction to XML

Printing This Lesson

Select what you’d like to include when you print, and then click the Print Lesson button:

Text, images and activities (IE users only)

Text and images

Text only

Saving This Lesson

For instructions on saving this lesson (shown below), please select the browser you're using.

Chrome

Firefox

IE 11

Safari

Lesson 9 - Exploring XML Graphics - Chapter 1

Introduction

Welcome back! This lesson is all about graphics: creating, storing, loading, and displaying them in browsers or other programs. Given the importance and prevalence of images and multimedia in today's world, you might be surprised that XML doesn't pay all that much attention to graphics. In fact, most XML books (and XML standards and committees) focus on text and programming rather than graphics.

There are three reasons for this:

• Most authors specialize in words.
• Most programmers concentrate on code.
• It's complicated to describe images in an XML-style markup language.

But today you'll see how to use the Inkscape program to efficiently generate XML's SVG (Scalable Vector Graphics) code. SVG, a subset of XML, can store descriptions of relatively simple illustrations.

And as for photographic images . . . these are stored in separate files, and I'll show you how to load them into a browser page using the img element. When a browser comes upon code like <img src="Grand Canyon.svg">, it loads the photo from the src (source)—the  location where that photo is stored.

Finally, we'll turn our attention to improving the appearance of the cookbook program, changing it from this:

Before

To this:

After our ministrations

Ready? I'll meet you in Chapter 2, where we'll start with a general introduction to SVG!

Chapter 2

Introducing SVG

You can use XML's graphics language, SVG, to display drawn shapes, lines, and other visuals. SVG is particularly suited to generating these kinds of items:

• Diagrams
• Special text effects (like displaying the characters along a curved line)
• Charts
• Graphs
• Geometric illustrations
• Cartoon-like drawings

Browsers create vector graphics on the fly by interpreting code that specifies size, position, shape, color, and so on. In other words, a browser translates the specifications in the SVG code file into an image in real time.

This is fundamentally different from loading a bitmap—a graphics file that already contains a complete copy of the image. Photos you take with a camera are always stored as bitmaps—it would be essentially impossible to describe a field of flowers in code.

Let's experiment with SVG a little.

Trying Your First SVG

Here's an example of simple SVG code that draws a blue circle with a light green outline:

<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg">  
<circle cx="200" cy="150" r="110"     
fill="blue" stroke-width="9pt" stroke="lightgreen" />
</svg>

And here's what it looks like when you save this code as an .svg file (such as test.svg), and then right-click it in File Explorer, and choose Open with Internet Explorer:

SVG rendered by IE

Before we move on, see if you can complete today's XML Challenge . . .

XML Challenge!!

XML Challenge!

Try modifying the previous code to make the circle half as big, with a black center and a red border (stroke), so it looks like this:

Black circle

Here's the revised SVG code that produces a smaller black circle with a red border:

<?xml version="1.0" encoding="UTF-8" ?>


<svg version="1.0" xmlns="http://www.w3.org/2000/svg">


   <circle cx="200" cy="150" r="55"


     fill="black" stroke-width="9pt" stroke="red" />


</svg>

Understanding Scalability

SVG are scalable graphics. This means that we can resize them with no bad effects. (If you enlarge a bitmap graphic, it begins to pixelate—you can see the individual squares so it looks like a picture projected onto a brick wall. It gets blurry, too.)

We've discussed that you can describe height, width, and position two different ways: using fixed units of measurement (such as inches) or using relative units (percent). SVG works the same way. If you try loading the previous code in a browser, no matter how you resize the browser, the SVG stays the same size.

But if you make one little change to the code—change the radius (size) of the circle to a percent rather than a fixed number, your image will scale. It'll get larger when you enlarge the browser window, and smaller if you shrink the browser.

Let's try it. Replace the previous code with this scalable version:

<?xml version="1.0" encoding="UTF-8" ?>


<svg version="1.0" xmlns="http://www.w3.org/2000/svg">


   <circle cx="200" cy="150" r="10%"


     fill="blue" stroke-width="9pt" stroke="lightgreen" />


</svg>

Now when you try loading this version, resizing the browser also resizes the SVG circle—so it's always 10% of its container. Also notice that because you left the stroke border 9 points (a fixed size), the border does not resize.

Several shapes are built into SVG, and circle is one of them. The cx,cy coordinates describe where to position the drawing relative to the upper-left corner of the browser. The r (radius) value determines the size of the circle, the fill value is the color in the center of the circle, and the stroke is the outline.

And here's the good news: There's a powerful free drawing program called Inkscape that does for vector graphics what VB does for programming—writes the code for you! So rather than typing in circle cx="200" cy="150" r="110" fill="blue", for instance, you just draw a circle and click a color. Much easier.

Inkscape SVG

I won't show you the SVG code that creates this drawing, because the code is 415 lines long! The moral of this story is: Don't do SVG by hand. Use Inkscape. (Other programs that can do SVG include Adobe Illustrator and Corel Draw.)

Installing Inkscape

You'll find the link to Inkscape in the Supplementary Material section for this lesson. To install Inkscape on your computer, click this download icon:

Inkscape download icon

It may take a few seconds, but don't click anything on the Web page. Your browser will soon display your download options with a message box like this one in IE:

 
Download options

Now click the Save button, or if you want to directly install it, click Run. Inkscape's installer will leave an icon on your desktop.

Using Inkscape

Let's try using Inkscape to create a button. I'll show you how to do it first.

Chapter 2, Video 1: "How to Create XML Graphics Using Inkscape", TRANSCRIPT

Let's use Inkscape to create a button graphic. First, press the plus key a couple of times to enlarge the work space, and then press F4 to change your mouse pointer into a rectangle tool, and drag it into roughly a button shape. You can choose any of these colors you like for the background, but remember one rule. When you're creating a button or other object that you're going to add text to, you want the text to be readable, so the color should be pretty light. I'm going to go here with mint green.

Now, let's add a 3-D effect to the button background. Go up here to Filters, choose Bevels, and Bright Metal. I like that effect. If you don't, you're of course free to choose whatever pleases you. This is your button. Now, we'll add some text. Click the A over here and then click somewhere in the button. It doesn't matter particularly where you click because we'll resize and reposition the caption later.

Type in the caption and then click up here where it says Text, Text and Font to open a dialog box, and you can now change the font to whatever you like. When you click on one, you see a sample. One of my favorite fonts is Garamond. It's fairly old, but I think it's very readable and really quite good-looking. So I'm going to click the Apply button here to change it up on the button, and then click Close.

Now we're going to resize and reposition our caption, so press F1 to select the button caption, and then pull on these corners. You can resize it and also change the aspect ratio any way you want. We want it to retain the original aspect ratio, so hold down the Control key and then it will simply enlarge rather than distort. I think this would be about a good size for it, so we can release the button and the Control key, and now all you do to position it and center it is to use your arrow keys on the keyboard here. I think that looks pretty well-centered.

One last thing. There's a big debate going on right now about the use of three dimensions and shadows and so forth. Microsoft has taken the position that we should go back to the 1950s and eliminate all those different effects. Their Windows 8 graphics scheme is pretty elementarylooking, and I simply prefer the more realistic graphic. But again, it's always your choice what you want to do.

I'm going to add a Drop Shadow here, which will make things even more dimensional. So go up here where it says Filters and go down and choose Shadows and Glows, and then Drop Shadow. Now, you can change the shadows, but I think the default here looks just fine, so I'll click Apply. If you keep clicking Apply, you're going to get more and more shadowing, but I think the default is subtle and good, so click Close, and there you have it. At this point, you can go on to save your button to the hard drive.

END TRANSCRIPT

Click here to download the video transcript 

Your turn! Follow these steps to create your own button:

1. Open Inkscape, and press the plus key (+) a few times to zoom in.
2. Press F4 to activate the rectangles and squares tool.
3. Drag your mouse to create a rectangle about the same shape as the Import or Delete buttons on the cookbook program.

Button-shaped rectangle

4. Click to release the rectangle.
5. Click a color you like in the rainbow of color samples at the bottom of Inkscape. Your button will fill with that color. (Choose a light color so the button's caption will be easily readable.)
6. Choose Filters > Bevels > Bright Metal. This creates a 3-D button effect.
7. Click the Text tool (the capital A in the toolbar on the left side). If you don't see the Text tool, drag Inkscape's lower-right corner to make the program taller.
8. Click inside the button to specify where the text will go, and type the word Import.
9. Choose Text > Text and Font.
10. In the Text and Font dialog box, choose a font family that appeals to you.
11. Click Apply, and then Close.
12. Press F1 to activate the Selection (arrow) tool.
13. While pressing CTRL, drag a corner of the text to make it large enough to look good within the button. (CTRL preserves the aspect ratio.)
14. Release the mouse button.
15. Press the arrow keys to center the Import text inside the button.
16. With the text still selected, choose Filters >Shadows And Glows > Drop Shadow.
17. Click Apply, and then click Close.

Text drop shadow

Now follow these steps to save your button twice into the C:\XML L9 Finished\SVG folder. You'll end up with the two different kinds of graphics files: an .svg version and a .png version (a bitmap format).

1. Choose File > Save.
2. Click the down-arrow in the Save In field at the top of the dialog box. You now see various folders on your hard drive.
3. Locate and then double-click C:\XML L9 Finished\SVG as the target folder.
4. Type ImportButton1 as the filename.
5. Click Save. The dialog box closes.
6. Choose File > Export Bitmap.
7. Ensure that the filename is ImportButton and that the target folder is is C:\XML L9 Finished\SVG.
8. Click the Export button in the Export Bitmap dialog box.
9. Click the red X to close the dialog box. (We're using the name ImportButton1 to avoid overwriting the buttons named ImportButton in the C:\XML L9 Finished\SVG folder that you downloaded in Lesson 5.)

Now let's see what the button looks like. Here are the steps:

1. When IE interprets the .svg file you just saved, use Windows explorer to locate and right-click the ImportButton.svg file in the C:\XML L9 Finished\SVG folder.
2. In the context menu, choose Open With > Internet Explorer. You should see your button interpreted by IE something like this:

IE's interpretation of the SVG code

1. Right-click the button in IE, and choose View Source from the context menu to appreciate all the SVG code that Inkscape wrote for you.

Saving Simpler SVG

By default, Inkscape saves its own version of SVG. This normally isn't a problem because the file contains several references that provide instructions about how to interpret any unusual, ambiguous, or Inkscape-specific code. One such reference is this line:

xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

The xmlns refers to a namespace, which we'll cover in the next lesson. For now, just understand that a line of code like the one above provides a unique Web page address to differentiate what Inkscape means by zoom or pageshadow from some other graphics program's meaning of those terms.

For example, this code in the same .svg file references the inkscape namespace:

inkscape:pageopacity="0.0"


      inkscape:pageshadow="2"


      inkscape:zoom="0.7"


      inkscape:cx="375"


      inkscape:cy="520"

Such data can also make it possible to load this .svg file into Inkspace itself, and display the graphic in the correct location, zoom level, and so on.

But if you want to save an Inkspace graphic as ordinary, plain-vanilla SVG, just choose File > Save As, and in the Save as type box, click the down-arrow and click Plain svg (*.svg), like this:

Plain SVG

Chapter 3

Sending SVG to Browsers

How do you display SVG in a browser? One way is to just stick the SVG code directly into the HTML code of a Web page, like this:

<html>


<body>


<svg


   xmlns="http://www.w3.org/2000/svg"


<svg height="200" width="400">


  <ellipse cx="250" cy="120" rx="110" ry="80"


  style="fill:lightblue" />


</svg>


<h1>SVG Example</h1>


</body>


</html>

You define an SVG ellipse shape's size and position using the following parameters:

• cx specifies the x coordinate (horizontal location on the Web page) of the center of the ellipse.
• cy specifies the y coordinate (vertical location) of the center of the ellipse.
• rx specifies the horizontal radius (how wide) the ellipse will be.
• ry specifies the vertical radius (how tall).

But remember that Inkscape can generate huge SVG files. The relatively simple ImportButton.svg you created in Chapter 2 is 171 code lines long! Embedding all that SVG code in a Web page would certainly make the HTML less readable and harder to modify.

One good alternative to embedding is to just provide a reference to a separate file that contains the SVG code (an .svg file). That only requires a single line of code in the HTML. Here's how to use the HTML img element to import an .svg file:

 <html>


<body>


<img src="ImportButton.svg">


</body>


</html>

This img element just specifies where the SVG code is located. In this example, you don't even need to provide a full filepath because your ImportButton.svg file is stored in the same C:\XML L9 Finished\SVG directory as the .htm file that references it.

To test this code, do this: Using Windows Explorer, double-click test.htm in your C:\XML L9 Finished\SVG folder. IE opens and displays the ImportButton.svg image (because that .svg file was stored in the SVG folder earlier in this lesson).

Employing CSS

When you use CSS with SVG, you gain the advantage of CSS formatting capabilities. Remember, CSS allows you to specify qualities that you want applied to an entire HTML file, and this can mean that the CSS rules (such as the typeface you used for headlines) will be enforced all across the website.

For example, when using CSS with SVG, you could state that you want all circles in the file rendered yellow with a blue border. Here's what that CSS looks like embedded within an HTML file:

 <html>


<body>


<style>


  circle {


            fill: yellow;


            stroke: blue;


  }


</style>


<svg>


  <circle cx="60" cy="60" r="35" />


</svg>


</body>


</html>

Notice that we're not using a separate CSS file in this example. It's perfectly legal to embed CSS right into an HTML Web page code by using the <style> element. In this example, any time the browser comes upon an <svg> circle element, it'll use the yellow and blue colors specified by the CSS style rule.

Viewing and Modifying Web Page Code

If you load an .htm file into IE, you can right-click the circle and choose Inspect Element from the context menu. You'll see a window open where you can view and modify your HTML code and other types of code such as SVG and CSS.

But the Chrome and Maxthon browsers offer a superior inspector with more features and tools. Right-click our SVG circle in one of these browsers, and you'll open the Developer Tools dialog box shown here. Trying out different colors, for example, is as easy as picking from this list. You'll see the result immediately:

SVG Developer tools

Using a Separate CSS Style Sheet

If you prefer to put both your CSS and SVG code into external files (rather than embedding or referencing an SVG file in the HTML), here is the code in a CSS style file named Circle.css in your C:\XML L9 Finished\SVG folder:

  circle {


     fill: lightcoral;


     stroke: blue;


  }

And the following code is in an SVG file named External.svg (also in the same C:\XML L9 Finished\SVG folder):

<?xml-stylesheet type="text/css" href="Circle.css" ?>


<svg xmlns="http://www.w3.org/2000/svg"


    xmlns:xlink="http://www.w3.org/1999/xlink">


   <circle cx="200" cy="150" r="110"  stroke-width="10pt"  />


</svg>

Now, using Windows Explorer, right-click the filename External.svg, and choose Open With > Internet Explorer in the context menu. You'll see your coral circle with a fat blue stroke.

Using Bitmaps

We discussed how computers employ two different kinds of graphics:

Vector images are calculated drawings like the SVG examples you've worked with in this chapter. They're fundamentally cartoon-like drawing, using lines, basic shapes, and fill colors. More sophisticated vector drawings make use of techniques like opacity, gradients (a gradual blend of colors or shades), filters, and simple animation. But even when sophisticated, vector graphics can never be photographic in their detail.

Bitmaps are photos. They're stored images that already contain all the necessary visual information and don't have to be calculated. What's more, bitmaps are photo-realistic—they can contain far more visual information than a vector graphic.

Chapter 4

Polishing the Cookbook

Let's take a brief break from coding the Cookbook program today. Instead, we're going to focus on polishing its UI. This lesson is about graphics, so that's our excuse to take a short detour from programming strictly defined. (If it were up to me, though, designing an efficient and attractive UI would be right up there with debugging as an essential part of programming!)

VB provides an editor that's superior in various ways, one of which is its variety of graphics tools that other languages omit. Software writers—especially amateurs—often ignore the UI. Their program greets the user with a forbidding, gunship-gray surface, relieved only here and there by a few slapdash icons. We can do better.

Of course, taste is personal, so choose whatever visual theme seems right to you for the cookbook program. You can make it rustic, space age, treasure chest, or whatever. But it usually helps to have an overall concept in mind as you choose the graphics.

Using Graphics Programs

Where can you find graphics? Anywhere on the Internet. When you find a picture or design—something you want to use as a form or button background—press the PrtScn button. That saves the whole screen into the Windows clipboard. Then just paste it into your photo-editing program and, if necessary, crop it. (Or you can right-click an image in a Web page, and then choose Copy Image.)

If you don't have a favorite photo-editing program, go ahead and use the simple Paint program built into Windows. Follow these steps:

1. Open the Search tool. If you're using Windows 7, right-click the Windows icon and click Search. In Windows 8, press the Windows key.
2. Type mspaint.
3. Click the paint icon to open the Paint program. Leave it open—we'll use it soon!

Or, you can use Windows Explorer to open Paint. Double-click the Paint file in this folder:

c:\program data\microsoft\windows\start menu\programs\windows accessories

Importing and Cropping

One of the most important techniques used by graphic artists is cropping. It means that you cut one or more sides off an image. Here are some reasons you might crop an image:

• Change its shape (aspect ratio)
• Change its size
• Change its orientation (landscape versus portrait)
• Emphasize part of the picture
• Eliminate part of the picture
• Improve the composition

Let's see how to do it. Take a look at this video:

Chapter 4, Video 1: "Learning How to Crop Photographs", TRANSCRIPT

Every graphics program has a crop tool that allows you to chop off one or more of the sides of a picture. This is one way to improve the composition, or to get rid of distractions and so on. And this particular picture I've loaded into the Windows Paint program. And you can find it in the XML L9 Finished folder in the Cookbook folder if you want to practice cropping here.

Now, if you look at this picture of a lake, you can see that there's something going on down here. It's hard to tell, though. It looks like maybe chairs and table. I don't know what this circular thing is. But anyway, cropping that out of this picture would be a good idea. It doesn't add anything. It is just confusing, and it's not exposed enough to have any meaning.

So the first thing you do is click the Select button. It can be found on the Home tab of the Paint program. Now you drag your mouse to indicate where you want the picture retained, and anything outside of the selection area will be cropped off. Notice that I drag the mouse with this Selection tool here to down to about here, thereby eliminating this, and all you do then is click the Crop button, and it's gone from the picture. You've now cropped off these distractions, resulting in a stronger and more coherent composition.

END TRANSCRIPT

Click here to download the video transcript 

Think you got it? Go ahead and give it a try. If you have any questions, pop into the Discussion Area and let me know.

When you're ready, let's talk about the rule of thirds . . .

Understanding the Rule of Thirds

Many photo-editing programs include an overlay of four lines that divide the picture into nine equal squares:

Rule of Thirds grid

The rule of thirds is a famous and very useful composition technique. Here's how to use it:

1. Divide your photo into thirds (just imagine these lines if a grid overlay isn't available in your graphics program). It's also possible that your camera includes the grid so you can apply the rule when first shooting the picture.
2. Find the point of interest, the place in the image that most people would be attracted to (a face, an explosion, an eye, a single brilliant flower, or in our photo, a bright break in the clouds).
3. Crop the image so the point of interest is located at any of the four places where the grid lines intersect.
4. Drag the little handles around the picture to adjust the crop until the point of interest is near an intersection, like this:

Bright light now at an intersection

5. Double-click the photo (or whatever triggers the crop in your graphics program). The result is usually a stronger composition.

A stronger composition

People also use the two horizontal grid lines to improve their composition in another way. They align the horizon—the bottom of the sky—on one of the horizontal lines.

Horizon line

Let's Chat!

The rule of thirds dates back hundreds of years. People used it for everything from designing quilts to framing a scene in a movie. How do you feel about it? Have you tried using it with some of your photos? Pop over to the Discussion Area and share your opinions about the rule of thirds. 

All right, let's get started with our cookbook UI.

Transforming the Cookbook UI

We'll begin by adding a background image on the form itself. I created a gold frame using PaintShop Pro, and then I saved it as a PNG file. (There are dozens of bitmap file types, but PNG works well.)

To get ready to add a background image to the cookbook, you could grab a Web page you like (press the PrtScn key), crop it if you wish, and save it as a PNG file in your C:\XML L9 Finished\Plain Vanilla Cookbook folder. Or if you prefer, use the tools in a drawing, photo editing, or painting program to create your own graphics. Then save the result to that folder.

But for now, just use my graphic (gold.png) as you learn how to add a background to a form. Later, you can import a different bitmap if you wish.

The C:\XML L9 Finished folder contains two cookbook folders. The one named Plain Vanilla Cookbook is the one you should use now. It has the original, drab UI. (The folder named Cookbook contains the program as it looks at the end of this lesson—after all the modifications we'll make in this chapter.)

To add a background graphic, follow these steps:

1. Double-click the Cookbook.sln file in the C:\XML L9 Finished\Plain Vanilla Cookbook folder. It loads into VS.
2. If Form1 isn't visible in the Design window, double-click Form1.vb in the editor's Solution Explorer.
3. In the Properties window, click the BackgroundImage property, and then click the ellipsis (…) to open the Select Resource dialog box.
4. Click Local Resource.
5. Click Import.
6. Double-click gold.png in the C:\XML L9 Finished\Plain Vanilla Cookbook folder.
7. Click OK to close the dialog box and load the graphic as a background.
8. Press F5 to see how the form looks when the cookbook program is running.

Tiled image

You can see two problems with the current background. At this point, it's tiled (the graphic is repeated to fill the background, the default setting). And the controls aren't neatly positioned within the gold frame.

Let's fix this:

1. Click the red x in the upper-right corner of the form to stop the program from running and return to the Design window.

2. Click the down arrow next to the BackgroundImageLayout property.

3. Choose Stretch to fill the background with a single copy of the graphic.

Stretch to fill

4. Click the various controls, and use the arrow keys to move them within the frame. (Press F5 whenever you want to see how the form looks when the cookbook is running. Then click the red x to return to Design mode so you can make further changes.)

Remember, you can group controls to move them as a unit if you wish. (Press the CTRL key while you click the controls you want to group.)

Adjusting the Form     

Need to adjust the form? Click the background (somewhere in the gold), and use the small white square drag handles to enlarge or shrink the form if you need to. The gold frame background image will always adjust to fit whatever size or shape you decide on for the form.

With the form somewhat enlarged and the controls well-spaced, the cookbook's UI is improving.

Much improved

But what about the white border around the edge of the form? The color of window borders is the same across the entire Windows operating system. You can't modify it from within VB—you have to change your overall Windows preferences. But you can get rid of the border entirely if you want:

1. Click the gold background to select the form.
2. Click the down arrow next to FormBorderStyle in the Properties window.
3. Choose None.

When you follow these steps, the usual Windows border and the title bar (at the top) disappear, along with the minimize, maximize, and close buttons that were on the top right of the border. No big sacrifice. There's no point in maximizing the cookbook UI—the controls won't automatically stretch to fill; you'll just get lots of empty background. And the user can click our Exit button to close the program.

Leave the form's border set to Sizeable if you prefer. One advantage of using the Sizeable setting is that the user can drag the cookbook around the screen by its title bar.

Fixing the Buttons

The two textboxes will look okay with a plain white background, but clearly the buttons can use some help. By now, you've probably guessed that the theme I'm going for is pirate's treasure chest. I'm in too deep to back out now, so I guess buttons will have to be gold bars, pearls, or jewels. Let's go with bars:

1. While pressing the SHIFT key, click all four buttons to select them as a group: Import, Delete, Exit, and Show All Titles.
2. Click the down arrow next to the UseCompatibleTextRendering property in the Properties window.
   

   If you don't see the UseCompatibleTextRendering property listed in the Properties window, click the Alphabetical and Properties icons at the top of the Properties window, like this:




Correct Icons
3. From the drop-down list, choose True. (This centers the text within the buttons.)
4. Click the down arrow next to the FlatStyle property in the Properties window.
5. From the drop-down list, choose Flat.
6. Click the down arrow next to the BackgroundImageLayout property in the Properties window.
7. From the drop-down list, choose Stretch.
8. Click the ellipsis next to the BackgroundImage property in the Properties window.
9. In the drop-down list, click Local Resource.
10. Click Import.
11. Double-click button.png in the C:\XML L9 Finished\Plain Vanilla Cookbook folder.
12. Click OK to close the dialog box. The button graphics will now appear in each of the selected buttons.

Buttons with graphics

Improving Textboxes and Listboxes

If you wish, you can change the BackColor property of the textboxes and the listbox. But if you do that, be sure to also specify that new backcolor by modifying this line in the btnShowAllTitles sub:

lstTitles.BackColor = Color.White

Another improvement you might consider is providing a bit of whitespace around the text so it doesn't butt up against the edge of the textboxes and the listbox. Here's how:

1. From the Toolbox, add a Panel control.
2. Move and drag it until it is slightly larger than the listbox.
3. Change its BackColor property in the Properties window to the same color as the BackColor of the listbox.
4. Change its BorderStyle to None.
5. Choose Format > Order >Send To Back to move the new frame behind the listbox. (If you don't see the Format menu, click the Panel to select it.)
6. Change the listbox's BorderStyle property to None.
7. Repeat this process to put a Panel behind the txtInstructions textbox.

Without whitespace, the text butts up against the edges

Whitespace around text