Mike Taulty's Blog
Bits and Bytes from Microsoft UK
Blend Bits 6: Paths Are Your Friend (2)

Blogs

Mike Taulty's Blog

Elsewhere

Archives

Once you’ve got a Path or two you can have fun with them by combining them in lots of different ways.

For instance, if we take these 2 Rectangles that have been converted into Paths;

image

then I can make them into a single Path that can then be manipulated “as one” by simply selecting them both and using the right mouse menu;

image

and now they are one object – you can tell because now they are one Path they can only take on a single Brush;

image

The other interesting menu option on that right mouse menu here is the “Combine” option. I can play around with that with these 2 Paths – you’ll find the triangle on your Assets window under Shapes and then I just used the right mouse menu to turn that into a Path again;

image

I can then use that right mouse menu to Unite, Divide, Intersect, Subtract and Extract Overlap;

imageimageimageimageimage

in order to make new Paths again.

When you’ve got a Path, there’s some interesting stuff that you can do with it including using it for clipping or for layout.

Having taken a TextBlock, added Text and then converted it to a Path I can easily fill that Path with an ImageBrush or a VideoBrush – in Blend I can do that by selecting the Path, going over to its Fill Brush and then selecting an image;

image

or I could take an alternate approach. With arbitrary content like this DataGrid that I dropped onto the design surface and filled with sample data;

image

I can select both the Path and the DataGrid and use the Path to clip the DataGrid ( think “arbitrary content” here rather than “DataGrid” );

image

leaving a kind of interesting but probably not very useful DataGrid;

image

sometimes you want a “stencil” like effect so, for instance, here I’ve got an Image, a Rectangle (semi-transparent) and my text as a Path.

image

I could use the right mouse menu to subtract the text Path from the Rectangle and then overlay that remaining “stencil” onto my Image as in;

image

There’s lots of fun to be had with Paths Winking smile As I said earlier, you can also use them for Layout with Blend 4 so you can take some Paths like the one I’ve drawn here;

image

and right mouse on it;

image

and that will throw in a PathListBox on your behalf and use the Path as one of the Paths that the ListBox will lay its items out along that Path. I just threw some small red Hexagons into my PathListBox to show the Layout;

image

but you can then go and visit the properties of the PathListBox and have lots of fun with settings over there;

image

As I said, Paths are fun Smile


Posted Tue, Sep 7 2010 2:42 PM by mtaulty

Comments

Will wrote re: Blend Bits 6: Paths Are Your Friend (2)
on Mon, Oct 4 2010 6:06 PM

Can you elaborate a bit on this: "I could use the right mouse menu to subtract the text Path from the Rectangle and then overlay that remaining “stencil” onto my Image as in;"

I am trying to recreate this and for the life of me can't figure it out! Thanks!

mtaulty wrote re: Blend Bits 6: Paths Are Your Friend (2)
on Wed, Oct 6 2010 8:43 AM

Will,

Sure. Starting from scratch;

1) Draw rectangle on artboard.

2) Draw TextBlock on artboard.

3) Select rectangle. Use Object->Path->Convert To Path menu on it.

4) Select TextBlock. Use Object->Path->Convert to Path menu on it.

5) Select both paths.

6) Use Object->Path->Subtract and you should now have a rectangle with the text "cut out" of it like a stencil.

Mike.