HyperlinkButton Styles and Templates

Silverlight

This topic describes the styles and templates for the HyperlinkButton control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Using a ControlTemplate.

HyperlinkButton Parts

The HyperlinkButton control does not have any named parts.

HyperlinkButton States

The following table lists the visual states for the HyperlinkButton control.

VisualState 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.

Default Style and Template

The following properties of the HyperlinkButton control are not used in its default template. However, you can modify the default template and use template binding to set these properties.

The following shows the XML namespace definition that you have to specify when you work with styles and templates.

<!-- XML Name Space definitions. -->
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

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

XAML

<Style TargetType="HyperlinkButton">
      <Setter Property="Foreground" Value="#FF73A9D8" />
      <Setter Property="Padding" Value="2,0,2,0"/>
      <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="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="#FFAAAAAA"
                          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="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
                  </Grid>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>

Reference

Concepts

Other Resources