none
How to remove underline properties from HyperlinkButton

    Question

  •  Hi,

    I have the following line, but it is decorated with "Underline" when the mouse enters it. But I don't want it that way.
    How do I remove the underline effect? 

    HyperlinkButton titleLink = new HyperlinkButton();

    Thanks in advance

    Sunday, May 10, 2009 9:29 AM

Answers

  • Hi sobo,

    You should really set up a style template as a resource and reference it as nyhetsgrupper@gmail.com recommended because of all the built in visual states the hyperlink control has by default.  If that's not an option you can replace the content of the hyperlink with a textblock as follows:

    TextBlock tb = new TextBlock();
    tb.Text = "Hyperlink";
    titleLink.Content = tb;   

    This way you've overridden the text decoration of the underline.   You will however, still have the focus rectangle around the hyperlink after clicking the hyperlink control.  If that's an issue, handle the click event and set the focus to a different control in your application.

    titleLink.Click += new RoutedEventHandler(titleLink_Click);

    void titleLink_Click(object sender, RoutedEventArgs e)
    {
    anotherControl.Focus();
    }

    That should take care of it for you.

    Monday, May 11, 2009 9:00 PM

All replies

  • You have to create a new display template for the HyperLinkButton. The easiest way to do it is to edit it in Expression Blend.
    Here is a small sample:
     

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    	x:Class="SilverlightApplication6.MainControl"
    	Width="640" Height="480">
    
    	<UserControl.Resources>
    		<Style x:Key="HyperlinkButtonStyle1" 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 Duration="0" Storyboard.TargetName="UnderlineTextBlock" Storyboard.TargetProperty="Visibility">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<Visibility>Visible</Visibility>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</vsm:VisualState>
    									<vsm:VisualState x:Name="Pressed">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="UnderlineTextBlock" Storyboard.TargetProperty="Visibility">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<Visibility>Visible</Visibility>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</vsm:VisualState>
    									<vsm:VisualState x:Name="Disabled">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="Visibility">
    												<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>
    											<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
    												<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
    											</DoubleAnimationUsingKeyFrames>
    										</Storyboard>
    									</vsm:VisualState>
    									<vsm:VisualState x:Name="Unfocused"/>
    								</vsm:VisualStateGroup>
    							</vsm:VisualStateManager.VisualStateGroups>
    							<TextBlock x:Name="UnderlineTextBlock" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed" Text="{TemplateBinding Content}"/>
    							<TextBlock x:Name="DisabledOverlay" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Canvas.ZIndex="1" Visibility="Collapsed" Foreground="#FFAAAAAA" Text="{TemplateBinding Content}"/>
    							<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
    							<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" IsHitTestVisible="false" Opacity="0"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<HyperlinkButton HorizontalAlignment="Left" Style="{StaticResource HyperlinkButtonStyle1}" VerticalAlignment="Top" Content="HyperlinkButton"/>
    	</Grid>
    </UserControl>
     
    Sunday, May 10, 2009 2:06 PM
  • Hi,

    Thanks for the response, but as you can see, I need this in C#.

    Sunday, May 10, 2009 2:42 PM
  • If you can keep the style in xaml you can do like this in c#:
     
    HyperlinkButton titleLink = new HyperlinkButton();
    titleLink.Style = (Style)this.Resources["HyperlinkButtonStyle1"];

     
    Sunday, May 10, 2009 2:47 PM
  • It is strange that I should keep style in XAML just to apply propertie such as removing the underline properties of HyperlinkButton.

    Most properties are set like this:

    SetValue(DependencyProperty dp, Object value);

    I just want to know how to do this with the HyperlinkButton.

    Sunday, May 10, 2009 2:59 PM
  • If there was a property named TextDecoration on the HyperLinkButton control it would be this easy, but in my example I change the complete display template. I don't think it is easy to do this in c#, but maybe I am wrong. Can somebody help?

    Monday, May 11, 2009 1:46 AM
  • Hi sobo,

    You should really set up a style template as a resource and reference it as nyhetsgrupper@gmail.com recommended because of all the built in visual states the hyperlink control has by default.  If that's not an option you can replace the content of the hyperlink with a textblock as follows:

    TextBlock tb = new TextBlock();
    tb.Text = "Hyperlink";
    titleLink.Content = tb;   

    This way you've overridden the text decoration of the underline.   You will however, still have the focus rectangle around the hyperlink after clicking the hyperlink control.  If that's an issue, handle the click event and set the focus to a different control in your application.

    titleLink.Click += new RoutedEventHandler(titleLink_Click);

    void titleLink_Click(object sender, RoutedEventArgs e)
    {
    anotherControl.Focus();
    }

    That should take care of it for you.

    Monday, May 11, 2009 9:00 PM
  • Hi clint1222,

    Thank you so much for the tip. That's exactly what I ended up doing.

    Tuesday, May 12, 2009 6:40 AM
  • Thanks, Your code works for me.Smile

    Thursday, July 05, 2012 9:48 AM