How do I make Hyperlinks in RichTextBlock not be completely unaligned?

richtextbox, windows-8, windows-runtime, winrt-xaml, xaml

Solution

Have you tried looking at the `TextButtonStyle` in StandardStyles.xaml included with the standard VS templates? You shouldn't have to create your own hyperlink. In metro you can entirely replace the template of a control, so there is no need to reproduce functionality when there is already a control with the functionality you want.

Edit: I took the `TextButtonStyle` template and changed the margin to `Margin="3,-20,3,0"` and then added `FontSize="14"`.

Now it looks like this:

The reason it was so far off is that the `TextBlock` template on the `TextBlock` in the `TextButtonStyle` template looks like this:

<Style x:Key="PageSubheaderTextStyle" TargetType="TextBlock" BasedOn="{StaticResource SubheaderTextStyle}">
    <Setter Property="TextWrapping" Value="NoWrap"/>
    <Setter Property="VerticalAlignment" Value="Bottom"/>
    <Setter Property="Margin" Value="0,0,0,40"/>
</Style>

Notice the margin. So to fix it we either had to create a negative margin on the parent (like I did) or simply change the margin on the `PageSubheaderTextStyle`.

Problem

I want to be able to show a hyperlink in a RichTextBlock element, but I also want it to look right. The closest I've been able to get to is this: The XAML for this is pasted below - essentially, I use `InlineUIElement` and I edited the resource to remove all the crud around the button. Am I missing something? Is the only real way to solve this is to roll my own hyperlink? Here's the XAML for the rich text block: ``` <RichTextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14"> <Paragraph>I just want this <InlineUIContainer> <HyperlinkButton Style="{StaticResource HyperlinkButtonStyle1}">Hyperlink</HyperlinkButton> </InlineUIContainer> to not look like crap </Paragraph> </RichTextBlock> ``` And here's the XAML for the nuked resource: ``` <Style x:Key="HyperlinkButtonStyle1" TargetType="HyperlinkButton"> <Setter Property="Foreground" Value="{StaticResource HyperlinkForegroundThemeBrush}"/> <Setter Property="Background" Value="{StaticResource HyperlinkButtonBackgroundThemeBrush}"/> <!--<Setter Property="BorderBrush" Value="{StaticResource HyperlinkButtonBorderThemeBrush}"/>--> <Setter Property="BorderThickness" Value="0"/> <Setter Property="Padding" Value="0"/> <Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="VerticalAlignment" Value="Bottom"/> <Setter Property="FontFamily" Value="Global User Interface"/> <Setter Property="FontSize" Value="14"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="HyperlinkButton"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="PointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPointerOverForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPressedForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkDisabledThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/> </Storyboard> </VisualState> <VisualState x:Name="Unfocused"/> <VisualState x:Name="PointerFocused"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" VerticalAlignment="Bottom"> <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0" VerticalAlignment="Bottom"/> </Border> <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/> <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> ```

Original source