Blog
Using the GeometryGroup Element with XAML
By Martin Schaeferle | January 24, 2013
In previous articles we have discussed how to use almost all the classes that inherit from the Shape class, and you'll find that you can accomplish many of your drawing goals using these shapes. Sometimes, however, you need more control overdrawing, and for that purpose, you can use the powerful Path class. The Path>class, as you'll see, can contain any simple shape, group of shapes, and even more complex items, like curves.
In order to work with a Path instance, you must supply the instance's Data property. This property contains a Geometry object that describes the shapes contained by the Path.
If your intent is to create several shapes that share the same fill and stroke characteristics, the simplest way to draw them is to place them within a single Path element, and surround them with a single GeometryGroup element.Note some important features of the GeometryGroup element:
- Because the Path element defines the Fill and Stroke properties, all geometries defined within a GeometryGroup element share the same values for these properties.
- The GeometryGroup element draws all of its children without regard to z-order. In other words, all borders show.
- The GeometryGroup provides a FillRule property, and defines the fill characteristics for the entire group. That is, it treats all of its children as a single closed polygon, and follows the same rules for filling or not filling internal regions.
- Using a GeometryGroup reduces the overall number of elements, and the amount of markup, required to describe your content. Although this won't make a huge difference, the less markup you have, the faster your content can be rendered.
The Figure below shows a group of three geometries (a rectangle, ellipse, and line) drawn in two different ways; the top version uses individual Path and Geometry elements, and the bottom version uses a single Path with a GeometryGroup element. In each case, a TextBlock containing the text "This is some text" appears before the group of shapes in the markup.
The top cell includes the following markup:
<Canvas>
<TextBlock Canvas.Top="75" FontSize="32">
This is some text
</TextBlock>
<Path Stroke="Blue" StrokeThickness="2"
Fill="Yellow" Canvas.Top="20" Canvas.Left="20">
<Path.Data>
<RectangleGeometry Rect="0, 0, 200, 100" />
</Path.Data>
</Path>
<Path Stroke="Blue" StrokeThickness="2"
Fill="Yellow" Canvas.Top="20" Canvas.Left="20">
<Path.Data>
<EllipseGeometry RadiusX="100" RadiusY="50"
Center="155,105" />
</Path.Data>
</Path>
<Path Stroke="Blue" StrokeThickness="2"
Canvas.Top="20" Canvas.Left="20">
<Path.Data>
<LineGeometry StartPoint="30,80"
EndPoint="130,30" />
</Path.Data>
</Path>
</Canvas>
As you can see, each element in the StackPanel appears "above" previous elements in z-order, and the geometries almost completely block out the text in the TextBlock.
The bottom cell includes the following markup:
<Canvas>
<TextBlock Canvas.Top="75" FontSize="32">
This is some text
</TextBlock>
<Path Stroke="Blue" StrokeThickness="2" Fill="Yellow"
Canvas.Top="20" Canvas.Left="20">
<Path.Data>
<GeometryGroup>
<RectangleGeometry Rect="0, 0, 200, 100" />
<EllipseGeometry RadiusX="100"
RadiusY="50"
Center="155,105" />
<LineGeometry StartPoint="30,80"
EndPoint="130,30" />
</GeometryGroup>
</Path.Data>
</Path>
</Canvas>
With the GeometryGroup's FillRule property set to its default value(EvenOdd), the center section of the figure isn't filled in, and the text below the shapes shows through. In the bottom right version of the drawing, the GeometryGroup's FillRule property has been set explicitly to Nonzero, and the entire drawing gets filled (no text shows through).
