Another simple technique that we can use to make our controls stand out is to declare multiple Border elements for each control. By declaring one or more borders within an outer border, we can give our controls that professional look. We'll see how we can animate these borders differently when the user's mouse cursor is over the button later, but for now, let's see how we can create this effect:
<Grid Width="160" Height="68">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Red" />
<GradientStop Color="Yellow" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
<Button Content="Click Me" Width="120" Height="28" FontSize="14"
Margin="20">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="Black" BorderThickness="1"
Background="#7FFFFFFF" Padding="1" CornerRadius="5"
SnapsToDevicePixels="True">
<Border BorderBrush="#7F000000" BorderThickness="1"
Background="White" CornerRadius="3.5"
SnapsToDevicePixels="True">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
In this example, we have declared a simple ControlTemplate element for our Button control to demonstrate the double border technique. Note that we would typically declare this template in the Application.Resources section of the App.xaml file, so that it could be reused, but we have declared it locally to save space here.
Note that we need to adjust the corner radius of the inner border to accurately fit within the outer border. If we had used the same size for both, they would not have correctly fit together. Also, we have set the SnapsToDevicePixels property to true on the two borders to ensure that they are not blurred by anti-aliasing artefacts.
One further point to note is that we have used #7FFFFFFF as the value for the background of the outer border and the border brush of the inner border. The alpha channel in this value is set to 7F, which equates to an opacity value of 0.5. This means that these elements will be partly transparent and so the colors from the background will partly show through the border edges.
We added our button into a Grid panel and set a LinearGradientBrush object as its background to demonstrate this semi-transparent effect. When rendered, our background gradient and button will look like the following image:
