Removing underline from hyperlink in Windows Store app

Question

I'm creating a universal Windows Runtime App for Windows Phone 8.1 and Windows 8.1 using Xaml and C#.

I have inline hyperlinks setup as so -

<TextBlock Width="400" TextWrapping="Wrap">
    <Span FontSize="20">
        This is an example of how Hyperlink can be used in a paragraph of text. It might be helpful for you look to
        <Hyperlink NavigateUri="http://www.bing.com">bing</Hyperlink> 
        for more answers in the future.
    </Span>
</TextBlock>

This will display the text with a underline indicating the clickable hyperlink. However I want to indicate hyperlinks by color not underline as I can have multiple of them in a TextBlock.

I want to remove the underline from the inline Hyperlinks - TextDecorations property no longer exists in WP 8.1 and Windows 8.1 Store apps.

Note* I'm using Hyperlink element not HyperlinkButton as I need to have the links inline with text.

Have a look at [this](http://stackoverflow.com/questions/18403999/wp-how-to-remove-underline-in-hyperlinkbutton-programmatically) — vITs, May 28 '14 at 11:48
I can't use templating because I'm using a Hyperlink element not a HyperlinkButton. For some reason you can't define a style template for Hyperlink. — BradStevenson, May 28 '14 at 11:57
+1 to the question. Since `Span` derives from `Inline` though you could check out a workaround from @JerryNixon-MSFT using `InlineUIContainer` [shown here](http://stackoverflow.com/questions/12735651/windows-8-xaml-inline-hyperlink) that I thought was kind of a neat workaround. — Chris W., May 28 '14 at 13:26
I do not think it is possible. Under the hood the Hyperlink uses another Run (not an Underline) element to display the text. XamlSpy shows that no where does it define an underline style. One would think you could create your own Hyperlink element, but how would you know it was tapped? There are no events on a TextElement that would give you this information. — Shawn Kendrot, Jun 04 '14 at 22:28

score 1 · Answer 1 · answered Jul 08 '14 at 11:29

I would write a comment, but my reputation is not enough to do that.

I tried the same code on a blank both win 8.1 and win phone 8.1 project. However, the hyperlink is displayed with color by default, not with an underline as opposed to your project. My code is like below

    <TextBlock Width="400" TextWrapping="Wrap">
        <Span FontSize="20">
            This is an example of how Hyperlink can be used in a paragraph of text. It might be helpful for you look to
            <Hyperlink NavigateUri="http://www.bing.com" Foreground="#FF0007FF">bing</Hyperlink> 
            for more answers in the future.
        </Span>
    </TextBlock>

Could you try the Foreground property? Maybe it helps you.

score 1 · Answer 2 · answered Dec 18 '15 at 13:46

In the final version of Windows 8.1 the Hyperlink-element doesn't have an underline. Maybe the confusion was caused by the focus border around the hyperlink? So the XAML:

    <TextBlock Width="400" TextWrapping="Wrap" VerticalAlignment="Center">
        <Span FontSize="20">
            This is an example of how Hyperlink can be used in a paragraph of text. It might be helpful for you look to
            <Hyperlink NavigateUri="http://www.bing.com">bing</Hyperlink> 
            for more answers in the future.
        </Span>
    </TextBlock>

Shows as:

One thing that can trick the viewer is that if the page doesn't have any other focusable items, the Hyperlink gets the focus and a border is drawn around it. This may look like it has underline:

If you want to get rid of that, add Button with Opacity 0 to the top of the page.

If you want to style the Hyperlink, you can overwrite it using the following keys:

        <SolidColorBrush x:Key="HyperlinkDisabledThemeBrush" Color="#66000000" />
        <SolidColorBrush x:Key="HyperlinkForegroundThemeBrush" Color="#FF4F1ACB" />
        <SolidColorBrush x:Key="HyperlinkPointerOverForegroundThemeBrush" Color="#CC4F1ACB" />
        <SolidColorBrush x:Key="HyperlinkPressedForegroundThemeBrush" Color="#994F1ACB" />

So if you have the following App.xaml.cs:

<Application.Resources>
    <ResourceDictionary>
        <SolidColorBrush x:Key="HyperlinkForegroundThemeBrush" Color="Green" />
    </ResourceDictionary>
</Application.Resources>

You will get a green Hyperlink:

If you want the link to have underline, you can use the Underline-element. The XAML:

    <TextBlock Width="400" TextWrapping="Wrap" VerticalAlignment="Center">
        <Span FontSize="20">
            This is an example of how Hyperlink can be used in a paragraph of text. It might be helpful for you look to
            <Hyperlink NavigateUri="http://www.bing.com"><Underline>bing</Underline></Hyperlink> 
            for more answers in the future.
        </Span>
    </TextBlock>

And the result:

score 1 · Answer 3 · answered Sep 27 '18 at 08:10

1

In my app I'm using

<Hyperlink TextDecorations="None" ...></Hyperlink>

to get rid of the underline.

answered Sep 27 '18 at 08:10

ggs

140
1
2
11

1

That is an underrated solution. It's simplistic and sufficient in most cases. – GeorgiG Jun 30 '20 at 13:07

Removing underline from hyperlink in Windows Store app

3 Answers3