--- title: "TileBrush Overview" ms.date: "03/30/2017" dev_langs: - "csharp" - "vb" helpviewer_keywords: - "TileBrush [WPF]" - "brushes [WPF], TileBrush" ms.assetid: aa4a7b7e-d09d-44c2-8d61-310c50e08d68 --- # TileBrush Overview objects provide you with a great deal of control over how an area is painted with an image, , or . This topic describes how to use features to gain more control over how an , , or paints an area. ## Prerequisites To understand this topic, it's helpful to understand how to use the basic features of the , , or class. For an introduction to these types, see the [Painting with Images, Drawings, and Visuals](painting-with-images-drawings-and-visuals.md). ## Painting an Area with Tiles , , are are types of objects. Tile brushes 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. Painting an area with a tile brush involves three components: content, the base tile, 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 a TileMode of Tile The output area is the area being painted, such as the of an or the of a . The next sections describe the other two components of a . ## Brush Content There are three different types of and each paints with a different type of content. - If the brush is an , this content is an image The property specifies the contents of the . - If the brush is a , this content is a drawing. The property specifies the contents of the . - If the brush is a , this content is a visual. The property specifies the content of the . You can specify the position and dimensions of content by using the property, although it is common to leave the set to its default value. By default, the is configured to completely contain the brush's contents. For more information about configuring the , see the property page. ## The Base Tile A projects its content onto a base tile. The property controls how content is stretched to fill the base tile. The property accepts the following values, defined by the enumeration: - : The brush's content is not stretched to fill the tile. - : The brush's content is scaled to fit the tile. Because the content's height and width are scaled independently, the original aspect ratio of the content might not be preserved. That is, the brush's content might be warped in order to completely fill the output tile. - : The brush's content is scaled so that it fits completely within the tile. The content's aspect ratio is preserved. - : The brush's content is scaled so that it completely fills the output area while preserving the content's original aspect ratio. The following image illustrates the different settings. ![Different TileBrush Stretch settings](./media/img-mmgraphics-stretchenum.jpg "img_mmgraphics_stretchenum") In the following example, the content of an is set so that it does not stretch to fill the output area. [!code-xaml[BrushOverviewExamples_snip#GraphicsMMNoStretchExample](~/samples/snippets/xaml/VS_Snippets_Wpf/BrushOverviewExamples_snip/XAML/StretchExample.xaml#graphicsmmnostretchexample)] [!code-csharp[BrushOverviewExamples_procedural_snip#GraphicsMMNoStretchExample](~/samples/snippets/csharp/VS_Snippets_Wpf/BrushOverviewExamples_procedural_snip/CSharp/StretchExample.cs#graphicsmmnostretchexample)] [!code-vb[BrushOverviewExamples_procedural_snip#GraphicsMMNoStretchExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BrushOverviewExamples_procedural_snip/visualbasic/stretchexample.vb#graphicsmmnostretchexample)] By default, a generates a single tile (the base tile) and stretches that tile to completely fill the output area. You can change the size and position of the base tile by setting the and properties. ### Base Tile Size The property determines the size and position of the base tile, and the property determines whether the is specified using absolute or relative coordinates. If the coordinates are relative, they are relative to the size of the output area. The point (0,0) represents the top left corner of the output area, and (1,1) represents the bottom right corner of the output area. To specify that the property uses absolute coordinates, set the property to . The following illustration shows the difference in output between a with relative versus absolute . Notice that the illustrations each show a tiled pattern; the next section describes how to specify tile pattern. ![Absolute and Relative Viewport Units](./media/absolute-and-relative-viewports.png "absolute_and_relative_viewports") In the following example, an image is used to create a tile that has a width and height of 50%. The base tile is located at (0,0) of the output area. [!code-xaml[BrushOverviewExamples_snip#GraphicsMMRelativeViewportUnitsExample1](~/samples/snippets/xaml/VS_Snippets_Wpf/BrushOverviewExamples_snip/XAML/TileSizeExample.xaml#graphicsmmrelativeviewportunitsexample1)] [!code-csharp[BrushOverviewExamples_procedural_snip#GraphicsMMRelativeViewportUnitsExample1](~/samples/snippets/csharp/VS_Snippets_Wpf/BrushOverviewExamples_procedural_snip/CSharp/TileSizeExample.cs#graphicsmmrelativeviewportunitsexample1)] [!code-vb[BrushOverviewExamples_procedural_snip#GraphicsMMRelativeViewportUnitsExample1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BrushOverviewExamples_procedural_snip/visualbasic/tilesizeexample.vb#graphicsmmrelativeviewportunitsexample1)] The next example sets the tiles of an to 25 by 25 device independent pixels. Because the are absolute, the tiles are always 25 by 25 pixels, regardless of the size of the area being painted. [!code-xaml[BrushOverviewExamples_snip#GraphicsMMAbsoluteViewportUnitsExample1](~/samples/snippets/xaml/VS_Snippets_Wpf/BrushOverviewExamples_snip/XAML/TileSizeExample.xaml#graphicsmmabsoluteviewportunitsexample1)] [!code-csharp[BrushOverviewExamples_procedural_snip#GraphicsMMAbsoluteViewportUnitsExample1](~/samples/snippets/csharp/VS_Snippets_Wpf/BrushOverviewExamples_procedural_snip/CSharp/TileSizeExample.cs#graphicsmmabsoluteviewportunitsexample1)] [!code-vb[BrushOverviewExamples_procedural_snip#GraphicsMMAbsoluteViewportUnitsExample1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BrushOverviewExamples_procedural_snip/visualbasic/tilesizeexample.vb#graphicsmmabsoluteviewportunitsexample1)] ### Tiling Behavior A produces a tiled pattern when its base tile does not completely fill the output area and a tiling mode other then is specified. When a tile brush's tile does not completely fill the output area, its property specifies whether the base tile should be duplicated to fill the output area and, if so, how the base tile should be duplicated. The property accepts the following values, defined by the enumeration: - : Only the base tile is drawn. - : The base tile is drawn and the remaining area is filled by repeating the base tile such that the right edge of one tile is adjacent to the left edge of the next, and similarly for bottom and top. - : The same as , but alternate columns of tiles are flipped horizontally. - : The same as , but alternate rows of tiles are flipped vertically. - : A combination of and . The following image illustrates the different tiling modes. ![Different TileBrush TileMode settings](./media/img-mmgraphics-tilemodes.gif "img_mmgraphics_tilemodes") In the following example, an image is used to paint a rectangle that is 100 pixels wide and 100 pixels tall. By setting the brush's has been set to 0,0,0.25,0.25, the brush's base tile is made to be 1/4 of the output area. The brush's is set to . so that it fills the rectangle with rows of tiles. [!code-xaml[BrushOverviewExamples_snip#GraphicsMMFlipXYExample](~/samples/snippets/xaml/VS_Snippets_Wpf/BrushOverviewExamples_snip/XAML/TilingExample.xaml#graphicsmmflipxyexample)] [!code-csharp[BrushOverviewExamples_procedural_snip#GraphicsMMFlipXYExample](~/samples/snippets/csharp/VS_Snippets_Wpf/BrushOverviewExamples_procedural_snip/CSharp/TilingExample.cs#graphicsmmflipxyexample)] [!code-vb[BrushOverviewExamples_procedural_snip#GraphicsMMFlipXYExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BrushOverviewExamples_procedural_snip/visualbasic/tilingexample.vb#graphicsmmflipxyexample)] ## See also - - - - - [Painting with Images, Drawings, and Visuals](painting-with-images-drawings-and-visuals.md) - [How-to Topics](brushes-how-to-topics.md) - [Freezable Objects Overview](../advanced/freezable-objects-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)