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.

Answer 1

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.

Answer 2

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: