如何更改 WPF TextBlock 中文本和下划线之间的距离？答案

【问题标题】：How can I change the distance between text and underline in a WPF TextBlock?如何更改 WPF TextBlock 中文本和下划线之间的距离？
【发布时间】：2012-09-20 06:53:37
【问题描述】：

我有一个来自设计师的样式指南，用于一个看起来像超链接的按钮，我正在尝试使用 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>

【问题讨论】：

在第二个 TextBlock 中添加 Margin="0,5,0,0"
@FlorianGl ：对不起，我把你和两个 TextBlock 混淆了。查看已接受的答案。

标签： wpf xaml textblock underline

【解决方案1】：

要使比“下划线”更接近文本的线有“基线”。它比 H.B. 灵活得多。解决方案，但也更简单。

<TextBlock TextDecorations="Baseline" />

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

使用element syntax将TextDecoration的实例添加到TextBlock.TextDecorations，然后可以调整Location或PenOffset。

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

（您可能还需要通过元素语法设置Pen）

【讨论】：

【解决方案4】：

您可以通过在它们之间添加Separator 或设置Margin 来做到这一点。

分隔符：

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

【讨论】：

对不起，我把你和这两个 TextBlock 混淆了。请查看已接受的答案。