Combine Shapes in Windows Presentation Foundation

God breathing through me

Combine Shapes in Windows Presentation Foundation

Published on December 21, 2006

Sometimes it's necessary to combine two shapes to get a new custom shape. Windows Presentation Foundation and XAML provide all means to do this easily.

Using <CombinedGeometry /> element you can combine two shapes in a path. It can combine two shapes via its child elements (<CombinedGeometry.Geometry1 /> and <CombinedGeometry.Geometry2). Each of these elements can get a geometry and their parent, <CombinedGeometry />, can combine them.

<CombinedGeometry /> has a GeometryCombineMode attribute to set the combine mode. It can get one of following values. To understand these modes apply these operations to two sets in mathematics!

Union: New shape contains all points of two older shapes. This is the default value.
Intersect: New shape contains all points that are shared between two shapes.
Xor: New shape contains all points between two older shapes except what is shared between them.
Exclude: New shape contains all points between first shape and not second shape.

Let's see some example.

Below is a XAML code that draws two ellipses and fills them with LightSkyBlue color and Black border. It uses Union mode to combine two shapes.

		<Window x:Class="CombineShapes.Window1"

		    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

		    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

		    Title="Combine Shapes in WPF" Height="330" Width="310"

		    >

		    <StackPanel>        

		        <Path Fill="LightSkyBlue" Stroke="Black">            

		            <Path.Data>

		                <CombinedGeometry GeometryCombineMode="Union">

		                    <CombinedGeometry.Geometry1>

		                        <EllipseGeometry Center="100,150" RadiusX="70" RadiusY="30" />                            

		                    </CombinedGeometry.Geometry1>

		                    <CombinedGeometry.Geometry2>

		                        <EllipseGeometry Center="200,150" RadiusX="70" RadiusY="30" />

		                    </CombinedGeometry.Geometry2>

		                </CombinedGeometry>

		            </Path.Data>

		        </Path>

		    </StackPanel>

		</Window>

In second example Intersect combine mode is used.

		<Window x:Class="CombineShapes.Window1"

		    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

		    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

		    Title="Combine Shapes in WPF" Height="330" Width="310"

		    >

		    <StackPanel>        

		        <Path Fill="LightSkyBlue" Stroke="Black">            

		            <Path.Data>

		                <CombinedGeometry GeometryCombineMode="Intersect">

		                    <CombinedGeometry.Geometry1>

		                        <EllipseGeometry Center="100,150" RadiusX="70" RadiusY="30" />

		                    </CombinedGeometry.Geometry1>

		                    <CombinedGeometry.Geometry2>

		                        <EllipseGeometry Center="200,150" RadiusX="70" RadiusY="30" />

		                    </CombinedGeometry.Geometry2>

		                </CombinedGeometry>

		            </Path.Data>

		        </Path>

		    </StackPanel>

		</Window>

Third code uses Xor mode to combine shapes.

		<Window x:Class="CombineShapes.Window1"

		    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

		    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

		    Title="Combine Shapes in WPF" Height="330" Width="310"

		    >

		    <StackPanel>        

		        <Path Fill="LightSkyBlue" Stroke="Black">            

		            <Path.Data>

		                <CombinedGeometry GeometryCombineMode="Xor">

		                    <CombinedGeometry.Geometry1>

		                        <EllipseGeometry Center="100,150" RadiusX="70" RadiusY="30" />

		                    </CombinedGeometry.Geometry1>

		                    <CombinedGeometry.Geometry2>

		                        <EllipseGeometry Center="200,150" RadiusX="70" RadiusY="30" />

		                    </CombinedGeometry.Geometry2>

		                </CombinedGeometry>

		            </Path.Data>

		        </Path>

		    </StackPanel>

		</Window>

And finally last code and Exclude mode.

		<Window x:Class="CombineShapes.Window1"

		    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

		    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

		    Title="Combine Shapes in WPF" Height="330" Width="310"

		    >

		    <StackPanel>        

		        <Path Fill="LightSkyBlue" Stroke="Black">            

		            <Path.Data>

		                <CombinedGeometry GeometryCombineMode="Exclude">

		                    <CombinedGeometry.Geometry1>

		                        <EllipseGeometry Center="100,150" RadiusX="70" RadiusY="30" />

		                    </CombinedGeometry.Geometry1>

		                    <CombinedGeometry.Geometry2>

		                        <EllipseGeometry Center="200,150" RadiusX="70" RadiusY="30" />

		                    </CombinedGeometry.Geometry2>

		                </CombinedGeometry>

		            </Path.Data>

		        </Path>

		    </StackPanel>

		</Window>

It's also possible to combine more than two shapes using a mathematical tip: when something is true for K it's possible to extend it for K+1 using mathematical induction!

3 Comments

DotNetKicks.com
Dec 21, 2006 1:00 PM
#

You've been kicked (a good thing) - Trackback from DotNetKicks.com

davidvogt
Feb 03, 2007 9:01 AM
#

Your article is very informative and helped me further. Thanks, David

Subho100
Feb 15, 2010 1:26 AM
#

If I have two path.Data and I want to combine them runtime. If I am trying union and the shapes are far apart, it shouldn't combine. But it combines if I use combine geometry. Your comments required on this. Thanks.

Keyvan Nayyeri

Recent Posts

Archive

Combine Shapes in Windows Presentation Foundation

Leave a Comment