Brushes

5 min read

In WPF, Brushes are used to paint the background, foreground, borders, shapes, and other visual elements of controls.

Unlike traditional UI frameworks where colors are directly assigned, WPF uses the powerful Brush system to provide advanced drawing capabilities.

With brushes, you can create:

Solid colors
Color gradients
Image-based backgrounds
Dynamic visual effects
Custom UI designs

In this article, you’ll learn about:

SolidColorBrush – Paints an element with a single color.
GradientBrush – Creates smooth color transitions.
ImageBrush – Uses an image as a paint source.
VisualBrush – Uses another visual element as a brush.

You will learn:

What each brush is used for
Key properties
XAML examples
Real-world usage
Best practices

1. SolidColorBrush #

A SolidColorBrush paints an element using a single solid color.

It is the most commonly used brush in WPF.

Examples:

Button backgrounds
Text colors
Borders
Panels
Shapes

Basic Syntax #

<Button Content="Save"
        Background="Blue"/>

Behind the scenes, WPF creates a SolidColorBrush.

Using Explicit SolidColorBrush #

<Button Content="Submit">

    <Button.Background>

        <SolidColorBrush Color="Green"/>

    </Button.Background>

</Button>

Using Hex Colors #

<Border>

    <Border.Background>

        <SolidColorBrush Color="#3498DB"/>

    </Border.Background>

</Border>

Setting Opacity #

<Border>

    <Border.Background>

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

    </Border.Background>

</Border>

Using Resources #

Instead of repeating colors, define brushes as resources.

<Window.Resources>

    <SolidColorBrush x:Key="PrimaryBrush"
                     Color="DarkBlue"/>

</Window.Resources>

Use:

<Button Background="{StaticResource PrimaryBrush}"
        Content="Save"/>

Important Properties #

Property	Description
Color	Brush color
Opacity	Transparency level
Transform	Applies transformations

Common Uses #

Application themes
Button styles
Background colors
Text colors
Borders

Best Practice #

Define commonly used colors as resources instead of hard-coding colors throughout your application.

2. GradientBrush #

A GradientBrush creates a smooth transition between two or more colors.

Gradients are commonly used for modern UI designs.

Examples:

Header backgrounds
Cards
Login screens
Buttons
Dashboards

WPF provides two main gradient brushes:

LinearGradientBrush
RadialGradientBrush

LinearGradientBrush #

A LinearGradientBrush creates a gradient along a straight line.

Basic Syntax #

<Border>

    <Border.Background>

        <LinearGradientBrush>

            <GradientStop Color="Blue"
                          Offset="0"/>

            <GradientStop Color="Purple"
                          Offset="1"/>

        </LinearGradientBrush>

    </Border.Background>

</Border>

Multiple Colors #

<LinearGradientBrush>

    <GradientStop Color="Red"
                  Offset="0"/>

    <GradientStop Color="Yellow"
                  Offset="0.5"/>

    <GradientStop Color="Green"
                  Offset="1"/>

</LinearGradientBrush>

Changing Direction #

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

</LinearGradientBrush>

Examples:

0,0  → Top Left

1,0  → Top Right

0,1  → Bottom Left

1,1  → Bottom Right

RadialGradientBrush #

A RadialGradientBrush creates a circular color transition.

Example #

<Border>

    <Border.Background>

        <RadialGradientBrush>

            <GradientStop Color="White"
                          Offset="0"/>

            <GradientStop Color="Blue"
                          Offset="1"/>

        </RadialGradientBrush>

    </Border.Background>

</Border>

Important Properties #

Property	Description
GradientStops	Collection of colors
StartPoint	Starting position
EndPoint	Ending position
Center	Center point
RadiusX	Horizontal radius
RadiusY	Vertical radius

Best Practice #

Use gradients carefully. Too many gradients can make enterprise applications look inconsistent.

3. ImageBrush #

An ImageBrush uses an image as the painting source.

Instead of a color, it fills an element with an image.

Common uses:

Background images
Login screens
Product cards
Decorative UI elements

Basic Syntax #

<Border Width="300"
        Height="200">

    <Border.Background>

        <ImageBrush ImageSource="Images/background.jpg"/>

    </Border.Background>

</Border>

Stretch Property #

<ImageBrush ImageSource="Images/photo.jpg"
            Stretch="Uniform"/>

Stretch options:

Value	Description
None	Original size
Fill	Stretches image
Uniform	Keeps aspect ratio
UniformToFill	Fills area

Image Tiling #

<ImageBrush ImageSource="Images/pattern.png"
            TileMode="Tile"/>

Important Properties #

Property	Description
ImageSource	Image path
Stretch	Image scaling
TileMode	Repeat image
Opacity	Transparency

Real Example #

<Border CornerRadius="15">

    <Border.Background>

        <ImageBrush ImageSource="Images/login-bg.jpg"/>

    </Border.Background>

</Border>

Best Practice #

Optimize images before using them in WPF applications to avoid increased memory usage.

4. VisualBrush #

A VisualBrush uses another WPF visual element as a brush.

It can paint one control using the appearance of another control.

It is useful for:

Reflections
Live previews
Watermark effects
Advanced UI designs

Basic Syntax #

<Rectangle Width="200"
           Height="100">

    <Rectangle.Fill>

        <VisualBrush Visual="{Binding ElementName=myButton}"/>

    </Rectangle.Fill>

</Rectangle>

Example: Reflection Effect #

<StackPanel>

    <Button Name="myButton"
            Content="Click Me"
            Width="150"/>


    <Rectangle Height="50">

        <Rectangle.Fill>

            <VisualBrush Visual="{Binding ElementName=myButton}"/>

        </Rectangle.Fill>

    </Rectangle>

</StackPanel>

Important Properties #

Property	Description
Visual	Source visual element
Stretch	Scaling behavior
TileMode	Repetition
Opacity	Transparency

SolidColorBrush vs GradientBrush vs ImageBrush vs VisualBrush #

Feature	SolidColorBrush	GradientBrush	ImageBrush	VisualBrush
Uses Color	✔	✔	✘	✘
Uses Image	✘	✘	✔	✔
Supports Multiple Colors	✘	✔	✘	✘
Uses Another Control	✘	✘	✘	✔
Performance	Fastest	Medium	Medium	Higher Cost
Common Usage	Themes	Modern UI	Backgrounds	Advanced Effects

Complete Example #

<StackPanel Margin="20">

    <Button Content="Solid Color Button"
            Width="200"
            Margin="0,10">

        <Button.Background>

            <SolidColorBrush Color="SteelBlue"/>

        </Button.Background>

    </Button>


    <Border Height="100"
            Width="250"
            Margin="0,10">

        <Border.Background>

            <LinearGradientBrush>

                <GradientStop Color="Blue"
                              Offset="0"/>

                <GradientStop Color="Purple"
                              Offset="1"/>

            </LinearGradientBrush>

        </Border.Background>

    </Border>


    <Border Height="150"
            Width="250"
            Margin="0,10">

        <Border.Background>

            <ImageBrush ImageSource="Images/background.jpg"/>

        </Border.Background>

    </Border>

</StackPanel>

Summary #

WPF Brushes provide powerful ways to customize the appearance of applications.

SolidColorBrush paints controls with a single color and is the foundation of most WPF styling.
GradientBrush creates smooth color transitions for modern UI designs.
ImageBrush allows images to be used as backgrounds and visual elements.
VisualBrush enables advanced effects by painting using another UI element.

Understanding brushes is essential for creating professional WPF applications with custom themes, attractive layouts, and modern user interfaces.

In the next tutorial, you’ll learn about WPF Styles, Templates, Resources, Themes, Triggers, and Control Customization, which will help you build reusable and professional UI designs.

Updated on July 28, 2026

1. SolidColorBrush #

Basic Syntax #

Using Explicit SolidColorBrush #

Using Hex Colors #

Setting Opacity #

Using Resources #

Important Properties #

Common Uses #

Best Practice #

2. GradientBrush #

LinearGradientBrush #

Basic Syntax #

Multiple Colors #

Changing Direction #

RadialGradientBrush #

Example #

Important Properties #

Best Practice #

3. ImageBrush #

Basic Syntax #

Stretch Property #

Image Tiling #

Important Properties #

Real Example #

Best Practice #

4. VisualBrush #

Basic Syntax #

Example: Reflection Effect #

Important Properties #

SolidColorBrush vs GradientBrush vs ImageBrush vs VisualBrush #

Complete Example #

Summary #

Leave a Reply Cancel reply