Expression Blend 4: Brushes


Brushes play a very important role in creating an application in WPF. Use of brushes make an application more attractive.

Expression Blend is a program that allows you to easily create the user interface for  applications based on Windows Presentation Foundation (WPF). Expression Blend supports creating brush resources using XAML.
One of the benefits of using Expression Blend to create brush resources is that the brush can be created using the rich toolset of Expression Blend and then, once happy with it, convert it to a resource. Through brushes we can easily change the appearance of the specific object lets learn how to use different types of brushes, and the special emphasis is given to gradient tools. Brushes are found in the properties pane, when you open your project:

TYPES OF BRUSHES
  • SOLID COLOR BRUSH
  • LINEAR GRADIENT BRUSH
  • RADIAL GRADIENT BRUSH
  • IMAGE/TILE BRUSH
1. Solid Color Brush:

It is composed of a single color and the Fill property of shape paints the internal areas of a shape. We can directly specify the Fill property. For Example: Draw an ellipse on your artboard and apply solid Brush by setting the Fill property as under:
  • The code showing how to fill the element with Color:

    Fill
    ="#FF1EB4AA"

  • Similarly create stroke by choosing solid color brush:

    Stroke
    ="#FF032B28" StrokeThickness="4"
Properties --> Brushes --> Solid Color Brush --> Fill (to fill the internal part)
Properties --> Brushes --> Solid Color Brush --> Stroke (to set the color of Stroke)

SLBrushes1.gif

                                                                                            Appearance
Code:

<Grid x:Name="LayoutRoot">
<Ellipse Fill="#FF1EB4AA" HorizontalAlignment="Left" Height="158" Margin="97,29,0,0"   VerticalAlignment="Top" Width="158" Stroke="#FF032B28" StrokeThickness="4"/>
</Grid>

2. Linear Gradient Brush:

It is composed of a linear color gradation. For example draw a rectangle and apply linear gradient as under:

Properties --> Brushes --> Gradient Brush --> Linear Gradient Brush --> Fill

SLBrushes2.gif
    
In this rectangle we are not giving the Stroke color; we only set the Stroke to "No Brush".

SLBrushes3.gif

     Appearance

Code:

<Grid x:Name="LayoutRoot">
   <Rectangle Margin="180,122,289,218" StrokeThickness="4">
          <Rectangle.Fill>
                   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                             <GradientStop Color="Blue" Offset="1"/>
                             <GradientStop Color="#FFF3F3FB"/>
                   </LinearGradientBrush>
          </Rectangle.Fill>
   </Rectangle>
</Grid>

We can also apply Gradient to it by selecting the gradient tool as under:

SLBrushes4.gif

SLBrushes5.gif
   
                                                              After Gradient

3. Radial Gradient Brush: 

It is Composed of a radial color gradation and much more similar to linear gradient but the difference is of Appearance, different colors can be applied in both. For example draw a rectangle and apply radial gradient as under:

Properties --> Brushes --> Gradient Brush --> Radial Gradient Brush --> Fill

SLBrushes6.gif

                                                                                            Appearance

SLBrushes7.gif

After Applying Gradient

Code:

<Grid x:Name="LayoutRoot">
          <Rectangle Margin="180,122,289,203" StrokeThickness="4">
                   <Rectangle.Fill>
                             <RadialGradientBrush>
                                      <GradientStop Color="Blue" Offset="0.427"/>
                                      <GradientStop Color="#FFF3F3FB" Offset="1"/>
                             </RadialGradientBrush>
                   </Rectangle.Fill>
          </Rectangle>
</Grid>

4. Image/Tile Brush:

The Image/Tile brush is created from an image. From left to right: the initial image brush, the image brush tiled, and the image brush flipped.

To use the Tile Brush, first click on the tile brush and select the tile mode= "Tile" and Stretch="Fill".

SLBrushes8.gif

Now draw a rectangle and give the path for Image source as under:

SLBrushes9.gif
   
Now your rectangle will like this:
 

SLBrushes10.gif


Similar Articles