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

Rack

Answer 1

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>

Hoch

Great. Work. Thanks very much! Greetings – Rack

Your welcome. Please consider accepting it as the answer! :) – Hoch

Answer 2

Just make like this:

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

Aeneous

Answer 3

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>

Nordgren

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 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. – Pankhurst

Answer 4

Use style:

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

Sibyls