windows 8 xaml inline hyperlink - windows-8

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:

Answer 1

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!
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?

Answer 2

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 :

Answer 3

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>