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

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>

Answer 2

Just make like this:

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

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>