How to make hyperlinks in RichTextBlock not completely inconsistent?

Question

I want to be able to display a hyperlink in a RichTextBlock element, but I also want it to look right. The closest I could get to is the following:

The XAML for this is inserted below - essentially, I'm using InlineUIElement , and I edited the resource to remove all the ore around the button. Am I missing something? The only real way to solve this is to flip my own hyperlink?

Here's the XAML for a 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 is 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 TextButtonStyle in StandardStyles.xaml, included in the standard VS templates? You do not need to create your own hyperlink. In the subway, you can completely replace the control template, so there is no need to reproduce the functionality if there is already a control with the required functionality.

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

Now it looks like this:

The reason this was so far away is because the TextBlock template in 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> 

Pay attention to margin. Therefore, to fix this, we either had to create a negative margin on the parent element (like me), or simply change the marker to PageSubheaderTextStyle .