Using Brushes in Windows Store Apps

Introduction

In this article we are explaining how to use Brushes in Windows Store apps. In Windows Store apps Brush objects are used to paint the interiors or outlines of shapes, text, and parts of controls, so that the object being painted is visible in a UI. There are many types of Brushes available in Windows Store apps.

Solid color brushes

The SolidColorBrush paints an area with a single Color, such as red or blue. There are three ways in XAML to define a SolidColorBrush. Color name, Hexadecimal value and properties element syntax.

Using color name

<StackPanel>

     <Rectangle Width="300" Height="120" Fill="Red"/>

</StackPanel>

Hexadecimal color value

<StackPanel>

     <Rectangle Width="300" Height="120" Fill="#FFFF0000"/>

</StackPanel>

Properties Element syntax

You can also use property element syntax to set the SolidColorBrush color. This syntax is more verbose than the previous methods. But you can specify additional property values on an element, such as the Opacity.

<Grid>

  <Rectangle Width="300" Height="120">

     <Rectangle.Fill>

        <SolidColorBrush Color="Red" Opacity="0.6" />

     </Rectangle.Fill>

  </Rectangle>

</Grid>

Linear gradient brushes

The LinearGradientBrush paints an area with a gradient that's defined along a line. This line is called the gradient axis. You specify the gradient's colors and their locations along the gradient axis using GradientStop objects. By default, the gradient axis runs from the upper left corner to the lower right corner of the area that the brush paints.

<StackPanel>

  <Rectangle Width="300" Height="120">

    <Rectangle.Fill>

      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">

        <GradientStop Color="Yellow" Offset="0.0" x:Name="Gds1"/>

        <GradientStop Color="Red" Offset="0.20" x:Name="Gds2"/>

        <GradientStop Color="Blue" Offset="0.70" x:Name="Gds3"/>

        <GradientStop Color="Green" Offset="1.0" x:Name="Gds4"/>

      </LinearGradientBrush>

    </Rectangle.Fill>

  </Rectangle>

</StackPanel>

Image brushes

The ImageBrush paints an area with an image file. You set the ImageSource property with the path of the image to load.

<Grid>

  <Rectangle Width="300" Height="120" Margin="599,219,567,-270">

    <Rectangle.Fill>

        <ImageBrush ImageSource="mywall.jpg"></ImageBrush>

  </Rectangle.Fill>

 </Rectangle>

</Grid>