ARTICLE

WPF Brushes in VB.NET

Posted by Mahesh Chand in Articles | WPF using VB.NET on September 30, 2010

Tags: adialGradientBrush, inearGradientBrush, isual Brush, mageBrush, olidBrush, PF Brushes, rawingBrush, rushes in WPF, WPF Brush

This article discusses types of brushes found in WPF and how to use them in your applications.

Tweet
1632
0

Reader Level: Beginner

Introduction

Brushesand pens are objects used to draw and fill graphics objects. In this article, I will discuss various types of brushes available in XAML and WPF model, their members, and properties and how to use them in your applications.

WPFand XAML work together and there is an WPF class corresponding to each XAML control. For example, <SolidColorBrush> tag in XAML and SolidColorBrush class in WPF, both represent the solid color brush. You can create and use brushes in both ways seperately or mix them. For example, I can create a brush using XAML and then later set the same brushes property dynamically in my coding using WPF class model.

In XAML and WPF model provides following brush objects -

SolidColorBrush
LinearGradientBrush
RadialGradientBrush
DrawingBrush
Visual Brush
ImageBrush

1. Solid Color Brush

The<SolidColorBrush/> represents the solid color brush in XAML. The Color attribute of the tag represents the color used in the brush. For example, the following code creates a solid color brush with blue color.

The Color attribute can also be a hex value instead of the color name. The following code uses hex value of a color.

The following code fills a rectangle with black color.

<Rectangle.Fill>

</Rectangle.Fill>

</Rectangle>

The output looks like Figure 1, which is a filled rectangle with black color.

Figure 1. Rectangle with a solid brush

2. Linear Gradient Brush

The <LinearGradientBrush> object represents the linear gradient brush in XAML.

The following source code draws a rectangle and fills with a linear gradient brush of red and green colors.

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

The output looks like Figure 2.

Figure 2. Rectangle filled with a linear gradient brush.

3. Radial Gradient Brush

The <RadialGradientBrush/>represents the radial gradient brush in XAML. Radial gradient brush provides gradient similar to linear gradient brush, however a linear gradient brush has a start point and end point and blending is done fromthe start and ending, while radial gradient brush has a circle.

Ina radial gradient brush, you specify the gradient origin, center, and circle's X,Y radus values and GradientStop attribute specify the color of the graident.

The following source code draws a rectangle and fills with a radial gradient brush with multiple colors.

<Rectangle.Fill>

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

The output looks like Figure 3.

Figure 3. Rectangle filled with a radial gradient brush

4. Drawing Brush

DrawingBrush is a new addition to the brush types since GDI+. A Drawing Brushcan be used to paint an area with shapes, text, images, and even video.The <DrawingBrush/> represents the drawing brush in XAML. A Drawing Brush uses drawing objects GeomertyDrawing, ImageDrawing, VideoDrawing, and GylphRunDrawing to draw shapes, images, video, and text respectively.

Thefollowing code uses a DrawingBrush to fill two ellipses. I will cover DrawingBrush objects, its methods and properties in more details in my seperate article.

<Rectangle.Fill>

<DrawingBrush.Drawing>

<GeometryDrawing.Geometry>

</GeometryGroup>

</GeometryDrawing.Geometry>

</GeometryDrawing>

</DrawingBrush.Drawing>

</DrawingBrush>

</Rectangle.Fill>

</Rectangle>

The output looks like Figure 4.

Figure 4. Rectangle filled with a drawing brush

5. Visual Brush

VisualBrushis a new addition to the brush types since GDI+. A VisualBrush is usedto fill UI elements. The following code uses a VisualBrush to fill a rectangle. I will cover VisualBrush object, its methods and properties in more details in my seperate article.

<Rectangle.Fill>

<VisualBrush.Visual>

<StackPanel.Background>

<DrawingBrush.Drawing>

<GeometryDrawing.Brush>

</RadialGradientBrush>

</GeometryDrawing.Brush>

<GeometryDrawing.Geometry>

</GeometryGroup>

</GeometryDrawing.Geometry>

</GeometryDrawing>

</DrawingBrush.Drawing>

</DrawingBrush>

</StackPanel.Background>

<TextBlock FontSize="14pt" FontWeight="Bold" Margin="10">Visual Brush</TextBlock>

</StackPanel>

</VisualBrush.Visual>

</VisualBrush>

</Rectangle.Fill>

</Rectangle>

The output looks like Figure 5.

Figure 5. Rectangle filled with a visual brush

Learn more about Visual Brushes here: Visual Brush in WPF by Raj Kumar.

6. Image Brush

Animage brush uses an image as fill color to fill graphics objects such as a recntagle, ellipse, and path. The <ImageBrush/> represents the image brush in XAML. The BitmapSource property represents the imageused to fill the brush.

For example, the following code fills a rectangle with an ImageBrush.

<Rectangle.Fill>

</Rectangle.Fill>

</Rectangle>

The output looks like Figure 6.

Image 6. Rectangle with an image brush.

Summary

Inthis article, I discussed brushes available in XAML and WPF model. Clearly, there have been some improvements and additions in brushes in XAML and WPF model since GDI+.