我该如何在WPF TextBlock中改变文本和下划线之间的距离？

Question

我有一个设计师提供的按钮样式指南，看起来像超链接，现在我正在尝试使用WPF样式尽可能接近它。

但我一直没有办法改变文本和下划线之间的距离。 我想添加图片进行比较，但不幸的是我还没有赚到足够的点数。

是否有一种方法可以改变文本和下划线之间的距离?

这是我目前拥有的XAML代码:

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

- Andy B.

---

在你的第二个 TextBlock 中添加 Margin="0,5,0,0"。 - Florian Gl

@FlorianGl：抱歉，我把两个TextBlocks搞混了。请看已接受的答案。 - Andy B.

Answer 1

使用元素语法添加一个TextDecoration实例到TextBlock.TextDecorations中，然后你可以调整Location或PenOffset。

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

你可能需要通过元素语法设置Pen

- H.B.

Answer 2

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

调整PenOffset会增加/减少文本和线之间的间隙。

- Shrikant S

Answer 3

要让一行文字比“下划线”更接近文本，可以使用“基线”。它比H.B.方案不够灵活，但也更简单。

<TextBlock TextDecorations="Baseline" />

- Bruno

Answer 4

你可以通过在它们之间添加分隔符或设置边距来实现这一点。

分隔符：

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

边距：

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

- Eirik

---

抱歉，我把这两个TextBlocks搞混了。请查看被接受的答案。 - Andy B.