Combining Shapes with GeometryGroup
The simplest way to combine geometries is to use the GeometryGroup and nest the other Geometry-derived objects inside. Here's an example that places an ellipse next to a square:
<Path Fill="Yellow" Stroke="Blue" Margin="5" Canvas.Top="10" Canvas.Left="10" > <Path.Data> <GeometryGroup> <RectangleGeometry Rect="0,0 100,100"></RectangleGeometry> <EllipseGeometry Center="150,50" RadiusX="35" RadiusY="25"></EllipseGeometry> </GeometryGroup> </Path.Data> </Path>
The effect of this markup is the same as if you supplied two Path elements, one with the RectangleGeometry and one with the EllipseGeometry (and that's the same as if you used a Rectangle and Ellipse shape instead). However, there's one advantage to this approach. You've replaced two elements with one, which means you've reduced the overhead of your user interface. In general, a page that uses a smaller number of elements with more complex geometries will perform faster than a page that has a large number of elements with simpler geometries. This effect won't be apparent in a page that has just a few dozen shapes, but it may become significant in one that requires hundreds or thousands.
Of course, there's also a drawback to combining geometries in a single Path element— namely, you won't be able to perform event handling of the different shapes separately. Instead, the Path element will fire all mouse events. And although Silverlight provides a way to perform hit testing to find out if a point is on an element (through the HitTest() method that's built into all elements), it doesn't include a way to hit test geometries.
However, even when you combine geometries you still have the ability to manipulate the nested RectangleGeometry and EllipseGeometry objects independently. For example, each geometry provides a Transform property that you can set to stretch, skew, or rotate that part of the path.
Note Unlike WPF, Silverlight does not allow you to reuse a single geometry object with more than one Path. If two objects share the same geometry, you must create a distinct copy for each one.
The GeometryGroup becomes more interesting when your shapes intersect. Rather than simply treating your drawing as a combination of solid shapes, the GeometryGroup uses its FillRule property (which can be EvenOdd or Nonzero, as described earlier) to decide what shapes to fill. Consider what happens if you alter the markup shown earlier like this, placing the ellipse over the square:
<Path Fill="Yellow" Stroke="Blue" Margin="5" Canvas.Top="10" Canvas.Left="10" > <Path.Data> <GeometryGroup> <RectangleGeometry Rect="0,0 100,100"></RectangleGeometry> <EllipseGeometry Center="50,50" RadiusX="35" RadiusY="25"></EllipseGeometry> </GeometryGroup> </Path.Data> </Path>
Now this markup creates a square with an ellipse-shaped hole in it. If you change FillRule to Nonzero, you'll get a solid ellipse over a solid rectangle, both with the same yellow fill.
You could create the square-with-a-hole effect by simply superimposing a white-filled ellipse over your square. However, the GeometryGroup class becomes more useful if you have content underneath, which is typical in a complex drawing. Because the ellipse is treated as a hole in your shape (not another shape with a different fill), any content underneath shows through—for example, if you add this line of text:
<TextBlock Canvas.Top="50" Canvas.Left="20" FontSize="25" FontWeight="Bold"> Hello There</TextBlock>
Now you'll get the result shown in Figure 7-13.
S SiIverl¡ght Project Test Page - Windows L„ L
■ ) ' ® bug\TestPage.html " J +t | X | I Gacg.s
S SiIverl¡ght Project Test Page - Windows L„ L
■ ) ' ® bug\TestPage.html " J +t | X | I Gacg.s
|
& & |
S Silverlight Project Test P... | |||
|
o | ||||
|
d Internet 1 Protected Mode: On +^100% » | ||||
Figure 7-13. A path that uses two shapes
Figure 7-13. A path that uses two shapes
Average user rating: 1 stars out of 1 votes
Post a comment