Remove Underline from HyperlinkButton Control

Posted: July 26, 2011 in Windows Phone 7 & Mango

Sometimes you might prefer to remove the underline from the HyperlinkButton control. To do this you must add the following resrouce to your page (in my case I have just added it to the App.xaml page):

<!--Application Resources-->
<Application.Resources>
    <Style x:Key="HyperlinkButtonStyle" TargetType="HyperlinkButton">
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="HyperlinkButton">
                    <Border Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="TextElement" Storyboard.TargetProperty="Opacity" To="0.5" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextElement" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border Background="{TemplateBinding Background}" Margin="{StaticResource PhoneHorizontalMargin}" Padding="{TemplateBinding Padding}" >
                            <TextBlock x:Name="TextElement" Text="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" TextWrapping="Wrap" TextDecorations="none"/>
                        </Border>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>

Now all you need to do is drop a HyperlinkButton control onto the page and set the style as follows:

<HyperlinkButton Style="HyperlinkButtonStyle" />
Advertisements
Comments
  1. Dario says:

    Doesn’t work to me 😦

    Failed to create a ‘System.Windows.Style’ from the text ‘HyperlinkButtonStyle’. [Line: 32 Position: 34]

  2. sharmaja says:

    Thanks it worked for me

  3. speed7 says:

    amitchandnz, I added the code to my app.xaml file
    I’m dynamically creating hyperlinkbuttons and adding them to a stack panel. However they still appear with the underline. How can I make this happen in the C# code behind?
    button.Style = (Style)Resources[“HyperlinkButtonStyle”]; does not work :/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s