| More
Expression Blend as a Better Venn Diagramming Tool
 


Expression Blend as a Better Venn Diagramming Tool

OK, this title is not meant to be taken too literally. But the fact remains that the Blend IDE does have some useful ways to perform Venn-like operations on graphically rendered data.

First question: Why would you care?  Well, as it turns out, many custom UserControls begin life as simple vector-graphics which are rendered with the Shape tools (pen, pencil, line, etc) and tweaked using the Properties window.

As you are building such a rendering, the IDE will capture pen and pencil strokes using a <Path> element, and members of System.Windows.Shapes for rectangles, circles and lines.  For example, assume the following collection of objects on a WPF main window:

image

If you were to examine the XAML, you would find something such as the following:

Code Snippet
  1. <Grid x:Name="LayoutRoot">
  2. ????<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="102" Margin="93,104,0,0" Stroke="Black" VerticalAlignment="Top" Width="94"/>
  3. ????<Ellipse Fill="#FFB266C4" HorizontalAlignment="Left" Height="90" Margin="144,56,0,0" Stroke="Black" VerticalAlignment="Top" Width="141"/>
  4. ????<Path Data="M309,146 C312.9974,153.42375 327.83819,145.16181 316,157 308.306,164.694 300.44568,164.73715 288,167 272.18419,169.8756 257.07965,169 241,169 241,192.88331 245.44728,208.70181 221,225 198.3426,240.10493 176.35947,237.47189 149,232 139.06896,230.01379 120.68398,243.94709 142,270 162.84782,295.48066 192.04381,292 231,292 256.11759,292 272,295.23879&#xd;&#xa;272,251 272,232.79339 285.87442,229.22512 312,224 326.54263,221.09147 327.62914,223.96357 338,211 343.95409,203.55739 346.32948,183.5472 341,172 333.43652,155.61245 328.80223,157.37715 313,148" Fill="#FF69C042" Margin="134.133,104,168,124" Stretch="Fill" Stroke="Black"/>
  5. </Grid>

Now, using Blend, you can select multiple shape objects (via  Shift + Click) and then activate the context menu on your selection.  Here you will find a Combine menu tem, which exposes a series of Venn-like operations:

image

For example, if you were to pick the Unite option for each selected shape, your resulting image would appear as so:

image

And the previous three elements have been combined into a single <Path> object:

Code Snippet
  1. <Path Data="M150.77036,85.421501 L148.74716,86.002968 C140.37247,88.254791 131.16498,89.5 121.5,89.5 111.83501,89.5 102.62753,88.254791 94.252838,86.002972 L93.5,85.786606 93.5,138.79258 94.053612,138.78882 C106.61694,138.54271 118.46339,135.52435 130.50014,127.49986 148.8356,115.27625 150.91786,103.32245 150.81303,88.033772 z M225.23241,52.076152 L225.59306,52.121458 C228.37724,52.402526 230.62875,52.309617 229.83183,54.242061 L229.71127,54.485531 229.14326,54.191226 C227.95673,53.57149 226.69139,52.894059 225.33565,52.134794 z M218.50015,48.500001 L222.50015,50.499996 C222.99397,50.793032 223.47688,51.075187 223.94933,51.347355 L225.23241,52.076152 224.2794,51.956441 C222.05745,51.608034 219.74934,50.819918 218.50015,48.500001 z M121.5,0.5 C160.15993,0.5 191.5,20.423328 191.5,45.000001 191.5,54.216252 187.0928,62.778128 179.5451,69.880373 L177.75679,71.479061 179.9185,71.396465 C185.73831,71.12915 191.56923,70.578312 197.50015,69.499966 209.94583,67.237118 217.80615,67.193968 225.50015,59.499981 227.71982,57.280325 229.00154,55.767313 229.59267,54.725051 L229.71127,54.485531 230.30397,54.792619 C240.14322,59.853534 244.35483,61.185095 250.50015,74.499956 255.82964,86.047142 253.45424,106.05729 247.50015,113.49989 237.1293,126.46344 236.04279,123.59135 221.50015,126.49987 195.37457,131.72498 181.50015,135.29324 181.50015,153.49982 181.50015,197.73853 165.61774,194.49976 140.50014,194.49976 101.54394,194.49976 72.347946,197.98041 51.50013,172.49979 44.172749,163.54411 41.536594,156.02055 41.635677,150.08342 L41.670158,149.5 0.5,149.5 0.5,48.499997 51.714752,48.499997 51.704113,48.42385 C51.568863,47.293838 51.5,46.152031 51.5,45.000001 51.5,20.423328 82.840065,0.5 121.5,0.5 z" Fill="#FFF4F4F5" Margin="93,56,277.035,190.84" Stretch="Fill" Stroke="Black"/>

Blend is plump-full of useful shortcuts like these, and I'll post other tidbits over time.

Happy Blending.


Posted by: Andrew Troelsen
Posted on: 7/20/2010 at 9:07 AM
Actions: E-mail | Kick it! | DZone it! | del.icio.us
Post Information: Permalink | Comments (0) | Post RSSRSS comment feed

Add comment




biuquote
  • Comment
  • Preview
Loading