Partager via

Intoducing PathMaker – a tool for creating path markup for WPF/e

  • Article

I have been working on projects using WPF/e where I composite portions of one image over other elements. To obtain these “cutout” effects, I have created Image tags in markup with the Clip property set to the path markup which defines the cutout (in this case a polyine which is closed). In order to generate these paths, I was using Expression Blend, specifically the Pen tool. The problem was, Expression uses margins, and those margins are not supported in WPF/e, and alter the path coordinates.

 

I wrote a quick tool in Windows Forms (PathMaker.exe, in the attached zip file) which functions like the pen tool in Expression Blend, but dumps out the path markup for the path with no margins to interfere.

 

Example of PathMaker in use:

 

 

All you need to do now is add Clip=”<geometry from PathMaker>” to your Image, and you’re set.

 

Example Xaml:

<Canvas xmlns="https://schemas.microsoft.com/client/2007"

        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

        x:Name="root"

        Width="600" Height="400">

            <Image Source="jungle.jpg"/>

        <Image Source="toucan.jpg" Clip="M 98,399 L 92,380 91,363 90,349 87,336 79,322 76,306 73,289 69,274 67,260 66,243 67,225 69,211 71,197 75,181 80,167 87,152 95,139 106,128 115,118 126,109 138,105 150,103 161,101 175,93 191,87 210,78 237,70 266,61 295,55 319,45 348,40 375,35 408,34 434,34 460,36 484,41 510,49 526,62 541,78 552,98 557,111 563,134 552,122 536,115 508,120 488,125 458,123 429,126 428,130 417,128 417,131 400,132 401,137 399,136 379,138 381,144 381,144 348,148 349,153 348,153 327,159 306,167 289,172 271,180 243,187 235,193 235,193 230,197 234,203 259,202 276,198 298,198 319,195 338,193 342,196 362,195 366,198 366,198 382,198 417,201 447,208 455,212 468,217 481,221 501,227 523,234 536,242 551,253 563,264 566,273 566,273 561,271 550,265 520,257 493,257 455,255 426,255 388,257 354,259 315,264 270,268 256,269 243,269 237,268 237,268 236,278 239,290 244,300 255,316 275,333 294,349 313,362 335,378 350,392 358,398 99,399 z"/>

</Canvas>

 

If you take this background image:

 

And want to superimpose this toucan:

 

The page looks like this in IE when you use the above xaml:

 

 

You can now animate the toucan over the jungle background, or do whatever you want! That’s the coolness of WPF/e!

 

Later,

Gavin

pathmaker_files.zip

Comments

  • Anonymous
    February 16, 2007
    Gavin Gear has created a client application (written in Windows Forms) that lets you trace the outline

  • Anonymous
    February 16, 2007
    Thank you for putting this together.  This is an incredibly useful tool.  

  • Anonymous
    September 26, 2007
    Hi I looking for a way  clip an image by a Geometry in c# ? Any ideals?

  • Anonymous
    July 11, 2010
    Gavin, thanks a very useful tool indeed. I was wondering if you could supply the source for modication (unless you have already done the following adjustments or if you could point me to some that has). I want to copy and paste path data and then make some minor tweaks before copying it back. Would be useful for tweaking minor variations to images that have been exported to xaml but where I didn't want to go through the export process again. Cheers Steve (in oz)