Creating Compound Paths with Expression Blend

There may be a time when you need to create an effect where you are looking THROUGH an item, and lining up artwork to make it look that way is difficult and unpredictable. My favorite technique to take care of this is using compound paths in order to see what is behind an item.

The following screens show an extremely basic example of how to create a usable compound path shape.

1. Draw a basic ellipse

2. Draw another ellipse on top, this one is smaller to create a thick border effect.

3. To see how the shape is now "see through" I put a yellow rectangle in the background

 4. Select both ellipses, and then go to the top menu "Object" > "Path" > "Make Compound Path"

5. This is the result, you will now see the yellow rectangle through the circle.

I also used this technique to create text where each letter can have a different gradient color or a separate blend angle. 

1. I created the text box, and then converted the text to paths. With the TextBlock or TextBox selected go to "Object" > "Path" > "Convert To Paths"

After this, the text has been converted to different path sections, however they are still a compound path (the text is a compound path to begin with so the letters look right) and need to have the compound paths "released".  

"Object" > "Path" > "Release Compound Path"

Now the text will become solid shapes, you won't see the inside of the "P" nor the inside shape of the "A"

Select both paths that make up the "P" and make those into a compound path, then select the paths that make up the "A". Doing this with all the paths selected, they will be connected and you will not be able to give them each a separate fill.

This is a lot easier than trying to draw any text or number shape to be used in a design or control.

The screenshots below show a border with a compound path and how it displays the color(s) behind it. Now, I can simply change the color of either the background or of the blue ellipse in a control, instead of changing an entire group (the border, background and the ellipse). 

This is  the "animation" using the example. When you mouseover the button, the only change is the opacity of the element in the background. The blue one is visible when normal, but opacity is zero when mouseover with the red one now having an opacity of 85%.

Link to example 
NOTE: The design work is done in the file "CompoundPath.xaml" - but the button style is defined in a resource dictionary where I copied the design over and then added the animations using the button's existing template. It is included in the downloadable file for reference. 

I have uploaded the project here. I'm going to continue to update this as I create new examples and test out new ways to design using Blend and making it easier for me to create layouts even faster. :)