More of Brushes | WPF Tutorial pdf

As I have already discussed the most common Brush viz LinearGradientBrush, SolidColorBrush; Let us look into other brushes that are available to us.
1. RadialGradientBrush : It produces a circular gradient. Thus if I place a RadialGradientBrush instead a LinearGradientBrush, it will show you the Circular gradient.

In the above RadialGradientBrush is used to produce these borders. Lets look at the code :
<Border Width="50" Height="50" BorderBrush="Black" BorderThickness="2">
<Border.Background>
<RadialGradientBrush GradientOrigin=".25,.75"
RadiusX=".6" RadiusY=".6">
<RadialGradientBrush.GradientStops>
<GradientStop Color="Red"
Offset="0"></GradientStop>
<GradientStop Color="Yellow"
Offset="1"></GradientStop>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Border.Background>
</Border>The GradientOrigin determines where the Origin is when we take the whole area to be 1. So If you place a value more than 1, Origin will lie outside the border. I have placed .25,.75 in this case.
The RadiusX and RadiusY determines the Radius of the Gradient. Finally the GradientStops determines the actual gradient colors. Just interchanging the Offsets will produce the 2nd image.
2. ImageBrush : It allows you to draw using Image. You need to specify the ImageSource to determine the what Image to be drawn.

Here an ImageBrush is specified with my image. I have also added a BitmapEffect to the Border with some noise to distort the image a little.
<Border Width="100" Height="100" >
<Border.Background>
<ImageBrush ImageSource="logo.jpg" Opacity=".7">
<!--<ImageBrush.Transform>
<SkewTransform AngleX="10" AngleY="10" />
</ImageBrush.Transform>-->
</ImageBrush>
</Border.Background>
<Border.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="Brown" GlowSize="20"
Noise="3"/>
</Border.BitmapEffect>
</Border>The Opacity specifies the opacity of the image drawn inside the Border.
In addition to this I have added one BitmapEffect with OuterGlowEffect. OuterGlow allows you to glow the outer section of the Border. I used Brown glow with GlowSize = 20 and Noise=3.
Noise is used to distort the image, just seen in the image.
3. VisualBrush : This allows you to draw using an already visual element. It is very simple to use. Just see

In the first Image, I have used VisualBrush to draw the Image on the right side which draws itself
as the left side. I have modified the OuterGlowBitmapEffect to BevelBitmapEffect in the next
version, to have a bevel effect to the image. The VisualBrush is also flipped XY so it seems upside
down. See how the code looks like :
<Border Width="100" Height="100" x:Name="brdElement" CornerRadius="5" >
<Border.Background>
<ImageBrush ImageSource="logo.jpg" Opacity=".7">
</ImageBrush>
</Border.Background>
<Border.BitmapEffect>
<BevelBitmapEffect BevelWidth="5" EdgeProfile="BulgedUp"
LightAngle="90" Smoothness=".5" Relief=".7"/>
</Border.BitmapEffect>
</Border>
<Border Width="100" Height="100" Margin="20,0,0,0">
<Border.Background>
<VisualBrush TileMode="FlipXY" Viewport="1,1,1,1"
Stretch="UniformToFill" Visual="{Binding
ElementName=brdElement}"></VisualBrush>
</Border.Background>
</Border>
The VisualBrush is bound to brdElement, which represents the Visual element placed in the window. TileMode indicates the Flip direction of the actual visual. Thus if there is a button or any other visual placed other than the border, it would look flipped as well. So VisualBrush comes very handy at times.
Other than that there are lots of Brushes as well like DrawingBrush, used to draw Geometry objects etc.