Brushes In WPF

Brush ( Part -1 )

Hey Guys!! This post will help you to learn about different types of brushes in WPF. Using brushes one can apply different patterns and colours to the background and foreground of the controls in WPF. In this post we will see how to create different fill patterns using brushes to apply them in some controls.

It is not much fun to use only one color in the background of a page. You might have seen lots of websites having attractive or flashy backgrounds. Before WPF came in the market, .Net deveopers used to take some help of flash, photoshop or some other tools to create images those can be used as backgrounds for the page. But, .Net 3.5 provides very easy way of creating such flashy or attractive colors to your application. One can use animations and different shapes also to add beauty to your application. We will cover shapes and animation in next posts. Let's now concentrate on how we can use Brushes to make our application more attractive. There are mainly six types of brushes in WPF.

1. SolidColorBrush
2. LinearGradientBrush
3. RadialGradientBrush
4. DrawingBrush
5. ImageBrush
6. VisualBrush

We will see first three in detail in this post. Let's start it one by one.

(1) SolidColorBrush - In previous post we have learned how to add canvas. We will apply some background color for it. Here is a code that will set background color "AliceBlue".

XAML Code:

<Canvas Name="cnvPaint" Height="700" Width="700">
<Canvas.Background>
<SolidColorBrush Color="AliceBlue"/>
</Canvas.Background>
</Canvas>

C# Code:

SolidColorBrush s = new SolidColorBrush(Colors.Blue);
cnvMain.Background = s;

OR

cnvMain.Background = new SolidColorBrush(Colors.Blue);

As you can see in above C# code, we can use some of the basic colors from Colors class. We can create our own brush and can set some appropriate properties .

From here on, we will have only XAML code. I think, you can write C# code by your self now. You just have to create object of the brush you want to use and can set the same properties shown in XAML code for that object and can use you brush at run time.

(2) LinearGradientBrush - The following piece of code shows how one can add LinearGradientBrush. Just copy and paste it to see the magic!!

XAML Code:

<Rectangle Height="150" Width="150">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,1" EndPoint="0,0">
<GradientStop Color="Black" Offset="0.15"/>
<GradientStop Color="White" Offset="0.30"/>
<GradientStop Color="Red" Offset="0.45"/>
<GradientStop Color="Yellow" Offset="0.60"/>
<GradientStop Color="Brown" Offset="0.75"/>
<GradientStop Color="CadetBlue" Offset="0.90"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>

XAML Code:

<Rectangle Canvas.Left="160" Height="150" Width="150">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<GradientStop Color="Black" Offset="0.005"/>
<GradientStop Color="White" Offset="0.010"/>
<GradientStop Color="Black" Offset="0.015"/>
<GradientStop Color="White" Offset="0.020"/>
<GradientStop Color="Black" Offset="0.025"/>
<GradientStop Color="White" Offset="0.030"/>
<GradientStop Color="Black" Offset="0.035"/>
<GradientStop Color="White" Offset="0.50"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>

You can change the value for starrt point and end point to see the change. use {(0,1),(0,0)}, {(0,0),(1,1)} etc.

(3) RadialGradientBrush - The following piece of code shows how one can add RadialGradientBrush. Just copy and paste it to see the magic!!

XAML Code:

<Rectangle Canvas.Top="160" Canvas.Left="160" Height="150" Width="150">
<Rectangle.Fill>
<RadialGradientBrush Center="0,0" GradientOrigin="1,1" >
<GradientStop Color="Red" Offset="0.0"/>
<GradientStop Color="White" Offset="0.10"/>
<GradientStop Color="Blue" Offset="0.20"/>
<GradientStop Color="White" Offset="0.30"/>
<GradientStop Color="Black" Offset="0.40"/>
<GradientStop Color="White" Offset="0.50"/>
<GradientStop Color="BurlyWood" Offset="0.60"/>
<GradientStop Color="White" Offset="0.70"/>
<GradientStop Color="Red" Offset="0.80"/>
<GradientStop Color="White" Offset="0.90"/>
<GradientStop Color="Red" Offset="1.00"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>

HAPPY CODING!!

---