windows 8 xaml inline hyperlink

Question

How do I create properly formatted hyperlinks in Windows Store Apps in XAML? I tried creating an inline hyperlink and want to style it with a staticresource:

          <RichTextBlock Style="{StaticResource PageHeaderTextStyle}" Grid.ColumnSpan="2">
            <Paragraph>
                <Run>"A sentence with inline text "</Run>
                <InlineUIContainer>
                    <HyperlinkButton Background="Yellow">
                        my link
                    </HyperlinkButton>
                </InlineUIContainer>
                <Run>... some more text</Run>
            </Paragraph>
        </RichTextBlock>

i get the following where the hyperlink is not aligned with the rest of the sentence:

enter image description here

Jerry Nixon · Accepted Answer · 2012-10-09T17:07:55.907

Well, I tried this to no avail:

<RichTextBlock FontSize="20">
    <Paragraph Foreground="White" FontFamily="Segoe UI Light">
        <Run>Now is the time for</Run>
        <InlineUIContainer>
            <HyperlinkButton Content="all good men">
                <HyperlinkButton.Template>
                    <ControlTemplate>
                        <TextBlock Margin="5,0,5,0"  FontSize="20" FontFamily="Segoe UI Light"
                                    Text="{Binding Content, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                    </ControlTemplate>
                </HyperlinkButton.Template>
            </HyperlinkButton>
        </InlineUIContainer>
        <Run>to come to the aid of their country</Run>
    </Paragraph>
</RichTextBlock>

And so then I tried this:

<RichTextBlock FontSize="20">
    <Paragraph Foreground="White" FontFamily="Segoe UI Light">
        <Run>Now is the time for</Run>
        <InlineUIContainer>
            <TextBlock Margin="5,0,5,0" Tapped="TextBlock_Tapped_1">
                <Underline><Run Text="all good men" /></Underline>
            </TextBlock>
        </InlineUIContainer>
        <Run>to come to the aid of their country</Run>
    </Paragraph>
</RichTextBlock>

This works like a charm!

enter image description here

I am not pretending it is not a little more work to implement your own hyperlink button but think of it this way - you will have 100% control over its layout! And it will easily inherit from the font styles around it!

Make sense?

yes. i like this paradigm. thx. btw, what does the run tag do? — prostock, Oct 08 '12 at 20:42
The run tag allows you to execute a binding inside a textblock. It also allows you to execute more than one binding by having more than one run in a single textblock. Google can tell you more. — Jerry Nixon, Oct 09 '12 at 17:08
i found that tap on textblock causes my event handler to be called twice. i read a post regarding this issue:http://stackoverflow.com/questions/3438806/textbox-textchanged-event-firing-twice-on-windows-phone-7-emulator — prostock, Oct 12 '12 at 17:54
Now, all that is left is to see how to make damn thing clickable... :( — nikib3ro, Oct 15 '12 at 18:22

Antonio Bakula · Answer 2 · 2014-01-13T16:16:04.167

7

For future readers just to add that windows 8.1 simplify this task, Windows 8.1 adds the Hyperlink element to the XAML text object model in the Windows.UI.Xaml.Documents namespace, so now we can simply use it like this :

<RichTextBlock>
  <Paragraph FontSize="22">Please click on this <Hyperlink NavigateUri="http://www.link.com">link</Hyperlink>, thanks !</Paragraph>
</RichTextBlock>

and it looks like this :

enter image description here

edited Jan 13 '14 at 16:16

answered Jan 13 '14 at 16:08

Antonio Bakula

20,445
6
75
102

And what about changing default visited/unvisited colors for such hyperlink? – Sevenate Nov 17 '14 at 20:33
Hyperlink inherits from TextElement, so did you try to change Foreground property ? – Antonio Bakula Nov 18 '14 at 09:02

aquamoon · Answer 3 · 2013-08-16T12:30:09.447

I tried to resolve this as well and came up with the following:

<RichTextBlock HorizontalAlignment="Left" VerticalAlignment="Top">
<Paragraph xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" FontSize="12" FontFamily="Calibri" >
    <Run FontFamily="Calibri" FontSize="24">A sentence with inline text</Run>
    <InlineUIContainer>
        <HyperlinkButton FontSize="24" Background="Gray" Foreground="Blue" Template="{StaticResource HyperlinkButtonControlTemplate1}" BorderThickness="0" RenderTransformOrigin="0.5,0.5" Padding="0" FontFamily="Calibri">
            the link with g
        </HyperlinkButton>
    </InlineUIContainer>
    <Run FontFamily="Calibri" FontSize="24">and some more text</Run>
</Paragraph>

and the Template as follows:

<ControlTemplate x:Key="HyperlinkButtonControlTemplate1" TargetType="HyperlinkButton">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="PointerOver">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPointerOverForegroundThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPressedForegroundThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkDisabledThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                    <VisualState x:Name="Focused">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="FocusVisualWhite"
                                Storyboard.TargetProperty="Opacity"
                                To="1"
                                Duration="0" />
                            <DoubleAnimation Storyboard.TargetName="FocusVisualBlack"
                                Storyboard.TargetProperty="Opacity"
                                To="1"
                                Duration="0" />
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unfocused" />
                    <VisualState x:Name="PointerFocused" />
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <ContentPresenter x:Name="ContentPresenter"
                    Content="{TemplateBinding Content}"
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    ContentTemplate="{TemplateBinding ContentTemplate}" 
                    RenderTransformOrigin="0.5,0.5" 
                    Margin="1,0" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Bottom" >
                <ContentPresenter.RenderTransform>
                    <CompositeTransform TranslateY="8"/>
                </ContentPresenter.RenderTransform>
            </ContentPresenter>

            <Rectangle x:Name="FocusVisualWhite"
                IsHitTestVisible="False"
                Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
                StrokeEndLineCap="Square"
                StrokeDashArray="1,1"
                Opacity="0"
                StrokeDashOffset="1.5" />
            <Rectangle x:Name="FocusVisualBlack"
                IsHitTestVisible="False"
                Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
                StrokeEndLineCap="Square"
                StrokeDashArray="1,1"
                Opacity="0"
                StrokeDashOffset="0.5" />
        </Grid>
    </ControlTemplate>

The only caveat is that the <CompositeTransform TranslateY="8"/> must be set to 1/3 of the font size, in this case 8 since font size is 24. Not ideal, but it does produce the desired output.

Update: or use the following, this was derived from looking at the Social Media Windows 8 Dashboard Sample at http://code.msdn.microsoft.com/wpapps/Social-Media-Dashboard-135436da

<Paragraph xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" FontSize="12" FontFamily="Calibri" >
<Run FontFamily="Calibri" FontSize="16">A sentence with inline text</Run>
<Span>
<InlineUIContainer>
        <HyperlinkButton FontSize="16" BorderThickness="0" Margin ="-10,-13" Foreground="Blue" FontFamily="Calibri">
        the link with g
    </HyperlinkButton>
</InlineUIContainer>
</Span>
<Run FontFamily="Calibri" FontSize="16">and some more text</Run>

windows 8 xaml inline hyperlink

3 Answers3

Linked