16、TextDisplay

好久不见. 提交于 2020-02-16 18:03:10

 

1、Tracking :

    TextBlock 和 RichTextBlock  中字符的间距可以通过 CharacterSpacing 属性进行设置。 CharacterSpacing 是 'em'  的

1/1000, 1 em 代表控件中 1 个字符的高度。例如,如果 TextBook 控件设置为 FontSize='14', 把 CharacterSpacing

设置为 CharacterSpacing='1000' , 则本 TextBlock 中文本之间的间隔为 14 px。

      例如,下面的 xaml :

  <Slider x:Name="characterSpacingSlider" Width="200" Value="1"  Maximum="500" 
                    Minimum="-100" TickFrequency="100"/>

 <TextBlock Style="{StaticResource BasicTextStyle}"           //把 CharacterSpacing 属性绑定到 slider 的 value 上
           CharacterSpacing="{Binding Value, ElementName=characterSpacingSlider}" 
         Text="TextBlock with tracking applied via the CharaterSpacing property"/>

 

   当 slider 的值为 48 时,字符的间距:

   当 slider 的值为 386 时,字符的间距:

 

2、Leading(line height):

    文字的行高是通过 TextBlock 控件的 LineStackingStrategy 属性 和 LineHeight 进行设置的。

LineStrackingStrategy ( 指示如何为 TextBlock 中的每行文本确定一个行框的值。默认为 MaxHeight。) 的值为枚举:

    // 摘要:
    //     描述一种机制,根据该机制为每一行确定行框。
    [Version(100794368)]
    [WebHostHidden]
    public enum LineStackingStrategy
    {
        // 摘要:
        //     当该行上的内联元素正确对齐时,堆栈高度是包含所有这些元素的扩展块级数维度的最小值。这是默认值。
        MaxHeight = 0,
        //
        // 摘要:
        //     堆栈高度由块元素行高属性值确定。
        BlockLineHeight = 1,
        //
        // 摘要:
        //     堆栈高度是文本基线之间的距离。不影响基线之间的距离。
        BaselineToBaseline = 2,
    }


   本例的 TextBlock 的 LineHeight 属性也是绑定到 Slider 的 value 属性上 :

 <Slider x:Name="lineHeightSlider" Width="200" Value="22" 
        Minimum="10" Maximum="30" TickFrequency="5" 
        Orientation="Horizontal" HorizontalAlignment="Left" />


 <TextBlock Style="{StaticResource BasicTextStyle}"  
      Width="300" TextWrapping="Wrap" 
      LineStackingStrategy="BaselineToBaseline" // 分别设置为上面三个值之一
      LineHeight="{Binding Value, ElementName=lineHeightSlider}">// 行高绑定到 Slider 上
        <Run>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ligula nisi, vehicula nec eleifend vel, rutrum non dolor. Vestibulum ante ipsum primis in faucibus orci </Run>
        <Run FontSize="30">luctus </Run>
        <Run>et ultrices posuere cubilia Curae; Curabitur elementum scelerisque accumsan. In hac habitasse platea dictumst. Maecenas eu nibh vitae nibh laoreet placerat. Duis dolor ante, semper luctus ullamcorper eget, placerat et ligula. Donec placerat tincidunt vehicula. Fusce condimentum lacus quis libero blandit semper sed vel quam. Proin eget nisl lacinia nibh convallis scelerisque at sed massa. Duis commodo tincidunt consequat. Duis malesuada, nisl a pharetra placerat, odio dui suscipit quam, vitae rhoncus sem risus quis odio. Aliquam justo nunc, adipiscing id elementum sit amet, feugiat vel enim. Aliquam pharetra arcu nec elit luctus euismod. Suspendisse potenti.</Run>
 </TextBlock>

 

 截图,当 Slider 的值为 17 时:

 

当 slider 的值为 30 时:

 

3、OpenType :

     OpenType 属性定义了一个字体设计者为设计师使用的,包含高级特性的一些字符的特性。在 xaml 中通过使用

Typography 类进行设置。本例展示了运用 OpenType 的字体的示例。

        注意:运用的字体必须支持 OpenType 特性。Windows 8 XAML文本堆栈并不试图模拟OpenType特性,因为

它将无法生产印刷地正确的结果。在不支持的字体中使用 OpenType 特性将不被视为没有操作 进行对待。

     

 

1)分别通过设置 TextBlock 对象 Typography.NumeralStyle="OldStyle" (、"Lining") 和 

 Typography.NumeralAlignment="Proportional" (、"Tabular")显示不同的结果:

                    <TextBlock Grid.Row="1" Grid.Column="1" FontFamily="Segoe" FontSize="25"  Typography.NumeralStyle="Lining" 
                               Typography.NumeralAlignment="Proportional" >
                        409,280<LineBreak/>
                        367,112<LineBreak/>
                        155,068<LineBreak/>
                        171,792
                    </TextBlock>
                    <TextBlock Grid.Row="1" Grid.Column="2" FontFamily="Segoe"  FontSize="25"  Typography.NumeralStyle="OldStyle" 
                               Typography.NumeralAlignment="Proportional">
                        409,280<LineBreak/>
                        367,112<LineBreak/>
                        155,068<LineBreak/>
                        171,792
                    </TextBlock>
                    <TextBlock Grid.Row="2" Grid.Column="1" FontFamily="Segoe" FontSize="25"  Typography.NumeralStyle="Lining"
                               Typography.NumeralAlignment="Tabular" >
                        409,280<LineBreak/>
                        367,112<LineBreak/>
                        155,068<LineBreak/>
                        171,792
                    </TextBlock>
                    <TextBlock Grid.Row="2" Grid.Column="2" FontFamily="Segoe"   FontSize="25"  Typography.NumeralStyle="OldStyle"
                               Typography.NumeralAlignment="Tabular" >
                        409,280<LineBreak/>
                        367,112<LineBreak/>
                        155,068<LineBreak/>
                        171,792
                    </TextBlock>


四个 TextBlock 的显示截图 :

2)设置 Typography.Fraction 属性,是分数显示不同:

 <TextBlock FontFamily="Palatino Linotype" FontSize="25"  >
                    <Run Text="1/2  "/>
                    <Run Text="1/2  " Typography.Fraction="Slashed"/>
                    <Run Text="1/2" Typography.Fraction="Stacked"/>
                </TextBlock>

显示结果:

 

3) 设置  Typography.Variants ="Subscript“  属性,显示不同:

<TextBlock FontFamily="Palatino Linotype" FontSize="25" >
                    2<Run Typography.Variants="Superscript">3</Run>
                    14<Run Typography.Variants="Superscript">th</Run>
                    H<Run Typography.Variants="Subscript">2</Run>O
                    Footnote<Run Typography.Variants="Subscript">4</Run>
                </TextBlock>

显示结果:

 

 

4)通过设置 Typography.StylisticSet1="True" :

                          <TextBlock FontFamily="Gabriola" FontSize="25" 
                            Typography.StylisticSet1="True">Wishing you a happy New Year!</TextBlock>
                          <TextBlock FontFamily="Gabriola" FontSize="25" 
                            Typography.StylisticSet2="True">Wishing you a happy New Year!</TextBlock>
                          <TextBlock FontFamily="Gabriola" FontSize="25" 
                           Typography.StylisticSet3="True">Wishing you a happy New Year!</TextBlock>
                       <TextBlock FontFamily="Gabriola" FontSize="25" 
                           Typography.StylisticSet4="True">Wishing you a happy New Year!</TextBlock>
                       <TextBlock FontFamily="Gabriola" FontSize="25" 
                           Typography.StylisticSet5="True">Wishing you a happy New Year!</TextBlock>
                          <TextBlock FontFamily="Gabriola" FontSize="25" 
                           Typography.StylisticSet6="True">Wishing you a happy New Year!</TextBlock>
                         <TextBlock FontFamily="Gabriola" FontSize="25" 
                          Typography.StylisticSet7="True">Wishing you a happy New Year!</TextBlock>

 

 显示结果:

 

4、Linked  text  containers:

       链接的文本容器允许在一个页面元素中容不下的文本,可以浮动到页面中的其它元素中。创造性的使用链接的文本容器支持基本的多列支持和其他先进的页面布局。

       本例把文本的 font size 属性绑定到一个 slider 上,然后使文本在大小改变时,把没有显示的多余的内容动态的流动到其它的链接容器中。例如本例,在第一个

文本框中 通过制定 OverflowContentTarget="{Binding ElementName=firstOverflowContainer}"   绑定到第二个文本框  。

 

  截图:

 当文本框中文字的 font size 为 8 时,第三个 TextBlock 中没有文字。

 

 当文本框中文字的 font size 为 9 时,第二个 TextBlock 中的多余文字流动到第三个 TextBlock 中:

//第一个 文本框
 <RichTextBlock Grid.Column="0" OverflowContentTarget="{Binding ElementName=firstOverflowContainer}"                FontSize="{Binding Value, ElementName=fontSizeSlider}" IsTextSelectionEnabled="True" TextAlignment="Justify"  FontFamily="Segoe UI" >
                        <Paragraph>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mi ipsum. Phasellus vel malesuada mauris. Donec pharetra, enim sit amet mattis tincidunt, felis nisi semper lectus, vel porta diam nisi in augue. Pellentesque lacus tortor, aliquam et faucibus id, rhoncus ut justo. Sed id lectus odio, eget pulvinar diam. Suspendisse eleifend ornare libero, in luctus purus aliquet non. Sed interdum, sem vitae rutrum rhoncus, felis ligula ultrices sem, in eleifend eros ante id neque. Vivamus quam lorem, varius vitae porta mollis, placerat quis est. Aenean eget sagittis massa. Sed tellus turpis, ullamcorper eget imperdiet vel, faucibus vel nisl. Nunc sed suscipit quam. Vivamus convallis faucibus dignissim. Fusce sollicitudin, quam vel cursus mattis, nisl velit tristique sapien, ac vestibulum ante arcu a nisl. Vestibulum commodo gravida ante at tincidunt. Vestibulum in ornare nunc. Nullam ut lorem vitae dui placerat lacinia sit amet a arcu. Nulla sit amet odio nisi. Praesent erat urna, venenatis ac adipiscing vel, congue at lectus. Proin ac metus at quam luctus ultricies.
                        Nam vitae ligula non ligula suscipit semper. Duis sed nulla metus, id hendrerit velit. Curabitur dolor purus, bibendum eu cursus lacinia, interdum vel augue. Aenean euismod eros et sapien vehicula dictum. Duis ullamcorper, turpis nec feugiat tincidunt, dui erat luctus risus, aliquam accumsan lacus est vel quam. Nunc lacus massa, varius eget accumsan id, congue sed orci. Duis dignissim hendrerit egestas. Proin ut turpis magna, sit amet porta erat. Nunc semper metus nec magna imperdiet nec vestibulum dui fringilla. Sed sed ante libero, nec porttitor mi. Ut luctus, neque vitae placerat egestas, urna leo auctor magna, sit amet ultricies ipsum felis quis sapien. Proin eleifend varius dui, at vestibulum nunc consectetur nec. Mauris nulla elit, ultrices a sodales non, aliquam ac est. Quisque sit amet risus nulla. Quisque vestibulum posuere velit, vitae vestibulum eros scelerisque sit amet. In in risus est, at laoreet dolor. Nullam aliquet pellentesque convallis. Ut vel tincidunt nulla. Mauris auctor tincidunt auctor.
                        Aenean orci ante, vulputate ac sagittis sit amet, consequat at mi. Nam vehicula justo vel ligula egestas dapibus. Quisque accumsan erat nec enim laoreet ac bibendum erat pulvinar. Ut pulvinar purus scelerisque arcu porta pretium. Proin a purus ut diam placerat vestibulum tempus sit amet velit. In hac habitasse platea dictumst. Maecenas eu nibh vitae nibh laoreet placerat. Duis dolor ante, semper luctus ullamcorper eget, placerat et ligula. Donec placerat tincidunt vehicula. Fusce condimentum lacus quis libero blandit semper sed vel quam. Proin eget nisl lacinia nibh convallis scelerisque at sed massa. Duis commodo tincidunt consequat. Duis malesuada, nisl a pharetra placerat, odio dui suscipit quam, vitae rhoncus sem risus quis odio. Aliquam justo nunc, adipiscing id elementum sit amet, feugiat vel enim. Aliquam pharetra arcu nec elit luctus euismod. Suspendisse potenti.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus tortor, faucibus id adipiscing sit amet, dignissim et elit. In hac habitasse platea dictumst. Phasellus sit amet facilisis purus. Suspendisse metus augue, vulputate vehicula scelerisque sit amet, cursus eget libero. Duis eu tellus non turpis elementum condimentum. Ut eu hendrerit risus. Suspendisse mattis rhoncus neque, a lobortis lacus imperdiet vitae. Nam eget purus id justo elementum facilisis quis in nisl. Morbi elementum purus consectetur nisi adipiscing vitae blandit sapien placerat. Aliquam adipiscing tortor non sem lobortis consectetur mattis felis rhoncus. Nunc eu nunc rhoncus arcu sollicitudin ultrices. In vulputate eros in mauris aliquam id dignissim nisl laoreet.
                        </Paragraph>
</RichTextBlock>



//第二个 文本框

 <RichTextBlockOverflow x:Name="firstOverflowContainer"  OverflowContentTarget="{Binding ElementName=secondOverflowContainer}" Margin="20,0"/>
                 

//第三个 文本框

   <RichTextBlockOverflow x:Name="secondOverflowContainer"  Margin="20,0"/>

 

 

 

 

 

 

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!