在带有虚线下划线的 TextDecorations 的 TextBlock 中显示 DateTime答案

【问题标题】：Display DateTime in TextBlock with Dashed-Underlined TextDecorations在带有虚线下划线的 TextDecorations 的 TextBlock 中显示 DateTime
【发布时间】：2019-10-07 15:37:37
【问题描述】：

我正在尝试在TextBlock 中显示格式为2019-10-07 17:00 的DateTime。文本应加下划线和虚线。为此，我使用以下 xaml

<TextBlock Text="2019-10-07 17:00">
    <TextBlock.TextDecorations>
        <TextDecoration Location="Underline">
            <TextDecoration.Pen>
                <Pen Brush="Black">
                    <Pen.DashStyle>
                        <DashStyle Dashes="5"/>
                    </Pen.DashStyle>
                </Pen>
            </TextDecoration.Pen>
        </TextDecoration>
    </TextBlock.TextDecorations>
</TextBlock>

但是，这会产生一些非常意外的结果，似乎每个连字符都会导致虚线下划线重新开始渲染。请注意在每个连字符之后看起来几乎是随机的破折号模式。

如果我将“减号连字符”更改为“非中断连字符”，看起来非常相似（- 与 ‐），渲染将按预期工作。

<TextBlock Text="2019‐10‐07 17:00" ...>

每次我在文本中添加减号连字符时都会出现这种虚线下划线的错误渲染，但没有添加我能找到的任何其他字符。有没有其他人注意到这一点，有没有人有解决方案？如果不是，那么这种奇怪行为的原因可能是什么？

【问题讨论】：

标签： c# .net wpf xaml textblock

【解决方案1】：

这可能是由于在 WPF 字形渲染代码中发现了一些奇怪的破折号。在 .NET 源代码中，您将找到 AdjustAdvanceForDisplayLayout() 方法及其注释：

// AdvanceHeight is used to compute the bounding box. In some case, eg. the dash
// character '-', the bounding box is computed to be empty in Display
// TextFormattingMode (because the metrics are rounded to be pixel aligned) and so the
// dash is not rendered!

在TextBlock 上设置TextOptions.TextFormattingMode="Display" 会产生稍微不同的工件：

这告诉我们，我们确实遇到了这个“解决方法”（参见 GlyphRun.cs 行 1326）。

所以问题是我们能否以某种方式获得第三种变体，而无需任何这些人工制品。到目前为止，我还没有成功，但我确实尝试找到此连字符检查发生的位置。它似乎发生在本机代码中。请参阅TextFormatterContext.cs 和LoCreateContext。

【讨论】：

【解决方案2】：

鉴于您的格式，大小应始终大致相同，因此您可以像这样使用另一个文本块，然后让它覆盖另一个框

<TextBlock Text="This is a really lon" Foreground="Transparent" IsHitTestVisible="False">
    <TextBlock.TextDecorations>
        <TextDecoration Location="Underline">
            <TextDecoration.Pen>
                <Pen Brush="Black">
                    <Pen.DashStyle>
                        <DashStyle Dashes="5"/>
                    </Pen.DashStyle>
                </Pen>
            </TextDecoration.Pen>
        </TextDecoration>
    </TextBlock.TextDecorations>
</TextBlock>
<TextBlock Text="2019-10-07 17:00" />

【讨论】：

【解决方案3】：

我不知道为什么会出现这种奇怪的行为。看起来Pen 创建的破折号映射到TextDecoration 的修饰文本。这是有道理的，因为破折号或TextDecoration 通常会自动调整为例如字体大小。减号似乎产生了不同的间距。使用等宽字体时，可能不会发生这种行为。

无论如何，您可以创建一个平铺的DrawingBrush 并将其分配给Pen.Brush 属性以创建虚线。您可以使用DrawingBrush.ViewPort 来改变破折号的位置或长度。
Viewport 由四个值组成，实际上是一个 Rect，描述了磁贴的位置和尺寸：x, y, width, height。较大的宽度和高度值会创建较长的破折号。
结果是连字符和空格的均匀绘制：

<TextBlock Text="2019-10-07 17:00">
  <TextBlock.TextDecorations>
    <TextDecoration Location="Underline">
      <TextDecoration.Pen>
        <Pen>
          <Pen.Brush>
            <DrawingBrush Viewport="0,0,10,10"
                          ViewportUnits="Absolute"
                          TileMode="Tile">
              <DrawingBrush.Drawing>
                <GeometryDrawing Brush="Black">
                  <GeometryDrawing.Geometry>
                    <GeometryGroup>
                      <RectangleGeometry Rect="0,0,5,5" />
                      <RectangleGeometry Rect="5,5,5,5" />
                    </GeometryGroup>
                  </GeometryDrawing.Geometry>
                </GeometryDrawing>
              </DrawingBrush.Drawing>
            </DrawingBrush>
          </Pen.Brush>
        </Pen>
      </TextDecoration.Pen>
    </TextDecoration>
  </TextBlock.TextDecorations>
</TextBlock>

这种方法的缺点是破折号的大小和位置不再适应字体的大小。

【讨论】：