CSharpFeeds - All your C# feeds in one place.

Sponsors

Thursday, December 21, 2006

Combine Shapes in Windows Presentation Foundation

by Keyvan Nayyeri via Keyvan Nayyeri on 12/21/2006 7:57:57 PM

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!

email it!bookmark it!digg it!

Original Post: Combine Shapes in Windows Presentation Foundation

Subscribe

New Feed

Product Spotlight

Recently Updated Sources

Legal Note

The content of the postings is owned by the respective author. CSharpFeeds is not responsible for the contents of the postings. This site is automatically generated and cannot be reviewed for abusive content. If you find abusive content on CSharpFeeds, please contact us. Designated trademarks and brands are the property of their respective owners. All rights reserved.

Advertise with us