Expression Blend is a program that allows you to easily create the user interface for applications based on Windows Presentation Foundation (WPF). In this introductory tutorial, I will explain not only how to use Blend, but also how to draw and modify a shape's various properties such as color, outline, etc. using Brushes.

Note - What are Brushes?

In many design programs, you directly manipulate the colors and related properties of an object. In WPF, you don't interact directly with colors. You use intermediary objects called Brushes instead, but the steps needed to change, for example, the color of something is just the same in Blend as it is almost all other programs.

The end result and the steps taken to get there are the same, but the details vary. Future tutorials will touch upon the details, but this introductory tutorial will not.

This is an introductory tutorial requiring no prior experience with any of the products or terms I mentioned in my previous paragraph. By the end of this tutorial, you will have created something that looks like the following image:

[ what your finished project looks like ]

Let's get started:

1. Launch Expression Blend. If you do not have Blend installed on your computer, you can download a fully-functional evaluation version by clicking here.
   
   When the application loads, you should see a Startup window (if you have it enabled). From this Startup window, click on the New Project link:

[ select New Project from the startup window ]

2. After clicking on New Project, the Create New Project window will appear. Select Standard Application (.exe) as your Project Type, give your project a unique name, and make sure the language is set to C#:

[ create a new Standard Application (.exe) ]

Press OK to close the Create New Project window and clear the stage for your newly created project.

3. What you see now is your main design area also known as the Artboard. It is where you will create, make, and break your designs. In our first order of business, let's change the size of our stage by making it smaller.
   
   Towards the left side of your screen, you should see a panel titled Objects and Timeline:

[ easily view all objects in your Artboard using the Objects and Timeline panel ]

This area provides you with a listing of all of your objects and controls on the stage, and this area makes it easy to select a particular object if it is buried below other objects.

So far, you have just created a new project in Blend. In the next section, let's add figure out how to spruce up our empty, default project.

In the previous section, you got a brief introduction to what Blend does and how to start creating a project. We'll pick up from where we left off and look at how to change our background color.

4. Select the Window object from the Objects and Timeline panel. When you select Window in the Objects and Timeline panel, you will see your window outlined in your Artboard also.
   
   With your window selected, click on the Properties tab found on the top-right corner of your window:

[ select the property tab to view your selected window's properties ]

5. The entire right-side of your screen, also known as the Results panel, should completely change to display all of the various Window properties and settings that you can modify. From this Results panel, find the Layout area:

[ find the Layout area from your Results panel ]

In the fields for Width and Height, enter 300 and 200 respectively. You will notice your window's size has changed to fit the new values:

[ your window's width and height should now be 300 x 200 pixes ]

6. With your window resized, let's now make some background color changes. From your currently displayed Results panel, find the area with the large colored box titled Brushes:

[ the Brushes area is where you can make a lot of visual changes to your objects ]

We want to change the background color of our window. The Background property should already be selected for you (see above image), but if it isn't, select it.

7. What we really want is to have a gradient background color. To specify the gradient colors, click on the Gradient Brush tab located in the row with the five rectangular icons below the OpacityMask property:

[ click on the Gradient Brush tab ]

8. After you have clicked the Gradient Brush property, you'll notice your Artboard update to display your window's background color as the default black-to-white gradient. Let's change that default color setting to a couple shades of dark blue.
   
   Below your color box, you should see a rectangular box with two gradient stops on either side in black and white. Click on the black gradient stop first:

[ the gradient stops' colors and positions determine how your gradient looks ]

9. Once you have clicked on the black gradient stop, from the color box, select a dark blue-ish shade to change the current color from black to your new blue-ish color:

[ change your black gradient to a dark blue color ]

10. You still have another gradient stop remaining. Select the white gradient stop, as before, and change the color to a different shade of blue than the shade you selected in the above step:

[ change your white gradient to stop a slightly more lively blue color ]

Right now, with both of your gradient colors altered from the original black and white colors, your Window's background reflects the gradient choices you made in the previous few steps:

[ your background now has a nicer blue color scheme to it ]

In this page you got a feel for some of the color brushes and how they can be used to modify your design. In the next section, you will make some more modification to your gradient as well get into drawing your own shape.

In the previous section you customized your background by applying a gradient and changing some colors around. There are  a few more tricks you can perform with gradients, so let's look at those and then start drawing our shapes onto the stage.

11. Right now, our background gradient changes only in a left-to-right direction. Let's angle the gradient so that the color changes at an angle. To change the fill angle color, click on the Brush Transform button from your Toolbox:

[ click on the Brush Transform button ]

12. Once you have clicked on the Brush Transform button. You should see a large arrow superimposed over the area of your background in your Artboard. You can drag, rotate, and scale this arrow to adjust subtle details associated with the background:

[ the arrow's direction and size determines how your gradient looks ]

Feel free to use the Brush Transform tool to modify your gradient in any way you want. I have mine angled and stretched a little bit as shown in the above image, so feel free to apply a similar transformation if you want.

13. We've spent quite a bit of time making modifications to the brush's background property, but there are more brush properties that we haven't touched upon. In order to use some of the other properties, let's create a few new objects to populate on our background.
    
    In your Toolbox, find the Shapes button, click on the small white arrow on the bottom-right corner of that button to display the shapes menu, and select the Ellipse tool:

[ click on the Shapes button to select the Ellipse ]

The Ellipse tool allows you to draw ellipses and its related friends, the circles.

14. With your Ellipse tool selected, click on your stage and drag the mouse outward to draw a circle. To make a perfect circle, hold down your Shift key. Release your mouse to stop the dragging, and you will see your circle appear on the Artboard:

[ your plain (for now) circle should be displayed on the Artboard ]

The circle you should see will feature the default colors and outlines from when last used this feature, so let's go through and customize how our circle looks. Let's first start with the background, since you should be familiar enough with this property already.

15. Change your circle's background color by setting it to white, but depending on your circle's defaultl color, your circle might already be white. If your circle is already white, feel free to skip this step, but if it isn't, you can make your circle white by going to your Brushes panel and selecting the Solid color brush:

[ The Fill property specifies the fill color of your selected object ]

The Solid color brush applies a solid color throughout your shape or object. This is different from a gradient brush where you specify multiple color values.

16. Once you have selected the Solid color brush, select a white color from the color box. You will see that your circle is now colored white also.

17. Now, click on the Stroke property from the same Brushes panel to select it. Stroke is another term for our shape's outline:

[ select the Stroke property to make modifications to your shape's outline ]

18. With the Stroke property selected, click on your Solid color brush again to specify the stroke color. The color box will appear after you click on Solid color, and this time pick a light blue-ish color:

[ select a light blue color from the color editor ]

19. Once you have selected your light blue stroke color, you probably won't see the effects of it actually. The reason is that the stroke thickness is too small to be noticed over our background. To fix that, we need to increase the stroke thickness
    
    Find the Appearance panel (it should be below your Brushes panel) and in the StrokeThickness field, enter a value of 10:

[ make your shape's stroke more visible by increasing its thickness ]

After entering a value of 10 for StrokeThickness, you will see that your circle now has a thick light-blue outline (stroke):

[ with a thicker stroke thickness, your shape's outline is more visible ]

Finally, your design is starting to take shape. We only have one, albeit cool-looking, circle in our Artboard. In the next section, let's hope to change that.

In the previous section you added and modified a circle. In this page, let's continue by making a few more tweaks and adding some extra circles!

20. Right now, your circle is fully visible. What we really want is a slight transparency applied to the entire circle to make it blend better with the background. To adjust the background for the entire circle, you will need to alter the OpacityMask property.
    
    Select your OpacityMask property from the Brushes panel and select Solid Color Brush:

[ select the OpacityMask property to adjust transparency ]

21. Your OpacityMask helps determine how visible (or how transparent) your selected object is. You can try the colors of your selected object using the displayed color box, but nothing will happen. The main thing the OpacityMask property looks at is the Alpha channel (A):

[ the Alpha channel determines how transparent your selected object is ]

Click on the A (Alpha) field and enter a value of 60:

[ select the Alpha (A) channel to adjust the level of transparency ]

After entering 60 for your circle's Alpha, you will see your circle becoming partially transparent. This means that part of your background is now visible through your circle itself:

[ your circle is partially transparent now ]

22. The last thing we are going to do is copy and paste a few more circles and scale them. Make sure your circle shape is still selected in your Artboard, press Ctrl + C (or go to Edit | Copy) and press Ctrl + V (or go to Edit | Paste).

23. While it may be difficult to see, a copy of your original circle has now been placed perfectly on top of your original circle. Click on the circle and drag your mouse to move the circle to a new location:

[ paste a copy of your original circle ]

When you pasted your circle, I mentioned that it was difficult to notice that because they are perfectly placed on top of each other. While that is true when observing the Artboard, when you look at your Objects and Timeline tree, you will see two copies of your Ellipse shape representing our two circles:

[ a better way to find and select objects in your Artboard ]

The timeline makes it easy to know exactly which objects are currently placed on your stage, and that is helpful when trying to select objects covered up by another object or selecting an object that is completely transparent/invisible.

24. Make sure your newly pasted and moved circle is selected if it already isn't. Notice that a box outline with eight small squares is displayed around your selected circle in the Artboard. You can click on any of the boxes and drag the mouse to skew and scale your circle's shape.
    
    What we want to do is make our circle bigger. You can do that by clicking on any of the corner boxes and dragging your mouse outward:

[ you can scale an object by clicking on a corner box and dragging with your mouse ]

When scaling using this approach, you might find that the scale isn't even. Unless you are dragging outward in a perfect 45 degree angle, your scaling will skew your object to be more horizontal or vertical than you want to.

To fix that, hold down your Shift key when dragging or prior to releasing your drag action. Holding down your Shift key sets the horizontal and vertical scale values to be the same:

[ holding down your Shift key while dragging makes the scaling even ]

We're almost done now. All that is left are some more finishing touches, so let's wrap this up in the next section.

In the previous section you copied/pasted a few more circles, made some scaling changes, and more. In this page we'll wrap this tutorial up and take a step back and review some of the interesting things you learned.

25. An optional step is for you repeat the above Copy, Paste, and Scale process to have a lot more circles populate your screen. Feel free to adjust the transparency for your circles as needed also.
    
    Here is how my Artboard looks like after having copied/pasted and altered a few more circles:

[ adding and modifying a few more circles ]

27. The final step is for you to preview your application. To preview your application, click on the Project menu and select Test Project, or you can also just press F5. After a few seconds of building your project, you will see a Windows window appear containing your project:

[ your finished product ]

Conclusion

By now, you should have created something that looks like the above screenshot. In creating that, you received a quick overview of how to create a new project, resize the window, change the background color, draw shapes, change the outline, and more.

The key thing to remember is that this is an introductory tutorial. As such, there were a lot of details that I did not cover. For example, in the tutorial you only changed the gradient colors. The actual gradient feature allows you to do much more such as allowing you to add more gradient stops and even reposition the existing gradient stops. Likewise, the treatment of the alpha channel using the Opacity Mask property is only part of what you can actually do.

Future tutorials will focus more narrowly on specific features and hammer out the details in depth. For an introductory tutorial, the goal was to have you create something cool looking while getting a broad overview of some of the drawing features in Blend.

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇