Remove Underline from HyperlinkButton in UWP XAML

Question

I need to remove the underline in the content of HyperLinkButton. TextDecorations does not exist in this XAML element.

<HyperlinkButton x:Name="BtnTeste"
                Width="100" Height="50" BorderThickness="1" 
                HorizontalAlignment="Center"
                Foreground="Black" Background="#ffffff"
                NavigateUri="www.google.com"
                Content="Execute" />

score 35 · Accepted Answer · answered Sep 15 '15 at 21:45

35

This underline is not exposed inside the HyperlinkButton style. Fortunately, you can easily override its ContentTemplate to get rid of it.

<HyperlinkButton Content="my link">
    <HyperlinkButton.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" />
        </DataTemplate>
    </HyperlinkButton.ContentTemplate>
</HyperlinkButton>

answered Sep 15 '15 at 21:45

Justin XL

38,763
7
88
133

1

Great. Work. Thanks very much! Greetings – fipcurren88 Sep 16 '15 at 09:25
Your welcome. Please consider accepting it as the answer! :) – Justin XL Sep 16 '15 at 09:29

score 11 · Answer 2 · answered Oct 13 '16 at 16:09

11

Just make like this:

<HyperlinkButton>
   <TextBlock Text="Blahblah" />
</HyperlinkButton>

answered Oct 13 '16 at 16:09

Dmitry

1,095
14
21

score 3 · Answer 3 · answered Sep 15 '15 at 19:49

To change the appearance of the button you have to apply a different template. The default template can be found in MSDN. To remove the underline you have to change the TextDecoration property of the "UnderlineTextBlock" in the template from "Underline" to "None".

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

You can apply the template by declaring it as a resource of your page and referencing it from your button.

Declaring a new style:

<Page.Resources>
    <Style x:Key="NoUnderlineHyperlinkButtonStyle" TargetType="HyperlinkButton">
        <!--template from above here-->
    </Style>
</Page.Resources>

Referencing it:

<HyperlinkButton Style="{StaticResource NoUnderlineHyperlinkButtonStyle}">No Underline!</HyperlinkButton>

Normally I would agree to this, but the dude is working with win10/UWP and your example is a silverlight template. The win10 [style template](https://msdn.microsoft.com/en-us/library/windows/apps/Mt299132.aspx) is a bit different and that additional object providing the underline doesn't exist. I'm not sure that default style from the docs is correct either since all I see in there is a ContentPresenter, I'd be curious to see what the actual template is if the OP just Right-Clicked->Edit Template so we could see the source of truth. — Chris W., Sep 15 '15 at 19:58

score 0 · Answer 4 · answered May 07 '21 at 16:10

0

Use style:

<HyperlinkButton Content="link" Style="{ThemeResource TextBlockButtonStyle}"/>

answered May 07 '21 at 16:10

IQ.feature

600
6
16

Remove Underline from HyperlinkButton in UWP XAML

4 Answers4