--- title: Shapes and basic drawing overview description: Enhance your user interface with ready-to-use shapes and several layers of rendering services in Windows Presentation Foundation (WPF). ms.date: "03/30/2017" dev_langs: - "csharp" - "vb" - "cpp" helpviewer_keywords: - "shapes [WPF], about shapes" - "basic drawing [WPF]" - "vector drawing [WPF], overview" - "vectors [WPF], drawing" - "Shape objects [WPF]" ms.assetid: 66d7a6d6-e3b6-47bc-8dfe-8a1b26f7d901 --- # Shapes and Basic Drawing in WPF Overview This topic gives an overview of how to draw with objects. A is a type of that enables you to draw a shape to the screen. Because they are UI elements, objects can be used inside elements and most controls. [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] offers several layers of access to graphics and rendering services. At the top layer, objects are easy to use and provide many useful features, such as layout and participation in the [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] event system. ## Shape Objects [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] provides a number of ready-to-use objects. All shape objects inherit from the class. Available shape objects include , , , , , and . objects share the following common properties. - : Describes how the shape's outline is painted. - : Describes the thickness of the shape's outline. - : Describes how the interior of the shape is painted. - Data properties to specify coordinates and vertices, measured in device-independent pixels. Because they derive from , shape objects can be used inside panels and most controls. The panel is a particularly good choice for creating complex drawings because it supports absolute positioning of its child objects. The class enables you to draw a line between two points. The following example shows several ways to specify line coordinates and stroke properties. [!code-xaml[drawingwithshapeelements#LineExample1](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingWithShapeElements/CS/lineexample.xaml#lineexample1)] [!code-cpp[shapesprocedural#ShapesProceduralLine](~/samples/snippets/cpp/VS_Snippets_Wpf/ShapesProcedural/CPP/ShapesProcedural.cpp#shapesproceduralline)] [!code-csharp[shapesprocedural#ShapesProceduralLine](~/samples/snippets/csharp/VS_Snippets_Wpf/ShapesProcedural/Csharp/ShapesProcedural.cs#shapesproceduralline)] [!code-vb[shapesprocedural#ShapesProceduralLine](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ShapesProcedural/VisualBasic/ShapesProceduralVB.vb#shapesproceduralline)] The following image shows the rendered . ![Line illustration](./media/shape-ovw-line2.gif "shape_ovw_line2") Although the class does provide a property, setting it has no effect because a has no area. Another common shape is the . Create an by defining the shape's and properties. To draw a circle, specify an whose and values are equal. [!code-xaml[ShapeOverviews#ShapesOVW1](~/samples/snippets/csharp/VS_Snippets_Wpf/ShapeOverviews/CS/Window1.xaml#shapesovw1)] [!code-csharp[brushesmiscsnippets_procedural_snip#SetBackgroundColorOfShapeCodeExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/BrushesMiscSnippets_procedural_snip/CSharp/SetBackgroundColorOfShapeExample.cs#setbackgroundcolorofshapecodeexamplewholepage)] [!code-vb[brushesmiscsnippets_procedural_snip#SetBackgroundColorOfShapeCodeExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BrushesMiscSnippets_procedural_snip/visualbasic/setbackgroundcolorofshapeexample.vb#setbackgroundcolorofshapecodeexamplewholepage)] The following image shows an example of a rendered . ![Ellipse illustration](./media/shape-ovw-ellipse2.png "shape_ovw_ellipse2") ## Using Paths and Geometries The class enables you to draw curves and complex shapes. These curves and shapes are described using objects. To use a , you create a and use it to set the object's property. There are a variety of objects to choose from. The , , and classes describe relatively simple shapes. To create more complex shapes or create curves, use a . ### PathGeometry and PathSegments objects are comprised of one or more objects; each represents a different "figure" or shape. Each is itself comprised of one or more objects, each representing a connected portion of the figure or shape. Segment types include the following: , , and . In the following example, a is used to draw a quadratic Bezier curve. [!code-xaml[geometrysample#34](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometrySample/CS/pathgeometryexample.xaml#34)] The following image shows the rendered shape. ![Path illustration](./media/shape-ovw-path2.gif "shape_ovw_path2") For more information about and the other classes, see the [Geometry Overview](geometry-overview.md). ### XAML Abbreviated Syntax In [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)], you may also use a special abbreviated syntax to describe a . In the following example, abbreviated syntax is used to draw a complex shape. ```xaml ``` The following image shows a rendered . ![Path illustration](./media/shape-ovw-path.PNG "shape_ovw_path") The attribute string begins with the "moveto" command, indicated by M, which establishes a start point for the path in the coordinate system of the . data parameters are case-sensitive. The capital M indicates an absolute location for the new current point. A lowercase m would indicate relative coordinates. The first segment is a cubic Bezier curve beginning at (100,200) and ending at (400,175), drawn using the two control points (100,25) and (400,350). This segment is indicated by the C command in the attribute string. Again, the capital C indicates an absolute path; the lowercase c would indicate a relative path. The second segment begins with an absolute horizontal "lineto" command H, which specifies a line drawn from the preceding subpath's endpoint (400,175) to a new endpoint (280,175). Because it is a horizontal "lineto" command, the value specified is an *x*-coordinate. For the complete path syntax, see the reference and [Create a Shape by Using a PathGeometry](how-to-create-a-shape-by-using-a-pathgeometry.md). ## Painting Shapes objects are used to paint a shape's and . In the following example, the stroke and fill of an are specified. Note that valid input for brush properties can be either a keyword or hexadecimal color value. For more information about available color keywords, see properties of the class in the namespace. ```xaml

``` The following image shows the rendered . ![An ellipse](./media/shape-ovw-ellipsefill.PNG "shape_ovw_ellipsefill") Alternatively, you can use property element syntax to explicitly create a object to paint the shape with a solid color. ```xaml ``` The following illustration shows the rendered shape. ![SolidColorBrush illustration](./media/shape-ovw-solidcolorbrush.PNG "shape_ovw_solidcolorbrush") You can also paint a shape's stroke or fill with gradients, images, patterns, and more. For more information, see the [Painting with Solid Colors and Gradients Overview](painting-with-solid-colors-and-gradients-overview.md). ## Stretchable Shapes The , , , , and classes all have a property. This property determines how a object's contents (the shape to be drawn) is stretched to fill the object's layout space. A object's layout space is the amount of space the is allocated by the layout system, because of either an explicit and setting or because of its and settings. For additional information on layout in Windows Presentation Foundation, see [Layout](../advanced/layout.md) overview. The Stretch property takes one of the following values: - : The object's contents are not stretched. - : The object's contents are stretched to fill its layout space. Aspect ratio is not preserved. - : The object's contents are stretched as much as possible to fill its layout space while preserving its original aspect ratio. - : The object's contents are stretched to completely fill its layout space while preserving its original aspect ratio. Note that, when a object's contents are stretched, the object's outline is painted after the stretching. In the following example, a is used to draw a very small triangle from (0,0) to (0,1) to (1,1). The object's and are set to 100, and its stretch property is set to Fill. As a result, the object's contents (the triangle) are stretched to fill the larger space. ```xaml ``` ```csharp PointCollection myPointCollection = new PointCollection(); myPointCollection.Add(new Point(0,0)); myPointCollection.Add(new Point(0,1)); myPointCollection.Add(new Point(1,1)); Polygon myPolygon = new Polygon(); myPolygon.Points = myPointCollection; myPolygon.Fill = Brushes.Blue; myPolygon.Width = 100; myPolygon.Height = 100; myPolygon.Stretch = Stretch.Fill; myPolygon.Stroke = Brushes.Black; myPolygon.StrokeThickness = 2; ``` ## Transforming Shapes The class provides the means to transform shapes in a two-dimensional plane. The different types of transformation include rotation (), scale (), skew (), and translation (). A common transform to apply to a shape is a rotation. To rotate a shape, create a and specify its . An of 45 rotates the element 45 degrees clockwise; an angle of 90 rotates the element 90 degrees clockwise; and so on. Set the and properties if you want to control the point about which the element is rotated. These property values are expressed in the coordinate space of the element being transformed. and have default values of zero. Finally, apply the to the element. If you don't want the transform to affect layout, set the shape's property. In the following example, a is used to rotate a shape 45 degrees about the shape's top left corner (0,0). [!code-xaml[transformssample#14](~/samples/snippets/csharp/VS_Snippets_Wpf/transformsSample/CS/RotateTransformExample.xaml#14)] In the next example, another shape is rotated 45 degrees, but this time it's rotated about the point (25,50). [!code-xaml[transformssample#15](~/samples/snippets/csharp/VS_Snippets_Wpf/transformsSample/CS/RotateTransformExample.xaml#15)] The following illustration shows the results of applying the two transforms. ![45 degree rotations with different center points](./media/wcpsdk-graphicsmm-rotatetransform45degrees.gif "wcpsdk_graphicsmm_rotatetransform45degrees") In the previous examples, a single transform was applied to each shape object. To apply multiple transforms to a shape (or any other UI element), use a . ## See also - [2D Graphics and Imaging](../advanced/optimizing-performance-2d-graphics-and-imaging.md) - [Painting with Solid Colors and Gradients Overview](painting-with-solid-colors-and-gradients-overview.md) - [Geometry Overview](geometry-overview.md) - [Walkthrough: My first WPF desktop application](../getting-started/walkthrough-my-first-wpf-desktop-application.md) - [Animation Overview](animation-overview.md)