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 - Combined Geometry

The one hundred and twenty-sixth part of the Windows Presentation Foundation Fundamentals tutorial considers a second way to create complex geometries within a Path shape. This instalment looks at combined geometries, which merge two shapes into one, possibly changing the outline.


In the previous article we looked at how geometry objects can be grouped together using a GeometryGroup. When grouped, all of the child shapes are linked as a single item that can be drawn using a Path. The filled area is shaded according to the fill rule and all of the outlines of the grouped shapes are included in the final figure.

A second way in which you can link geometry objects is using combined geometry. The CombinedGeometry class joins two child geometries to make a single shape. It does this by identifying the area within each shape and considering the overlapping sections. Depending upon the options used, the result may include both geometry objects, or some areas may be removed.

Let's demonstrate the combined geometry feature with an example. Create a new WPF application in Visual Studio named, "CombinedGeometryDemo". Replace the XAML of the main window with the code shown below:

<Window x:Class="CombinedGeometryDemo.MainWindow"
        Title="WPF Path Demo"
        Height="200" Width="250">
        <Path Stroke="Black" StrokeThickness="5" Fill="HotPink">
                        <EllipseGeometry Center="70,70" RadiusX="60" RadiusY="56" />
                        <RectangleGeometry Rect="70,70 150,80" />

In the XAML you can see that a CombinedGeometry has been set for the Path's Data property. The CombinedGeometry includes an ellipse and a rectangle as its children. These are applied to the object's Geometry1 and Geometry2 properties.

When rendered, the ellipse and rectangle are combined into a single shape, shown below. Note that, unlike with grouped geometry, the outline of the overlapping area is not shown. This is excluded from the generated geometry.

WPF Path with combined geometry in union mode

Geometry Combination Modes

As you can see in the previous example, the two shapes are combined and all areas of both are retained. This is because the default combination mode is Union. The CombinedGeometry class supports four modes:

  • Union. All areas of both shapes are combined into the final geometry.
  • Exclude. The area defined by Geometry2 is subtracted from Geometry1. The final shape contains the area of Geometry1 that is not overlapped.
  • Intersect. Only the areas where the two geometry objects overlap are retained.
  • Xor. The areas of both geometry objects that do not overlap form the final geometry. Where there is overlap, those regions are excluded.

You can change the mode by setting the GeometryCombineMode property to one of the values from the GeometryCombineMode enumeration. For example:

<CombinedGeometry GeometryCombineMode="Exclude">

Changing the mode to Exclude for our sample shapes subtracts the rectangle's area from the ellipse, as shown below:

WPF Path with combined geometry in exclude mode

Using the Intersect mode means that the area of overlap is retained. With the example shapes, this leaves a quarter circle.

WPF Path with combined geometry in intersect mode

With the Xor, or exclusive-OR mode, the result is the opposite of intersect mode:

WPF Path with combined geometry in exclusive or mode

11 January 2015