--- title: "Geometry Overview" ms.date: "03/30/2017" dev_langs: - "csharp" - "vb" helpviewer_keywords: - "geometry classes [WPF]" - "graphics [WPF], geometry classes" ms.assetid: 9fba8934-98b7-4af6-82f6-f4ef887f963a --- # Geometry Overview This overview describes how to use the Windows Presentation Foundation (WPF) classes to describe shapes. This topic also contrasts the differences between objects and elements. ## What Is a Geometry? The class and the classes which derive from it, such as , , and , enable you to describe the geometry of a 2D shape. These geometric descriptions have many uses, such defining a shape to paint to the screen or defining hit-test and clip regions. You can even use a geometry to define an animation path. objects can be simple, such as rectangles and circles, or composite, created from two or more geometry objects. More complex geometries can be created by using the and classes, which enable you to describe arcs and curves. Because a is a type of , objects provide several special features: they can be declared as [resources](/dotnet/desktop-wpf/fundamentals/xaml-resources-define), shared among multiple objects, made read-only to improve performance, cloned, and made thread-safe. For more information about the different features provided by objects, see the [Freezable Objects Overview](../advanced/freezable-objects-overview.md). ## Geometries vs. Shapes The and classes seem similar in that they both describe 2D shapes (compare and for example), but there are important differences. For one, the class inherits from the class while the class inherits from . Because they are elements, objects can render themselves and participate in the layout system, while objects cannot. Although objects are more readily usable than objects, objects are more versatile. While a object is used to render 2D graphics, a object can be used to define the geometric region for 2D graphics, define a region for clipping, or define a region for hit testing, for example. ### The Path Shape One , the class, actually uses a to describe its contents. By setting the property of the with a and setting its and properties, you can render a . ## Common Properties That Take a Geometry The preceding sections mentioned that Geometry objects can be used with other objects for a variety of purposes, such as drawing shapes, animating, and clipping. The following table lists several classes that have properties that take a object. |Type|Property| |----------|--------------| ||| ||| ||| ||| ||| ## Simple Geometry Types The base class for all geometries is the abstract class . The classes which derive from the class can be roughly grouped into three categories: simple geometries, path geometries, and composite geometries. Simple geometry classes include , , and and are used to create basic geometric shapes, such as lines, rectangles, and circles. - A is defined by specifying the start point of the line and the end point. - A is defined with a structure which specifies its relative position and its height and width. You can create a rounded rectangle by setting the and properties. - An is defined by a center point, an x-radius and a y-radius. The following examples show how to create simple geometries for rendering and for clipping. These same shapes, as well as more complex shapes, can be created using a or by combining geometry objects together, but these classes provide a simpler means for producing these basic geometric shapes. The following example shows how to create and render a . As noted previously, a object is unable to draw itself, so the example uses a shape to render the line. Because a line has no area, setting the property of the would have no effect; instead, only the and properties are specified. The following illustration shows the output from the example. ![A LineGeometry](./media/graphicsmm-line.gif "graphicsmm_line") A LineGeometry drawn from (10,20) to (100,130) [!code-xaml[GeometryOverviewSamples_snip#GraphicsMMLineGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_snip/CS/GeometryExamples.xaml#graphicsmmlinegeometryexample)] [!code-csharp[GeometryOverviewSamples_procedural_snip#GraphicsMMLineGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/CSharp/GeometryExamples.cs#graphicsmmlinegeometryexample)] [!code-vb[GeometryOverviewSamples_procedural_snip#GraphicsMMLineGeometryExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/visualbasic/geometryexamples.vb#graphicsmmlinegeometryexample)] The next example shows how to create and render an . The examples sets the of the is set to the point `50,50` and the x-radius and the y-radius are both set to `50`, which creates a circle with a diameter of 100. The interior of the ellipse is painted by assigning a value to the Path element's Fill property, in this case . The following illustration shows the output from the example. ![An EllipseGeometry](./media/graphicsmm-ellipse.gif "graphicsmm_ellipse") An EllipseGeometry drawn at (50,50) [!code-xaml[GeometryOverviewSamples_snip#GraphicsMMEllipseGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_snip/CS/GeometryExamples.xaml#graphicsmmellipsegeometryexample)] [!code-csharp[GeometryOverviewSamples_procedural_snip#GraphicsMMEllipseGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/CSharp/GeometryExamples.cs#graphicsmmellipsegeometryexample)] [!code-vb[GeometryOverviewSamples_procedural_snip#GraphicsMMEllipseGeometryExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/visualbasic/geometryexamples.vb#graphicsmmellipsegeometryexample)] The following example shows how to create and render a . The position and the dimensions of the rectangle are defined by a structure. The position is `50,50` and the height and width are both `25`, which creates a square. The following illustration shows the output from the example. ![A RectangleGeometry](./media/graphicsmm-rectangle.gif "graphicsmm_rectangle") A RectangleGeometry drawn at 50,50 [!code-xaml[GeometryOverviewSamples_snip#GraphicsMMRectangleGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_snip/CS/GeometryExamples.xaml#graphicsmmrectanglegeometryexample)] [!code-csharp[GeometryOverviewSamples_procedural_snip#GraphicsMMRectangleGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/CSharp/GeometryExamples.cs#graphicsmmrectanglegeometryexample)] [!code-vb[GeometryOverviewSamples_procedural_snip#GraphicsMMRectangleGeometryExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/visualbasic/geometryexamples.vb#graphicsmmrectanglegeometryexample)] The following example shows how to use an as the clip region for an image. An object is defined with a of 200 and a of 150. An with a value of 100, a value of 75, and a value of 100,75 is set to the property of the image. Only the part of the image that is within the area of the ellipse will be displayed. The following illustration shows the output from the example. ![An Image with and without clipping](./media/graphicsmm-clipexample.png "graphicsmm_clipexample") An EllipseGeometry used to clip an Image control [!code-xaml[GeometryOverviewSamples_snip#GraphicsMMImageClipGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_snip/CS/GeometryExamples.xaml#graphicsmmimageclipgeometryexample)] [!code-csharp[GeometryOverviewSamples_procedural_snip#GraphicsMMImageClipGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/CSharp/GeometryExamples.cs#graphicsmmimageclipgeometryexample)] [!code-vb[GeometryOverviewSamples_procedural_snip#GraphicsMMImageClipGeometryExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/visualbasic/geometryexamples.vb#graphicsmmimageclipgeometryexample)] ## Path Geometries The class and its lightweight equivalent, the class, provide the means to describe multiple complex figures composed of arcs, curves, and lines. At the heart of a is a collection of objects, so named because each figure describes a discrete shape in the . Each is itself comprised of one or more objects, each of which describes a segment of the figure. There are many types of segments. |Segment Type|Description|Example| |------------------|-----------------|-------------| ||Creates an elliptical arc between two points.|[Create an Elliptical Arc](how-to-create-an-elliptical-arc.md).| ||Creates a cubic Bezier curve between two points.|[Create a Cubic Bezier Curve](how-to-create-a-cubic-bezier-curve.md).| ||Creates a line between two points.|[Create a LineSegment in a PathGeometry](how-to-create-a-linesegment-in-a-pathgeometry.md)| ||Creates a series of cubic Bezier curves.|See the type page.| ||Creates a series of lines.|See the type page.| ||Creates a series of quadratic Bezier curves.|See the page.| ||Creates a quadratic Bezier curve.|[Create a Quadratic Bezier Curve](how-to-create-a-quadratic-bezier-curve.md).| The segments within a are combined into a single geometric shape with the end point of each segment being the start point of the next segment. The property of a specifies the point from which the first segment is drawn. Each subsequent segment starts at the end point of the previous segment. For example, a vertical line from `10,50` to `10,150` can be defined by setting the property to `10,50` and creating a with a property setting of `10,150`. The following example creates a simple comprised of a single with a and displays it using a element. The object's is set to `10,20` and a is defined with an end point of `100,130`. The following illustration shows the created by this example. ![A LineGeometry](./media/graphicsmm-line.gif "graphicsmm_line") A PathGeometry that contains a single LineSegment [!code-xaml[GeometryOverviewSamples_snip#GraphicsMMPathGeometryLineExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_snip/CS/GeometryExamples.xaml#graphicsmmpathgeometrylineexample)] [!code-csharp[GeometryOverviewSamples_procedural_snip#GraphicsMMPathGeometryLineExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/CSharp/GeometryExamples.cs#graphicsmmpathgeometrylineexample)] [!code-vb[GeometryOverviewSamples_procedural_snip#GraphicsMMPathGeometryLineExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/visualbasic/geometryexamples.vb#graphicsmmpathgeometrylineexample)] It is worth contrasting this example with the preceding example. The syntax used for a is much more verbose than that used for a simple , and it may make more sense to use the class in this case, but the verbose syntax of the allows for extremely intricate and complex geometric regions. More complex geometries can be created by using a combination of objects. The next example uses a , a , and an to create shape. The example first creates a cubic Bezier curve is by defining four points: a start point, which is the end point of the previous segment, an end point (), and two control points ( and ). The two control points of a cubic Bezier curve behave like magnets, attracting portions of what would otherwise be a straight line towards themselves, producing a curve. The first control point, , affects the beginning portion of the curve; the second control point, , affects the ending portion of the curve. The example then adds a , which is drawn between the end point of the preceding that preceded it to the point specified by its property. The example then adds an , which is drawn from the end point of the preceding to the point specified by its property. The example also specifies the arc's x- and y-radius (), a rotation angle (), a flag indicating how large the angle of the resulting arc should be (), and a value indicating in which direction the arc is drawn (). The following illustration shows the shape created by this example. ![A PathGeometry with an arc.](./media/graphicsmm-path2.gif "graphicsmm_path2") A PathGeometry [!code-xaml[GeometryOverviewSamples_snip#GraphicsMMPathGeometryComplexExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_snip/CS/GeometryExamples.xaml#graphicsmmpathgeometrycomplexexample)] [!code-csharp[GeometryOverviewSamples_procedural_snip#GraphicsMMPathGeometryComplexExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/CSharp/GeometryExamples.cs#graphicsmmpathgeometrycomplexexample)] [!code-vb[GeometryOverviewSamples_procedural_snip#GraphicsMMPathGeometryComplexExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/visualbasic/geometryexamples.vb#graphicsmmpathgeometrycomplexexample)] Even more complex geometries can be created by using multiple objects within a . The following example creates a with two objects, each of which contains multiple objects. The from the above example and a with a and a are used. A is defined with an array of points and the is defined with a control point and an end point. The following illustration shows the shape created by this example. ![A PathGeometry with an arc that includes two PathFigure objects.](./media/graphicsmm-path.gif "graphicsmm_path") A PathGeometry with multiple figures [!code-xaml[GeometryOverviewSamples_snip#GraphicsMMPathGeometryComplexMultiExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_snip/CS/GeometryExamples.xaml#graphicsmmpathgeometrycomplexmultiexample)] [!code-csharp[GeometryOverviewSamples_procedural_snip#GraphicsMMPathGeometryComplexMultiExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/CSharp/GeometryExamples.cs#graphicsmmpathgeometrycomplexmultiexample)] [!code-vb[GeometryOverviewSamples_procedural_snip#GraphicsMMPathGeometryComplexMultiExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/visualbasic/geometryexamples.vb#graphicsmmpathgeometrycomplexmultiexample)] ### StreamGeometry Like the class, a defines a complex geometric shape that may contain curves, arcs, and lines. Unlike a , the contents of a do not support data binding, animation, or modification. Use a when you need to describe a complex geometry but do not want the overhead of supporting data binding, animation, or modification. Because of its efficiency, the class is a good choice for describing adorners. For an example, see [Create a Shape Using a StreamGeometry](how-to-create-a-shape-using-a-streamgeometry.md). ### Path Markup Syntax The and types support a Extensible Application Markup Language (XAML) attribute syntax using a special series of move and draw commands. For more information, see [Path Markup Syntax](path-markup-syntax.md). ## Composite Geometries Composite geometry objects can be created using a , a , or by calling the static method . - The object and the method performs a Boolean operation to combine the area defined by two geometries. objects that have no area are discarded. Only two objects can be combined (although these two geometries may also be composite geometries). - The class creates an amalgamation of the objects it contains without combining their area. Any number of objects can be added to a . For an example, see [Create a Composite Shape](how-to-create-a-composite-shape.md). Because they do not perform a combine operation, using objects provides performance benefits over using objects or the method. ## Combined Geometries The preceding section mentioned the object and the method combine the area defined by the geometries they contain. The enumeration specifies how the geometries are combined. The possible values for the property are: , , , and . In the following example, a is defined with a combine mode of Union. Both and the are defined as circles of the same radius, but with centers offset by 50. [!code-xaml[GeometrySample#23](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometrySample/CS/combininggeometriesexample.xaml#23)] ![Results of the Union combine mode](./media/mil-task-combined-geometry-union.PNG "mil_task_combined_geometry_union") In the following example, a is defined with a combine mode of . Both and the are defined as circles of the same radius, but with centers offset by 50. [!code-xaml[GeometrySample#24](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometrySample/CS/combininggeometriesexample.xaml#24)] ![Results of the Xor combine mode](./media/mil-task-combined-geometry-xor.PNG "mil_task_combined_geometry_xor") For additional examples, see [Create a Composite Shape](how-to-create-a-composite-shape.md) and [Create a Combined Geometry](how-to-create-a-combined-geometry.md). ## Freezable Features Because it inherits from the class, the class provide several special features: objects can be declared as [XAML Resources](/dotnet/desktop-wpf/fundamentals/xaml-resources-define), shared among multiple objects, made read-only to improve performance, cloned, and made thread-safe. For more information about the different features provided by objects, see the [Freezable Objects Overview](../advanced/freezable-objects-overview.md). ## Other Geometry Features The class also provides useful utility methods, such as the following: - - Gets the area of the . - - Determines whether the Geometry contains another . - - Determines whether the stroke of a contains a specified point. See the class for a complete listing of its methods. ## See also - - - - - [2D Graphics and Imaging](../advanced/optimizing-performance-2d-graphics-and-imaging.md) - [Path Markup Syntax](path-markup-syntax.md) - [How-to Topics](geometries-how-to-topics.md) - [Animation Overview](animation-overview.md) - [Shapes and Basic Drawing in WPF Overview](shapes-and-basic-drawing-in-wpf-overview.md) - [Drawing Objects Overview](drawing-objects-overview.md)