--- title: "Painting with Images, Drawings, and Visuals" ms.date: "03/30/2017" dev_langs: - "csharp" - "vb" helpviewer_keywords: - "brushes [WPF], painting with drawings" - "painting [WPF], with drawings" - "painting [WPF], with images" - "painting with visuals [WPF]" - "brushes [WPF], painting with images" - "brushes [WPF], painting with visuals" ms.assetid: 779aac3f-8d41-49d8-8130-768244aa2240 --- # Painting with Images, Drawings, and Visuals This topic describes how to use , , and objects to paint an area with an image, a , or a . ## Prerequisites To understand this topic, you should be familiar with the different types of brushes [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] provides and their basic features. For an introduction, see the [WPF Brushes Overview](wpf-brushes-overview.md). ## Paint an Area with an Image An paints an area with an . The most common type of to use with an is a , which describes a bitmap graphic. You can use a to paint using a object, but it is simpler to use a instead. For more information about objects, see the [Imaging Overview](imaging-overview.md). To paint with an , create a and use it to load the bitmap content. Then, use the to set the property of the . Finally, apply the to the object you want to paint. In [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)], you can also just set the property of the with the path of the image to load. Like all objects, an can be used to paint objects such as shapes, panels, controls, and text. The following illustration shows some effects that can be achieved with an . ![ImageBrush output examples](./media/wcpsdk-mmgraphics-imagebrushexamples.gif "wcpsdk_mmgraphics_imagebrushexamples") Objects painted by an ImageBrush By default, an stretches its image to completely fill the area being painted, possibly distorting the image if the painted area has a different aspect ratio than the image. You can change this behavior by changing the property from its default value of to , , or . Because is a type of , you can specify exactly how an image brush fills the output area and even create patterns. For more information about advanced features, see the [TileBrush Overview](tilebrush-overview.md). ## Example: Paint an Object with a Bitmap Image The following example uses an to paint the of a . [!code-xaml[BrushOverviewExamples_snip#GraphicsMMImageBrushAsCanvasBackgroundExampleWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/BrushOverviewExamples_snip/XAML/ImageBrushExample.xaml#graphicsmmimagebrushascanvasbackgroundexamplewholepage)] [!code-csharp[BrushOverviewExamples_procedural_snip#GraphicsMMImageBrushAsCanvasBackgroundExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/BrushOverviewExamples_procedural_snip/CSharp/ImageBrushExample.cs#graphicsmmimagebrushascanvasbackgroundexamplewholepage)] [!code-vb[BrushOverviewExamples_procedural_snip#GraphicsMMImageBrushAsCanvasBackgroundExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BrushOverviewExamples_procedural_snip/visualbasic/imagebrushexample.vb#graphicsmmimagebrushascanvasbackgroundexamplewholepage)] ## Paint an Area with a Drawing A enables you to paint an area with shapes, text, images, and video. Shapes inside a drawing brush may themselves be painted with a solid color, gradient, image, or even another . The following illustration demonstrates some uses of a . ![DrawingBrush output examples](./media/wcpsdk-mmgraphics-drawingbrushexamples.png "wcpsdk_mmgraphics_drawingbrushexamples") Objects painted by a DrawingBrush A paints an area with a object. A object describes visible content, such as a shape, bitmap, video, or a line of text. Different types of drawings describe different types of content. The following is a list of the different types of drawing objects. - – Draws a shape. - – Draws an image. - – Draws text. - – Plays an audio or video file. - – Draws other drawings. Use a drawing group to combine other drawings into a single composite drawing. For more information about objects, see the [Drawing Objects Overview](drawing-objects-overview.md). Like an , a stretches its to fill its output area. You can override this behavior by changing the property from its default setting of . For more information, see the property. ## Example: Paint an Object with a Drawing The following example shows how to paint an object with a drawing of three ellipses. A is used to describe the ellipses. [!code-xaml[BrushOverviewExamples_snip#GraphicsMMDrawingBrushAsButtonBackgroundExample](~/samples/snippets/xaml/VS_Snippets_Wpf/BrushOverviewExamples_snip/XAML/DrawingBrushExample.xaml#graphicsmmdrawingbrushasbuttonbackgroundexample)] [!code-csharp[BrushOverviewExamples_procedural_snip#GraphicsMMDrawingBrushAsButtonBackgroundExample1](~/samples/snippets/csharp/VS_Snippets_Wpf/BrushOverviewExamples_procedural_snip/CSharp/DrawingBrushExample.cs#graphicsmmdrawingbrushasbuttonbackgroundexample1)] [!code-vb[BrushOverviewExamples_procedural_snip#GraphicsMMDrawingBrushAsButtonBackgroundExample1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BrushOverviewExamples_procedural_snip/visualbasic/drawingbrushexample.vb#graphicsmmdrawingbrushasbuttonbackgroundexample1)] ## Paint an Area with a Visual The most versatile and powerful of all the brushes, the paints an area with a . A is a low-level graphical type that serves as the ancestor of many useful graphical components. For example, the , , and classes are all types of objects. Using a , you can paint areas with almost any [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] graphical object. > [!NOTE] > Although is a type of object, it cannot be frozen (made read-only) when its property is set to a value other than `null`. There are two ways to specify the content of a . - Create a new and use it to set the property of the . For an example, see the [Example: Paint an Object with a Visual](#examplevisualbrush1) section that follows. - Use an existing , which creates a duplicate image of the target . You can then use the to create interesting effects, such as reflection and magnification. For an example, see the [Example: Create a Reflection](#examplevisualbrush2) section. When you define a new for a and that is a (such as a panel or control), the layout system runs on the and its child elements when the property is set to `true`. However, the root is essentially isolated from the rest of the system: styles, and external layout can't permeate this boundary. Therefore, you should explicitly specify the size of the root , because its only parent is the and therefore it cannot automatically size itself to the area being painted. For more information about layout in [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)], see the [Layout](../advanced/layout.md). Like and , a stretches its content to fill its output area. You can override this behavior by changing the property from its default setting of . For more information, see the property. ## Example: Paint an Object with a Visual In the following example, several controls and a panel are used to paint a rectangle. [!code-xaml[BrushOverviewExamples_snip#GraphicsMMVisualBrushAsRectangleBackgroundExample](~/samples/snippets/xaml/VS_Snippets_Wpf/BrushOverviewExamples_snip/XAML/VisualBrushExample.xaml#graphicsmmvisualbrushasrectanglebackgroundexample)] [!code-csharp[BrushOverviewExamples_procedural_snip#GraphicsMMVisualBrushAsRectangleBackgroundExample1](~/samples/snippets/csharp/VS_Snippets_Wpf/BrushOverviewExamples_procedural_snip/CSharp/VisualBrushExample.cs#graphicsmmvisualbrushasrectanglebackgroundexample1)] [!code-vb[BrushOverviewExamples_procedural_snip#GraphicsMMVisualBrushAsRectangleBackgroundExample1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BrushOverviewExamples_procedural_snip/visualbasic/visualbrushexample.vb#graphicsmmvisualbrushasrectanglebackgroundexample1)] ## Example: Create a Reflection The preceding example showed how to create a new for use as a background. You can also use a to display an existing visual; this capability enables you to produce interesting visual effects, such as reflections and magnification. The following example uses a to create a reflection of a that contains several elements. The following illustration shows the output that this example produces. ![A reflected Visual object](./media/graphicsmm-visualbrush-reflection-small.jpg "graphicsmm_visualbrush_reflection_small") A reflected Visual object [!code-csharp[visualbrush_markup_snip#GraphicsMMVisualBrushReflectionExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/visualbrush_markup_snip/CSharp/ReflectionExample.cs#graphicsmmvisualbrushreflectionexamplewholepage)] [!code-vb[visualbrush_markup_snip#GraphicsMMVisualBrushReflectionExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/visualbrush_markup_snip/visualbasic/reflectionexample.vb#graphicsmmvisualbrushreflectionexamplewholepage)] [!code-xaml[visualbrush_markup_snip#GraphicsMMVisualBrushReflectionExampleWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/visualbrush_markup_snip/XAML/ReflectionExample.xaml#graphicsmmvisualbrushreflectionexamplewholepage)] For additional examples that show how to magnify portions of the screen and how to create reflections, see the [VisualBrush Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/VisualBrush). ## TileBrush Features , , and are types of objects. objects provide you with a great deal of control over how an area is painted with an image, drawing, or visual. For example, instead of just painting an area with a single stretched image, you can paint an area with a series of image tiles that create a pattern. A has three primary components: content, tiles, and the output area. ![TileBrush components](./media/wcpsdk-mmgraphics-defaultcontentprojection2.png "wcpsdk_mmgraphics_defaultcontentprojection2") Components of a TileBrush with a single tile ![Components of a tiled TileBrush](./media/graphicsmm-tiledprojection.png "graphicsmm_tiledprojection") Components of a TileBrush with multiple tiles For more information about the tiling features of objects, see the [TileBrush Overview](tilebrush-overview.md). ## See also - - - - - [TileBrush Overview](tilebrush-overview.md) - [WPF Brushes Overview](wpf-brushes-overview.md) - [Imaging Overview](imaging-overview.md) - [Drawing Objects Overview](drawing-objects-overview.md) - [Opacity Masks Overview](opacity-masks-overview.md) - [WPF Graphics Rendering Overview](wpf-graphics-rendering-overview.md) - [ImageBrush Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/ImageBrush) - [VisualBrush Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/VisualBrush)