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>