How can I change the distance between text and underline in a WPF TextBlock?

Question

I have a style guide from a designer for a button that looks like a hyperlink and I am trying to get as close to it as I can with WPF styles.

But I haven't been able to change the distance between the text and the underline. I wanted to add images for comparision but unfortunately I haven't earned enough points to do so far.

Is there a way to change the distance between text and underline?

Here is the XAML code I have so far:

<Style x:Key="LinkButton" TargetType="ButtonBase">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ButtonBase">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="&gt; "/>
                    <TextBlock TextDecorations="Underline">
                        <ContentPresenter/>                        
                    </TextBlock>
                </StackPanel>                 
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Foreground" Value="{StaticResource LxGrayBrush}"/>
    <Setter Property="FontSize" Value="12"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Foreground" Value="{StaticResource LxGreenBrush}"/>
        </Trigger>
    </Style.Triggers>
</Style>

Polash

In your second TextBlock add Margin="0,5,0,0" – Kokura

@FlorianGl : Sorry, I have confused you with the two TextBlocks. See accepted answer. – Polash

Answer 1

Use element syntax to add an instance of TextDecoration to the TextBlock.TextDecorations, then you can adjust the Location or PenOffset.

<TextBlock>
    <TextBlock.TextDecorations>
        <TextDecoration Pen="..." Location="..."/>
    </TextBlock.TextDecorations>
</TextBlock>

(You may need to set the Pen via element syntax as well)

Beatrice

Answer 2

<TextBlock >
    Here is my text to be displayed 
    <TextBlock.TextDecorations>
        <TextDecoration PenOffset="3" PenOffsetUnit="Pixel"/> 
    </TextBlock.TextDecorations>
</TextBlock>

Adjusting PenOffset would increase/decrease the gap between text and the line.

Oblige

Answer 3

To have a line closer to the text than "Underline" there is "Baseline". It is much less flexible than the H.B. solution but also simpler.

<TextBlock TextDecorations="Baseline" />

Chantress

Answer 4

You can do this by adding a Separator between them or by setting the Margin.

Separator:

<StackPanel Orientation="Horizontal">
    <TextBlock Text="&gt; "/>
    <Separator Width="5" Visibility="Hidden" />
    <TextBlock TextDecorations="Underline">
        <ContentPresenter/>                        
    </TextBlock>
</StackPanel>

Margin:

<StackPanel Orientation="Horizontal">
    <TextBlock Text="&gt; " Margin="0,0,5,0" />
    <TextBlock TextDecorations="Underline">
        <ContentPresenter/>                        
    </TextBlock>
</StackPanel>

Lectureship

Sorry, I have confused you with the two TextBlocks. Please see the accepted answer. – Polash