BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Shapes - Path - Grouped Geometry

The one hundred and twenty-fifth part of the Windows Presentation Foundation Fundamentals tutorial continues to look at the Path shape and the available geometry options. This article looks at geometry groups.

GeometryGroup

There are several ways to create more complex geometry for a path than provided by the line, rectangle and ellipse geometry classes. One option is to create geometry groups using the GeometryGroup class. This is a subclass of Geometry, so can be used directly within a Path object. It combines a number of child geometry objects.

The geometry objects in a group are merged into a single shape, rather than being treated as a number of individual items. They all share the same stroke colour and thickness and the same fill brush. Any transforms are applied to the entire drawing, rather than the separate elements.

Let's create an example project to demonstrate geometry groups. Create a new WPF application in Visual Studio named, "GeometryGroupDemo". Once the project is prepared, replace the XAML of the main window with the code below.

<Window x:Class="GeometryGroupDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF Path Demo"
        Height="200" Width="250">
    <Canvas>
        <Path Stroke="Black" StrokeThickness="2" Fill="Blue">
            <Path.Data>
                <GeometryGroup>
                    <EllipseGeometry Center="110 60" RadiusX="50" RadiusY="50" />
                    <EllipseGeometry Center="80 110" RadiusX="50" RadiusY="50" />
                    <EllipseGeometry Center="140 110" RadiusX="50" RadiusY="50" />
                </GeometryGroup>
            </Path.Data>
        </Path>
    </Canvas>
</Window>

The XAML creates a Path object that uses a GeometryGroup for its data. The group holds three overlapping ellipses. The resultant drawing is shown below.

WPF Path with GeometryGroup

Note the way in which the shape has been rendered. If the ellipses were drawn individually, they would all be filled with blue and some of the outline elements would be obscured. However, as the shape is treated as a single object, all of the outlines are visible and some segments are not filled. This is because the fill rule is applied to the entire object and defaults to the Even-Odd Rule, which was described in the Polygon article.

Applying a Fill Rule

You can change the fill rule from the Even-Odd Rule to the Nonzero Winding Rule in a similar manner to that described in the Polygon article. You set the FillRule property of the GeometryGroup, as shown below:

<Path Stroke="Black" StrokeThickness="2" Fill="Blue">
    <Path.Data>
        <GeometryGroup FillRule="Nonzero">
            <EllipseGeometry Center="110 60" RadiusX="50" RadiusY="50" />
            <EllipseGeometry Center="80 110" RadiusX="50" RadiusY="50" />
            <EllipseGeometry Center="140 110" RadiusX="50" RadiusY="50" />
        </GeometryGroup>
    </Path.Data>
</Path>

With the new rule applied, the three segments that were previously transparent are now shaded.

WPF Path with GeometryGroup and Nonzero fill rule

7 January 2015