--- title: "Brush Transformation Overview" ms.date: "03/30/2017" ms.topic: overview dev_langs: - "csharp" - "vb" helpviewer_keywords: - "brushes [WPF], transformation properties" - "properties [WPF], transformation" - "transformation properties of brushes [WPF]" ms.assetid: 8b9bfc09-12fd-4cd5-b445-99949f27bc39 --- # Brush Transformation Overview The Brush class provides two transformation properties: and . The properties enable you to rotate, scale, skew, and translate a brush's contents. This topic describes the differences between these two properties and provides examples of their usage. ## Prerequisites To understand this topic, you should understand the features of the brush that you are transforming. For and , see the [Painting with Solid Colors and Gradients Overview](painting-with-solid-colors-and-gradients-overview.md). For , , or , see [Painting with Images, Drawings, and Visuals](painting-with-images-drawings-and-visuals.md). You should also be familiar with the 2D transforms described in the [Transforms Overview](transforms-overview.md). ## Differences between the Transform and RelativeTransform Properties When you apply a transform to a brush's property, you need to know the size of the painted area if you want to transform the brush contents about its center. Suppose the painted area is 200 device independent pixels wide and 150 tall. If you used a to rotate the brush's output 45 degrees about its center, you'd give the a of 100 and a of 75. When you apply a transform to a brush's property, that transform is applied to the brush before its output is mapped to the painted area. The following list describes the order in which a brush’s contents are processed and transformed. 1. Process the brush’s contents. For a , this means determining the gradient area. For a , the is mapped to the . This becomes the brush’s output. 2. Project the brush’s output onto the 1 x 1 transformation rectangle. 3. Apply the brush’s , if it has one. 4. Project the transformed output onto the area to paint. 5. Apply the brush’s , if it has one. Because the is applied while the brush’s output is mapped to a 1 x 1 rectangle, transform center and offset values appear to be relative. For example, if you used a to rotate the brush's output 45 degrees about its center, you'd give the a of 0.5 and a of 0.5. The following illustration shows the output of several brushes that have been rotated by 45 degrees using the and properties. ![RelativeTransform and Transform properties](./media/graphicsmm-brushrelativetransform-transform-small.png "graphicsmm_brushrelativetransform_transform_small") ## Using RelativeTransform with a TileBrush Because tile brushes are more complex than other brushes, applying a to one might produce unexpected results. For example, take the following image. ![The source image](./media/graphicsmm-reltransform-1-original-image.jpg "graphicsmm_reltransform_1_original_image") The following example uses an to paint a rectangular area with the preceding image. It applies a to the object's property, and sets its property to , which should preserve the image's aspect ratio when it is stretched to completely fill the rectangle. [!code-xaml[BrushOverviewExamples_snip#GraphicsMMRelativeTransformExample2Inline](~/samples/snippets/xaml/VS_Snippets_Wpf/BrushOverviewExamples_snip/XAML/RelativeTransformIllustration.xaml#graphicsmmrelativetransformexample2inline)] This example produces the following output: ![The transformed output](./media/graphicsmm-reltransform-6-output.png "graphicsmm_reltransform_6_output") Notice that the image is distorted, even though the brush's was set to . That's because the relative transform is applied after the brush's is mapped to its . The following list describes each step of the process: 1. Project the brush's contents () onto its base tile () using the brush's setting. ![Stretch the Viewbox to fit the Viewport](./media/graphicsmm-reltransform-2-viewbox-to-viewport.png "graphicsmm_reltransform_2_viewbox_to_viewport") 2. Project the base tile onto the 1 x 1 transformation rectangle. ![Map the Viewport to the transformation rectangle](./media/graphicsmm-reltransform-3-output-to-transform.png "graphicsmm_reltransform_3_output_to_transform") 3. Apply the . ![Apply the relative transform](./media/graphicsmm-reltransform-4-transform-rotate.png "graphicsmm_reltransform_4_transform_rotate") 4. Project the transformed base tile onto the area to paint. ![Project the transformed brush onto the output area](./media/graphicsmm-reltransform-5-transform-to-output.png "graphicsmm_reltransform_5_transform_to_output") ## Example: Rotate an ImageBrush 45 Degrees The following example applies a to the property of an . The object's and properties are both set to 0.5, the relative coordinates of the content's center point. As a result, the brush's contents are rotated about its center. [!code-csharp[BrushesIntroduction_snip#ImageBrushRelativeTransformExample](~/samples/snippets/csharp/VS_Snippets_Wpf/BrushesIntroduction_snip/CSharp/BrushTransformExample.cs#imagebrushrelativetransformexample)] [!code-vb[BrushesIntroduction_snip#ImageBrushRelativeTransformExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BrushesIntroduction_snip/visualbasic/brushtransformexample.vb#imagebrushrelativetransformexample)] [!code-xaml[BrushesIntroduction_snip#ImageBrushRelativeTransformExample](~/samples/snippets/xaml/VS_Snippets_Wpf/BrushesIntroduction_snip/XAML/BrushTransformExample.xaml#imagebrushrelativetransformexample)] The next example also applies a to an , but uses the property instead of the property. To rotate the brush about its center, the object's and must be set to absolute coordinates. Because the rectangle being painted by the brush is 175 by 90 pixels, its center point is (87.5, 45). [!code-csharp[BrushesIntroduction_snip#ImageBrushTransformExample](~/samples/snippets/csharp/VS_Snippets_Wpf/BrushesIntroduction_snip/CSharp/BrushTransformExample.cs#imagebrushtransformexample)] [!code-vb[BrushesIntroduction_snip#ImageBrushTransformExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BrushesIntroduction_snip/visualbasic/brushtransformexample.vb#imagebrushtransformexample)] [!code-xaml[BrushesIntroduction_snip#ImageBrushTransformExample](~/samples/snippets/xaml/VS_Snippets_Wpf/BrushesIntroduction_snip/XAML/BrushTransformExample.xaml#imagebrushtransformexample)] The following illustration shows the brush without a transform, with the transform applied to the property, and with the transform applied to the property. ![Brush RelativeTransform and Transform settings](./media/wcpsdk-graphicsmm-transformandrelativetransform.png "wcpsdk_graphicsmm_transformandrelativetransform") This example is part of a larger sample. For the complete sample, see the [Brushes Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/Brushes). For more information about brushes, see the [WPF Brushes Overview](wpf-brushes-overview.md). ## See also - - - - - [Painting with Solid Colors and Gradients Overview](painting-with-solid-colors-and-gradients-overview.md) - [Painting with Images, Drawings, and Visuals](painting-with-images-drawings-and-visuals.md) - [Transforms Overview](transforms-overview.md)