Path Editing and Exporting XAML from Expression Design

Expression Design has many advanced features for geometry and path editing. However, Blend has some functionality built into it as well. In this tutorial, we're going to take a login screen from Expression Design, bring it into Blend, and then touch up a few of the paths.

In the sample files, you'll find AdventureWorks.design, which will start this entire process. This tutorial and the next three tutorials all build on each other, so you may find it easiest to work through them in order. If you don't have Expression Design available, you can find it at (Insert forward link here).

To begin, open the AdventureWorks.design document in Microsoft Expression Design.

We need to export the design in XAML, so we can access it in Blend. So, under File, choose Export. You'll need to supply a name, and make sure that you're exporting as an Extensible Application Markup Language (or XAML) document. When you press Ok, the Export dialog is displayed in Expression Design.

Expand the Document format region, and tell Design to Export flattened paths. This should get the Text to move to the correction locations. Hit Export, and we're ready to open the document in Blend.

Now, in Blend, you may want to create a new project. We're going to be effectively starting from scratch. In your project, we need to add this XAML document to our project. In the menu, go to Project, and choose Add Existing Item, and then specify where the XAML that we just exported from Design is. The Project will now look like this:

Double Click AdventureWorks.xaml, so we can start working on it. Since the project we're working with is fairly wide, in my sample, I pressed F7 to switch to the animation workspace, so I can see things more easily.

The edit that we want to make, is to actually combine the large yellow ellipse with the elongated ellipse that contains the words "Adventure Works". To do this, we're going to Unite the two paths. Select the large ellipse first, then while holding down the CTRL key, select the second ellipse.

In the Object menu, under Combine, choose the option "Unite". This will cause both elements to be removed, and replaced with a single element that has the union of the two elements. As a cosmetic issue, the white inner ellipse has disappeared, but this is because it was between the two ellipses, and now falls behind them. You can easily fix that by selecting that white ellipse in the object tree, and dragging it so that it appears immediately after our combined ellipse.

Near the top of the ellipse, where the two ellipses join, the paths don't look quite right. Let's fix that. First, use the Zoom tool to zoom in on that region. Then, use the Direct Selection tool, and select the combined ellipse.

First, select the right node and delete it with the delete key.

When we delete the node, the upper point is now too sharp. Select it, and the Bezier handle associated with the point is displayed.

Click and drag the Bezier handle to the right. If you hold down the SHIFT key while you drag, you'll make sure that you're dragging directly to the right, so you won't accidentally put an upward or downward slope to the new point.

Zoom out, and take a look at how things look. To make it easier, just double-click the Zoom tool, and that will return the view to 100%

The top right edge of my ellipse still doesn't look right. To fix it, I'm first going to use the Pen tool to add another node to the ellipse. Select the pen tool, and click on a point somewhere in the middle between the topmost and right nodes.

Now, use the direct selection tool again, to drag this new point outward, until you have the arc that you want.