HyperlinkButton Styles and Templates

HyperlinkButton Styles and Template...

Silverlight

This topic discusses the default ControlTemplate for the HyperlinkButton. You can change the ControlTemplate of the HyperlinkButton to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate.

HyperlinkButton States

The following table lists the states for the HyperlinkButton control.

State Name	VisualStateGroup Name	Description
Normal	CommonStates	The default state.
MouseOver	CommonStates	The mouse pointer is positioned over the control.
Pressed	CommonStates	The control is pressed.
Disabled	CommonStates	The control is disabled.
Focused	FocusStates	The control has focus.
Unfocused	FocusStates	The control does not have focus.

HyperlinkButton Properties

The Control class defines several properties that can be used by the control template to have an effect on the control when they are set. How the ControlTemplate uses the property depends on the property. The ControlTemplate must use the property in one of the following ways:

An element in the ControlTemplate template binds to the property.
An element in the ControlTemplate inherits the property from a parent FrameworkElement.

The following table lists whether the property is inherited or can be template bound and tells whether the default ControlTemplate for the HyperlinkButton utilizes it.

Property	Usage method	Used by the default ControlTemplate
Background	Template binding	Yes
BorderThickness	Template binding	No
BorderBrush	Template binding	No
FontFamily	Property inheritance or template binding	Yes
FontSize	Property inheritance or template binding	Yes
FontStretch	Property inheritance or template binding	Yes
FontWeight	Property inheritance or template binding	Yes
Foreground	Property inheritance or template binding	Yes
HorizontalContentAlignment	Template binding	Yes
Padding	Template binding	Yes
VerticalContentAlignment	Template binding	Yes

Default Template

The following XAML shows the default template for the HyperlinkButton control.

<Style TargetType="HyperlinkButton">
  <Setter Property="Foreground" Value="#FF73A9D8" />
  <Setter Property="Cursor" Value="Hand"/>
  <Setter Property="HorizontalContentAlignment" Value="Left"/>
  <Setter Property="VerticalContentAlignment" Value="Top"/>
  <Setter Property="Background" Value="Transparent" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="HyperlinkButton">
        <Grid Cursor="{TemplateBinding Cursor}" Background="{TemplateBinding Background}">
          <vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup x:Name="CommonStates">
              <vsm:VisualState x:Name="Normal"/>
              <vsm:VisualState x:Name="MouseOver">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnderlineTextBlock" Storyboard.TargetProperty="Visibility" Duration="0">
                    <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </vsm:VisualState>
              <vsm:VisualState x:Name="Pressed">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnderlineTextBlock" Storyboard.TargetProperty="Visibility" Duration="0">
                    <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </vsm:VisualState>
              <vsm:VisualState x:Name="Disabled">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0">
                    <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                      </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </vsm:VisualState>
            </vsm:VisualStateGroup>
            <vsm:VisualStateGroup x:Name="FocusStates">
              <vsm:VisualState x:Name="Focused">
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                </Storyboard>
              </vsm:VisualState>
              <vsm:VisualState x:Name="Unfocused"/>
            </vsm:VisualStateGroup>
          </vsm:VisualStateManager.VisualStateGroups>
          <TextBlock
            x:Name="NormalTextBlock"
            Text="{TemplateBinding Content}"
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
            Margin="{TemplateBinding Padding}"/>
          <TextBlock
            x:Name="UnderlineTextBlock"
            Text="{TemplateBinding Content}"
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
            Margin="{TemplateBinding Padding}"
            TextDecorations="Underline"
            Visibility="Collapsed"/>
          <TextBlock Canvas.ZIndex="1"
            x:Name="DisabledOverlay"
            Text="{TemplateBinding Content}"
            Foreground="#FFA5A5A5"
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
            Margin="{TemplateBinding Padding}"
            Visibility="Collapsed"/>
          <ContentPresenter 
            x:Name="contentPresenter"
            Content="{TemplateBinding Content}"
            ContentTemplate="{TemplateBinding ContentTemplate}"
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
            Margin="{TemplateBinding Padding}"/>
          <Rectangle x:Name="FocusVisualElement" Stroke="#FF45D6FA" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Concepts

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

Other Resources

Control Styles and Templates