Create a Custom Silverlight Button.

During the implementation of the Silverlight version of the photo gallery, I wanted to create a custom look and feel for the buttons that will be used in the UI. This “fancy button” will be used through the application. The best way to accomplish this is to create a new style and override the template control. The control that I want to modify is the HyperlinkButton control. This procedure could be used to customize other controls.

I first did some investigation into what I could override. There is a great posting on MSDN that details the button states and properties that are available for customization. In fact, that page provides the default template that defines the HyperlinkButton.

The following shows the results that I am after.

The image on the left is the “Disabled”, the center is “Enabled”, and the right is “MouseOver”. If the button is “Disabled” the button becomes more or less transparent letting the blue (in this case) background peek through. Mouse over while “Disabled” have no effect. If the button is “Enabled” the button background become opaque showing a shade of grey. Mouse over while “Enabled” starts a color animation that transforms the grey to white.

How do we create this customization?

The following XAML creates a style called “FancyButton” that implements the desired behavior:

<Style x:Key="FancyButton" TargetType="HyperlinkButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="HyperlinkButton">
                <Grid x:Name="RootElement">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VideoBrush x:Name="Pressed" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="Background"
                                                    Storyboard.TargetProperty="Color"
                                                    To="White"
                                                    Duration="00:00:0.2">
                                    </ColorAnimation>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="Background"
                                                    Storyboard.TargetProperty="Color"
                                                    To="#33D9D9D9"
                                                    Duration="00:00:0.2">
                                    </ColorAnimation>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Edge" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
                            BorderBrush="Black" BorderThickness="1" CornerRadius="3">
                        <Border.Background>
                            <SolidColorBrush x:Name="Background" Color="#FFD9D9D9" />
                        </Border.Background>
                        <ContentPresenter Content="{TemplateBinding Content}" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The format of this XAML was hinted at in the above MSDN article. Notice this style is set to target “HyperlinkButton” types. You could target other types. By defining a new ControlTemplate we are essentially overriding the default look and feel for the control.

The XAML in the VisualStateManager tags is defining any animations that correspond to the specific states. It is here where we create the “MouseOver” and “Disabled” effects.

The next bit of XAML create the fancy HyperlinkButton. I have added a border with rounded corners. First notice we use template binding to allow this border control to utilize properties that will be set by the user of the control. Also, notice we explicitly created a background brush so we could name it. This is necessary in order to reference this element in the animations. The ContentPresenter XAML allows the user of the fancy HyperlinkButton to add additional content.

How do we use our new control?

The following XAML puts our fancy HyperlinkButton to work:

<HyperlinkButton x:Name="PlayButton" Style="{StaticResource FancyButton}"
                 Click="Play_Click" ToolTipService.ToolTip="Play" Visibility="Visible">
    <Image Source="/Images/play.png" Margin="2" Width="32" Height="32" />
</HyperlinkButton>

The key is the “Style” tag in the HyperlinkButton XAML. This tells this control to use our fancy style that we created. Notice, that this definition then provides an Image control as content for the HyperlinkButton.

Summary

Extending the Silverlight controls is fairly easy once you know a few tricks. A great starting place is the MSDN library to determine what can be extended for any control.