Question

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>

Answer 1

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.