I was at TechEd last week and I was asked several times how to customize buttons. The answer is pretty straightforward, you use styles. If you're an ASP.Net developer that won't scare you, but if you're a Windows Forms developer then you may need a quick refresher.

You can apply a style to any control, and give default values for properties, so for instance you could create a style template that always coloured your buttons red, something like this:

<Window.Resources>
<Style x:Key="MyRedButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Red" />
</Style>
</Window.Resources>

To use this style in your button is fairly trivial, you simply reference the key you created as in the following code:

<Button Style="{StaticResource MyRedButtonStyle}"> Hello</Button>

Of course this simply allows you to change the basic properties, what if I want to change the entire look and feel of the Button control - well in that case you need to provide a control template. At first glance this appears more complex, but it isn't really that bad.

<Window.Resources>
<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
  <Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="{x:Type Button}">
    <Grid>
      <Ellipse Name="EllipseButton" 
               Width="{TemplateBinding Width}" 
               Height="{TemplateBinding Height}" >
        <Ellipse.BitmapEffect>
           <BevelBitmapEffect BevelWidth="3" 
                              Relief=".6" >
           </BevelBitmapEffect>
        </Ellipse.BitmapEffect> 
        <Ellipse.Fill>
           <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
              <GradientStop Color="Aqua" Offset="0" />
              <GradientStop Color="Gray" Offset=".9" />
           </LinearGradientBrush>
        </Ellipse.Fill>
      </Ellipse>
      <ContentPresenter TextElement.FontSize="{TemplateBinding FontSize}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
    </Grid>     
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style> 

When you provide a control template you need to do all the redrawing, as it currently stands your button UI doesn't change when the button is clicked, so you need to provide a trigger to update the template as the user clicks on the button, as shown below:

<Window.Resources>
<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
. . .
  </Grid>
  <ControlTemplate.Triggers>
    <MultiTrigger>
      <MultiTrigger.Conditions>
        <Condition Property="IsMouseOver" Value="True" />
        <Condition Property="IsPressed" Value="True" />
      </MultiTrigger.Conditions>
      <Setter TargetName="EllipseButton" Property="Ellipse.Fill" >
       <Setter.Value>
         <LinearGradientBrush StartPoint="0,1" EndPoint="0,0">
            <GradientStop Color="Aqua" Offset="0" />
            <GradientStop Color="Gray" Offset=".9" />
         </LinearGradientBrush>
       </Setter.Value>
      </Setter>
      <Setter TargetName="EllipseButton" Property="Ellipse.BitmapEffect" >
        <Setter.Value>
          <BevelBitmapEffect BevelWidth="1" Relief=".1" ></BevelBitmapEffect>
        </Setter.Value>
      </Setter> 
     </MultiTrigger>
    </ControlTemplate.Triggers>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

You can customise any control in this way and the flexibility is incredible. Of course you could also do all of this through source code if you are completely set against XAML.

You should notice the TemplateBinding directives, these simply specify that the values in the XAML will be passed through to the template, as the example below shows, the height and width attributes are passed to the underlying template:

<Button Name ="myButton"
           Style="{StaticResource MyButtonStyle}"
           Height="80" Width="80" Click="OnClick">
Button</Button>

Running this gives you the following button , and clicking it changes the GUI, so all in all a great 10 minutes work.