How to set background color of a WPF Button?

The BorderBrush property of the Button sets a brush to draw the border of a Button. You may use any brush to fill the border. The following code snippet uses a linear gradient brush to draw the border with a combination of red and blue color.

<Button.BorderBrush>

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

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

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

    </LinearGradientBrush>

</Button.BorderBrush>

 

The Background and Foreground properties of the Button set the background and foreground colors of a Button. You may use any brush to fill the border. The following code snippet uses linear gradient brushes to draw the background and foreground of a Button.

 

<Button.Background>

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

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

        <GradientStop Color="Orange" Offset="0.25" />                   

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

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

    </LinearGradientBrush>

</Button.Background>

<Button.Foreground>

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

        <GradientStop Color="Orange" Offset="0.25" />

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

    </LinearGradientBrush>

</Button.Foreground>

The final complete source code looks like this.

<Window x:Class="ButtonSample.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="300" Width="300">

    <Canvas Name="LayoutRoot">

        <Button x:Name="DrawCircleButton" Height="40" Width="120"

 Canvas.Left="10" Canvas.Top="10" Click="DrawCircleButton_Click" >

 

            <Button.BorderBrush>

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

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

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

                </LinearGradientBrush>

            </Button.BorderBrush>

            <Button.Background>

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

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

                    <GradientStop Color="Orange" Offset="0.25" />

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

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

                </LinearGradientBrush>

            </Button.Background>

            <Button.Foreground>

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

                    <GradientStop Color="Black" Offset="0.25" />

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

                </LinearGradientBrush>

            </Button.Foreground>

            Draw Circle

        </Button>

    </Canvas>

</Window>