Marvin's Blog【程式人生】

Ability will never catch up with the demand for it

26 Jan 2021

UWP设计文档阅读笔记:Text

Text

Text block

TextBlock是从FrameworkElement派生出来的,可以用来显示单行或者多行文本,甚至包括内嵌的超链接,以及一些基本的文本格式化,比如加粗,斜体,下划线等等。

TextBlock比RichTextBlock有更好的性能,但是支持的格式化特性较少。TextBlock被设计用来显示一个段落的文本,并且不支持缩进。多个段落的文本,或者多栏文本,内嵌图片,以及其他复杂的文本结构,可以使用RichTextBlock。

一个示例:

<TextBlock Text="Hello, world!" />

可以通过Text或者Inlines辖属来设置TextBlock的内容。Text辖属可以用来添加简单的内容,复杂的内容需要通过Inlines添加:

<TextBlock>Text can be <Bold>bold</Bold>, <Underline>underlined</Underline>, 
    <Italic>italic</Italic>, or a <Bold><Italic>combination</Italic></Bold>.</TextBlock>

TextBlock默认的ContentProperty是Inlines。

想要让TexBlock快速绘制文字,有以下注意事项

  • 使用Text辖属来设置内容,而不是使用Inlines辖属
  • CharacterSpacing必须设置成0
  • TextTrimming必须设置成None, CharacterEllipsis或者WorkEllipsis,而不能设置成Clip。注意1607版本之前的Win10还有额外的限制。
  • Typography,使用默认值
  • LineStackingStrategy,如果LineHeight不为0,那么BaselineToBaseline以及MaxHeight会禁用快速绘制
  • IsTextSelectionEnabled要设置成false

开启DebugSettings.IsTextPerformanceVisualizationEnabled 可以将快速绘制的文本以明绿色显示。 参考XAML Performance: Techniques for Maximizing Universal Windows App Experiences Built with XAML

下面是在OnLaunched方法中做调试设置的一个例子:

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
#if DEBUG
    if (System.Diagnostics.Debugger.IsAttached)
    {
        this.DebugSettings.IsTextPerformanceVisualizationEnabled = true;
    }
#endif

// ...

}

可以通过FontFamliy, FontSize, FontStyle, Foreground以及CharacterSpacing来改变文本的外观。可以使用Inline的文本元素,或者Typography附庸辖属来格式化。但是,这些格式化只在本地工作,不会影响文字的复制和粘贴。

内线元素在Windows.UI.Xaml.Documents命名空间下提供。这些元素包括Bold, Italic, Run, Span以及LineBreak。Run元素只要是可以有自己的FontFamily,FontSize,FontStyle等辖属。

Typography寄居辖属可以让你修改Microsoft OpenType相关的排版属性:

<TextBlock Text="Hello, world!"
           Typography.Capitals="SmallCaps"
           Typography.StylisticSet4="True"/>

Rich text block

设置RichTextBlock可以通过Paragrph或者Blocks。RichTextBlock的ContentProper是Blocks辖属。

和TextBlock相比,RichTextBlock支持:

  • 多段落,每个段落的缩进可以用TextIndent来设置。
  • 可以使用InlineUIContainer来显示UI元素,比如图片以及。
  • 可以使用Overflow容器,比如使用RichTextBlockOverflow来创建多栏的文本布局。

例子:

<RichTextBlock TextIndent="12">
  <Paragraph TextIndent="24">First paragraph.</Paragraph>
  <Paragraph>Second paragraph.</Paragraph>
  <Paragraph>Third paragraph. <Bold>With an inline.</Bold></Paragraph>
</RichTextBlock>

RichTextBlockOverflow可以用来指定多栏或者更复杂的布局。RichTextBlockOverflow 元素用来接受一个RichTextBlock溢出的内容。只需将RichTextBlockOverflow 设为某个RichTextBlock的OverflowContentTarget。

和TextBlock一样,RichTextBlock也支持使用FontFamily, FontSize, FontStyle, Foreground以及CharacterSpacing等辖属进行文本格式化,但是这些格式化不会随着复制和粘贴传播。

同样,RichTextBlock也支持Windows.UI.Xaml.Documents命名空间下的内线元素:

<Paragraph>
    <Bold><Span Foreground="DarkSlateBlue" FontSize="16">Lorem ipsum dolor sit amet</Span></Bold>
    , consectetur adipiscing elit.
</Paragraph>

以及Typography相关的寄居辖属:

<RichTextBlock Typography.StylisticSet4="True">
    <Paragraph>
        <Span Typography.Capitals="SmallCaps">Lorem ipsum dolor sit amet</Span>
        , consectetur adipiscing elit.
    </Paragraph>
</RichTextBlock>25 

(未完待续)