Combine Shapes in Windows Presentation Foundation

My daily musings about software and technology

I'm Keyvan Nayyeri, a 28 years old software engineer working at Match.Com and living in Dallas, Texas.

I have a Master’s degree in computer science and a bachelor's degree in applied mathematics. I’m also known to be a technical author with several technical publications in the form of books and articles. Besides, I'm an open source enthusiast and have coordinated or contributed to several projects. Currently, I maintain my projects on GitHub.

As a content provider on the internet, not only I publish on this technical blog, but also I'm a podcaster and publish audio podcasts on Mash This.

Trying to maintain a healthy and active lifestyle, I'm a pescetarianist and exercise almost everyday. I’m an avid runner, soccer defender, and tennis player. I also have an interest in fashion.

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 element you can combine two shapes in a path. It can combine two shapes via its child elements ( and , can combine them.

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

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.

Matt Redmond
Feb 02, 2013 12:23 AM
#

For Subho100 (or far more likely, someone else who stumbles upon this) - Look up WPF Hit Testing and it'll be yours forever.

Keyvan Nayyeri

Recent Posts

Combine Shapes in Windows Presentation Foundation

Leave a Comment