Title: Make a WPF button template in C#

The example Control a video with the WPF MediaElement in C# uses attractive button images, but those images still sit on top of rectangular buttons.

The images were generated by the example Make video control buttons in WPF and C#. That example made a button template to create the appearance used by the buttons and then saved images of the buttons.

This example adds a little more code to the button template so it can use the buttons directly instead of just using their images.

Look at the earlier post to see how that example defines the template's appearance. This example just adds triggers to define the template's behavior.

The default template defines these triggers:

• IsKeyboardFocused
• IsDefaulted
• IsMouseOver
• IsPressed
• IsEnabled

For this example I decided to skip IsKeyboardFocused and IsDefaulted. (Something is making the buttons display a focus rectangle anyway.)

To provide the IsEnabled behavior, I added the following new ellipse to the end of the template's appearance definition.

<!-- Disabled ellipse --> <Ellipse Name="disabledEllipse" Height="30" Width="30" Fill="#A0D0D0D0" Visibility="Hidden"/>

This ellipse covers the entire button and has the semi-transparent light gray color #A0D0D0D0. Initially this ellipse is hidden.

The following code shows the template's triggers.

<ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter TargetName="outlineEllipse" Property="Stroke" Value="LightBlue"/> </Trigger> <Trigger Property="IsPressed" Value="true"> <Setter TargetName="outlineEllipse" Property="Stroke" Value="White"/> <Setter TargetName="outlineEllipse" Property="Fill" Value="#FF5050FF"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter TargetName="disabledEllipse" Property="Visibility" Value="Visible"/> </Trigger> </ControlTemplate.Triggers>

If you haven't seen triggers before, they activate when a certain property has a specific value. For example, when the button's MouseIsOver property is true, the first trigger activates and executes its setters. When the property no longer has the trigger's value, the setters deactivate and the control's properties return to their original values.

When the IsMouseOver property becomes true, the corresponding trigger gives the background ellipse a light blue outline.

When the button is pressed so its IsPressed becomes true, the corresponding trigger gives the background ellipse a white outline and fills it with the lighter blue color #FF5050FF.

Finally when the button is disabled so its IsEnabled property becomes false, the corresponding trigger makes the disabledEllipse visible so it makes the entire control more gray.

Now that the button template is fully defined, the program's XAML code can use it to style its buttons. For example, the following code shows how the program creates its Play button. The code that sets the button's template is highlighted in blue.

<Button Template="{StaticResource BubbleButtonTemplate}" Margin="2" Name="btnPlay" Click="btnPlay_Click"> <Path Stroke="DarkBlue" StrokeLineJoin="Round" StrokeThickness="2" Fill="White" Data="M 0,0 L 12,7 0,14 Z"/> </Button>

Download the example to experiment with it and to see additional details.