- SolidColorBrush
- LinearGradientBrush
- RadialGradientBrush
- DrawingBrush
- ImageBrush
- 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!!