CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
In the first article of this series, I introduced Windows Presentation Foundation that is part of WinFX, the new API for Windows Vista, XAML, a new descriptive XML-based language for designing user interfaces and ‘Cider’ the Designer for Visual Studio ‘Orcas’, and you built a small calculator application with XAML. In the second article, I gave you an overview of the Microsoft Expression family (Graphic Designer, Interactive Designer, and Web Designer). In this article, you’ll see the first two tools of the family at work to change the user interface of the XAMLCalculator application from the first article.
Before going any further, I strongly suggest you to go through the first two articles, especially if you are not familiar with WPF, XAML, and the Microsoft Expression family of tools. For this article, you’ll have to install all the required betas indicated in the first two articles.
Let me point out that the goal of this article is to get familiar with different aspects of the Graphic and Interactive designer and not to build an application with state-of the art user interface and functionality. Here is how the final application will look:
Creating the Graphic Elements with the Expression Graphic Designer
As already stated, in this article you’ll give a complete face-lift to the XAML Calculator created in the first article. One important aspect of this face-lifting is customizing the buttons of the calculator. What I want to do is use some hand-written characters to be displayed in the buttons; here is where the Expression Graphic Designer comes into action. However, I want to keep things simple, so I’m not going to do very complicated things.
Start by opening the Expression Graphic Designer and create a new vector-based document. At this point, you should have a list of toolboxes opened on the right side. Make sure you have Toolbox, Paint Style, Attributes/Effects, and Stroke/Brush List windows opened. If they are not there, go to Window and select them.
Because you want to write some characters and symbols, select the Freehand Pen (P) from the Toolbox. In the Paint Style window, select the Skeletal Stroke and adjust the width to, say, 10 points. If you select the Stroke S04 from the Stroke/Brush list, your Paint Style window should look like this:
Next, you will write the symbols inside the document window. If you have a graphic pen, it’s great (especially because the Expression Graphic Designer is pressure sensitive), but even a mouse will do just fine. Basically, you need to write the following characters and symbols:
Some of these symbols were made with several strokes. For instance, the + or * symbols or the word “back”. If you select the “+/-” symbol, you can see the selection of each individual object:
You need these objects merged into a single object. For that, you will use the command Object > Compound Object > Make. After merging the objects, the selection will look like this:
Just make sure you repeat the same operation for all compound objects (7, +, *, +/-, and Back).
At this point, you have all the symbols you need, but I want to give them a better look. So, I’m going to add a shadow. For that, first select an object—for instance, the symbol 1—and open the fx tab of the Attributes/Effects window, and use the + button to select the shadow.
Adjust the different settings of the shadow, especially the Offset, so that it drops just behind the object, and the color, to a dark green.
Obviously, you want to apply the exact same settings to all the objects. With the Expression Graphic Designer, it’s very easy to do it: If you select all the objects, you’ll see that the Drop Shadow effect in the Attributes/Effects window has been disabled, but it’s still there. You only have to click it twice, and it will be enabled, but this time for all the selected objects. So, your objects will look like this:
The last thing left to do is to save this to XAML. For that, go to File > Export > XAML Export and select a name for the file. After pressing Save, the Designer shows a window were you can choose different settings. Here, you can see a preview of the exported objects and the generated XAML code. What you want is to save the document as a Resource Dictionary, grouped by Objects with Drawing Brushes for Path Output Type. In the preview area, you can see each individual object that is selected. Before proceeding with the export, make sure the background is set to Transparent and all the checkboxes in the Effects tab are selected. If you look on the disk, you’ll see the XAML file and a folder containing a list of PNG files that contain the symbols.
This is all the work you have to do in the Graphic Designer. Now, you will import this in the Interactive designer and use it to customize the calculator’s aspect.
