教程8：文字教学

作者: YottaYuan | 来源:发表于2020-03-14 05:28 被阅读0次

文字教学

XAML中的只读文本主要使用TextBlock元素显示。一个TextBlock的定义内容属性的文本，用户可以指定任何字符串。FontFamily，FontSize，FontStyle，FontWeight，FontStretch，前景和背景控制文本在元素中的显示方式。

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      HorizontalAlignment="Center" VerticalAlignment="Center">

  <TextBlock Text="Hello World!"/>

</Grid>

内联

内联也可用于修饰特定的块的方面。

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Background="White"
      TextElement.FontFamily="Fonts/#Roboto"
      TextElement.FontSize="30"
      TextElement.Foreground="Black">

  <Grid.Resources>
    <Style TargetType="Hyperlink">
      <Setter Property="Foreground" Value="DodgerBlue"/>
    </Style>
    <Decorator x:Key="Context" Tag="DataContext bound text."/>
  </Grid.Resources>

  <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0" Background="WhiteSmoke"
        DataContext="{StaticResource Context}">
    <Decorator x:Name="NamedElement" Tag="Named element bound text."/>
    <TextBlock Margin="20">
      <Bold>Lorem</Bold> ipsum <Italic>dolor</Italic> sit <Underline>amet</Underline>.
      <LineBreak/>
      <Bold FontWeight="Normal">
        Lorem <Span FontWeight="Bold">
          ipsum <Italic>
            sit <Underline>amet</Underline>
          </Italic>
        </Span>
      </Bold>.
      <LineBreak/>
      Click the <Hyperlink NavigateUri="www.test.com">hyperlink</Hyperlink> now!
      <LineBreak/>
      This is also a <Hyperlink TextDecorations="None">
        <Bold>hyperlink</Bold>
      </Hyperlink>.
      <LineBreak/>
      <Span>
        <Span FontStyle="Italic">
          <Run Text="{Binding Tag, ElementName=NamedElement}"/>
        </Span>
        <LineBreak/>
        <Span FontWeight="Bold">
          <Run Text="{Binding Tag}"/>
        </Span>
      </Span>
    </TextBlock>
  </Grid>
</Grid>

TextTutorialImg1.jpg

字体系列

默认字体取自活动主题。可以通过使用FontFamily属性来覆盖它。FontFamily包括字体所在目录的URI以及以' ＃ '字符分隔的系列名称。

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Text="Using Different Fonts" HorizontalAlignment="Center"
          FontFamily="Fonts/#K22 Ambelyn Condensed" FontSize="70"/>
        <TextBlock Text="Using Different Fonts" HorizontalAlignment="Center"
          FontFamily="Fonts/#Laffayette Comic Pro" FontSize="28"/>
        <TextBlock Text="Using Different Fonts" HorizontalAlignment="Center"
          FontFamily="Fonts/#Monkirta Pursuit NC" FontSize="30"/>
    </StackPanel>
</Grid>

TextTutorialImg2.jpg

请注意，如果您不使用' ＃ '分隔符或不提供目录，则将在系统文件夹中全局搜索字体。

<StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <TextBlock FontFamily="Arial">This is a system font</TextBlock>
  <TextBlock FontFamily="#Arial">This is also a system font</TextBlock>
</StackPanel>

由于属性值继承，FontFamily属性使元素树中的子元素能够从父元素获取值。

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"
   TextElement.FontFamily="Fonts/#Laffayette Comic Pro">
    <TextBlock Text="One"/>
    <TextBlock Text="Two"/>
    <TextBlock Text="Three"/>
    <TextBlock Text="Four"/>
  </StackPanel>
</Grid>

样式属性

TextBlock定义了三个属性，用于描述文本的样式，粗细和拉伸：

FontStyle：以正常，斜体或倾斜的方式表示字体的样式。
FontWeight：以笔触的明暗程度表示字体的密度。
FontStretch：表示与字体的正常纵横比相比，字体被拉伸的程度。

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Background="White"
  TextElement.FontFamily="Fonts/#Absolut Reduced"
  TextElement.FontSize="30"
  TextElement.Foreground="Black">

  <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0" Background="WhiteSmoke">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="2*"/>
      <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Grid.Column="0" Margin="10,10,0,0">
      <TextBlock Text="Thin" FontWeight="Thin"/>
      <TextBlock Text="Light" FontWeight="Light"/>
      <TextBlock Text="Regular" FontWeight="Normal"/>
      <TextBlock Text="Medium" FontWeight="Medium"/>
      <TextBlock Text="Bold" FontWeight="Bold"/>
      <TextBlock Text="Black" FontWeight="Black"/>
    </StackPanel>
    <StackPanel Grid.Row="0" Grid.Column="1" Margin="30,10,10,0">
      <TextBlock Text="Thin Italic" FontWeight="Thin" FontStyle="Italic"/>
      <TextBlock Text="Light Italic" FontWeight="Light" FontStyle="Italic"/>
      <TextBlock Text="Regular Italic" FontWeight="Normal" FontStyle="Italic"/>
      <TextBlock Text="Medium Italic" FontWeight="Medium" FontStyle="Italic"/>
      <TextBlock Text="Bold Italic" FontWeight="Bold" FontStyle="Italic"/>
      <TextBlock Text="Black Italic" FontWeight="Black" FontStyle="Italic"/>
    </StackPanel>
    <StackPanel Grid.Row="1" Grid.Column="0" Margin="10,20,0,10">
      <TextBlock Text="Condensed Thin" FontWeight="Thin" FontStretch="Condensed"/>
      <TextBlock Text="Condensed Light" FontWeight="Light" FontStretch="Condensed"/>
      <TextBlock Text="Condensed Regular" FontWeight="Normal" FontStretch="Condensed"/>
      <TextBlock Text="Condensed Medium" FontWeight="Medium" FontStretch="Condensed"/>
      <TextBlock Text="Condensed Bold" FontWeight="Bold" FontStretch="Condensed"/>
      <TextBlock Text="Condensed Black" FontWeight="Black" FontStretch="Condensed"/>
    </StackPanel>
    <StackPanel Grid.Row="1" Grid.Column="1" Margin="30,20,10,10">
      <TextBlock Text="Condensed Thin Italic" FontWeight="Thin" FontStyle="Italic" FontStretch="Condensed"/>
      <TextBlock Text="Condensed Light Italic" FontWeight="Light" FontStyle="Italic" FontStretch="Condensed"/>
      <TextBlock Text="Condensed Regular Italic" FontWeight="Normal" FontStyle="Italic" FontStretch="Condensed"/>
      <TextBlock Text="Condensed Medium Italic" FontWeight="Medium" FontStyle="Italic" FontStretch="Condensed"/>
      <TextBlock Text="Condensed Bold Italic" FontWeight="Bold" FontStyle="Italic" FontStretch="Condensed"/>
      <TextBlock Text="Condensed Black Italic" FontWeight="Black" FontStyle="Italic" FontStretch="Condensed"/>
    </StackPanel>
  </Grid>
</Grid>

TextTutorialImg3.jpg

布局属性

与Noesis中的任何其他UI元素一样，可以使用FrameworkElement中的HorizontalAlignment和VerticalAlignment属性相对于父容器放置TextBlock。布局过程使用这些属性将矩形分配给将在其中显示文本的TextBox。可以使用TextAlignment属性指定文本在该矩形内的对齐方式，该属性接受Left（默认），Center，Justify和Right值。

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Background="White"
  TextElement.FontFamily="Fonts/#Roboto"
  TextElement.FontSize="16"
  TextElement.Foreground="Black">

  <Viewbox>
    <StackPanel Margin="10" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
      <StackPanel Width="370">
        <TextBlock Margin="0,5" Background="WhiteSmoke" Padding="10" TextWrapping="Wrap" TextAlignment="Left">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua
        </TextBlock>
        <TextBlock Margin="0,5" Background="WhiteSmoke" Padding="10" TextWrapping="Wrap" TextAlignment="Justify">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua
        </TextBlock>
        <TextBlock Margin="0,5" Background="WhiteSmoke" Padding="10" TextWrapping="Wrap" TextAlignment="Center">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua
        </TextBlock>
        <TextBlock Margin="0,5" Background="WhiteSmoke" Padding="10" TextWrapping="Wrap" TextAlignment="Right">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua
        </TextBlock>
      </StackPanel>
    </StackPanel>
  </Viewbox>
</Grid>

TextTutorialImg4.jpg

除了文本对齐方式，用户还可以指定文本到达包含框的边缘时的行为。这可以通过TextWrapping属性完成，该属性可以设置为NoWrap（默认），Wrap和WrapWithOverflow。当文本溢出内容区域时，属性TextTrimming定义文本修剪行为。有效值为：无（默认），CharacterEllipsis和WordEllipsis。

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Background="White" UseLayoutRounding="True"
  TextElement.Foreground="Black">

  <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
      <RowDefinition/>
      <RowDefinition/>
      <RowDefinition/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
      <ColumnDefinition/>
      <ColumnDefinition/>
      <ColumnDefinition/>
      <ColumnDefinition/>
      <ColumnDefinition/>
      <ColumnDefinition/>
      <ColumnDefinition/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Row="2" Grid.Column="0" Text="Justify" TextAlignment="Right" FontWeight="Bold"
        VerticalAlignment="Center"/>
    <TextBlock Grid.Row="3" Grid.Column="0" Text="Left" TextAlignment="Right" FontWeight="Bold"
        VerticalAlignment="Center"/>
    <TextBlock Grid.Row="4" Grid.Column="0" Text="Center" TextAlignment="Right" FontWeight="Bold"
        VerticalAlignment="Center"/>
    <TextBlock Grid.Row="5" Grid.Column="0" Text="Right" TextAlignment="Right" FontWeight="Bold"
        VerticalAlignment="Center"/>

    <Border Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Background="LightGray" Margin="5,1" Padding="0,2">
      <TextBlock Text="NoWrap" TextAlignment="Center" FontWeight="Bold"/>
    </Border>
    <Border Grid.Row="0" Grid.Column="4" Grid.ColumnSpan="3" Background="LightGray" Margin="5,1" Padding="0,2">
      <TextBlock Text="Wrap" TextAlignment="Center" FontWeight="Bold"/>
    </Border>
    <Border Grid.Row="0" Grid.Column="7" Grid.ColumnSpan="3" Background="LightGray" Margin="5,1" Padding="0,2">
      <TextBlock Text="WrapWithOverflow" TextAlignment="Center" FontWeight="Bold"/>
    </Border>

    <TextBlock Grid.Row="1" Grid.Column="1" Text="NoTrimming" TextAlignment="Center" FontWeight="Bold"/>
    <TextBlock Grid.Row="1" Grid.Column="2" Text="CharTrimming" TextAlignment="Center" FontWeight="Bold"/>
    <TextBlock Grid.Row="1" Grid.Column="3" Text="WordTrimming" TextAlignment="Center" FontWeight="Bold"/>

    <TextBlock Grid.Row="1" Grid.Column="4" Text="NoTrimming" TextAlignment="Center" FontWeight="Bold"/>
    <TextBlock Grid.Row="1" Grid.Column="5" Text="CharTrimming" TextAlignment="Center" FontWeight="Bold"/>
    <TextBlock Grid.Row="1" Grid.Column="6" Text="WordTrimming" TextAlignment="Center" FontWeight="Bold"/>

    <TextBlock Grid.Row="1" Grid.Column="7" Text="NoTrimming" TextAlignment="Center" FontWeight="Bold"/>
    <TextBlock Grid.Row="1" Grid.Column="8" Text="CharTrimming" TextAlignment="Center" FontWeight="Bold"/>
    <TextBlock Grid.Row="1" Grid.Column="9" Text="WordTrimming" TextAlignment="Center" FontWeight="Bold"/>

    <Border Grid.Row="2" Grid.Column="1" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Justify" TextWrapping="NoWrap" TextTrimming="None"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="2" Grid.Column="2" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Justify" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="2" Grid.Column="3" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Justify" TextWrapping="NoWrap" TextTrimming="WordEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>

    <Border Grid.Row="2" Grid.Column="4" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Justify" TextWrapping="Wrap" TextTrimming="None"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="2" Grid.Column="5" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Justify" TextWrapping="Wrap" TextTrimming="CharacterEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="2" Grid.Column="6" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Justify" TextWrapping="Wrap" TextTrimming="WordEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>

    <Border Grid.Row="2" Grid.Column="7" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Justify" TextWrapping="WrapWithOverflow" TextTrimming="None"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="2" Grid.Column="8" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Justify" TextWrapping="WrapWithOverflow" TextTrimming="CharacterEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="2" Grid.Column="9" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Justify" TextWrapping="WrapWithOverflow" TextTrimming="WordEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>

    <Border Grid.Row="3" Grid.Column="1" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Left" TextWrapping="NoWrap" TextTrimming="None"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="3" Grid.Column="2" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Left" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="3" Grid.Column="3" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Left" TextWrapping="NoWrap" TextTrimming="WordEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>

    <Border Grid.Row="3" Grid.Column="4" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Left" TextWrapping="Wrap" TextTrimming="None"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="3" Grid.Column="5" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Left" TextWrapping="Wrap" TextTrimming="CharacterEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="3" Grid.Column="6" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>

    <Border Grid.Row="3" Grid.Column="7" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Left" TextWrapping="WrapWithOverflow" TextTrimming="None"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="3" Grid.Column="8" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Left" TextWrapping="WrapWithOverflow" TextTrimming="CharacterEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="3" Grid.Column="9" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Left" TextWrapping="WrapWithOverflow" TextTrimming="WordEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>

    <Border Grid.Row="4" Grid.Column="1" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="None"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="4" Grid.Column="2" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="4" Grid.Column="3" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="WordEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>

    <Border Grid.Row="4" Grid.Column="4" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Center" TextWrapping="Wrap" TextTrimming="None"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="4" Grid.Column="5" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Center" TextWrapping="Wrap" TextTrimming="CharacterEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="4" Grid.Column="6" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Center" TextWrapping="Wrap" TextTrimming="WordEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>

    <Border Grid.Row="4" Grid.Column="7" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Center" TextWrapping="WrapWithOverflow" TextTrimming="None"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="4" Grid.Column="8" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Center" TextWrapping="WrapWithOverflow" TextTrimming="CharacterEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="4" Grid.Column="9" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Center" TextWrapping="WrapWithOverflow" TextTrimming="WordEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>

    <Border Grid.Row="5" Grid.Column="1" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Right" TextWrapping="NoWrap" TextTrimming="None"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="5" Grid.Column="2" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Right" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="5" Grid.Column="3" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Right" TextWrapping="NoWrap" TextTrimming="WordEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>

    <Border Grid.Row="5" Grid.Column="4" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Right" TextWrapping="Wrap" TextTrimming="None"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="5" Grid.Column="5" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Right" TextWrapping="Wrap" TextTrimming="CharacterEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="5" Grid.Column="6" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Right" TextWrapping="Wrap" TextTrimming="WordEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>

    <Border Grid.Row="5" Grid.Column="7" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Right" TextWrapping="WrapWithOverflow" TextTrimming="None"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="5" Grid.Column="8" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Right" TextWrapping="WrapWithOverflow" TextTrimming="CharacterEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
    <Border Grid.Row="5" Grid.Column="9" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
      <TextBlock TextAlignment="Right" TextWrapping="WrapWithOverflow" TextTrimming="WordEllipsis"
          Text="Some text to tryout quitedifferentorsimilar alignments"/>
    </Border>
  </Grid>
</Grid>

TextTutorialImg5.png

颜色属性

TextBlock定义以下属性来设置文本的颜色及其背景：

将前景色属性用于指定文本的颜色。
的背景属性用于指定填充的排列矩形的颜色的TextBlock。

我们还提供扩展功能，以向TextBlock元素添加笔触功能。这些扩展是在名称空间NoesisGUIExtensions下定义的，该名称空间应包含在XAML文件的根元素中。附加属性Text.Stroke和Text.StrokeThickness可以分别用于指定笔触的颜色和笔触的粗细（请参见以下示例中的突出显示的行）。

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:noesis="clr-namespace:NoesisGUIExtensions">
  <StackPanel VerticalAlignment="Center" Width="200" TextElement.FontSize="25">
    <TextBlock Text="Foreground" TextAlignment="Center" Margin="4" Foreground="DodgerBlue"/>
    <TextBlock Text="Background" TextAlignment="Center" Margin="3" Padding="1" Background="DodgerBlue"/>
    <TextBlock Text="Stroke" TextAlignment="Center" Margin="4"
      noesis:Text.Stroke="DodgerBlue"
      noesis:Text.StrokeThickness="2.5"/>
  </StackPanel>
</Grid>

TextTutorialImg6.jpg

请注意，您还可以将渐变用于前景和背景属性。

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Background="White"
  TextElement.FontFamily="Fonts/#Roboto"
  TextElement.FontSize="32"
  TextElement.Foreground="Black">

  <Viewbox>
    <StackPanel Margin="40" VerticalAlignment="Center" HorizontalAlignment="Left">
      <TextBlock>
        <Bold FontSize="20" Foreground="Gray">SolidColorBrush</Bold>
        <LineBreak/>
        <Bold>
          <Span Foreground="Red">Different</Span>
          <Span Foreground="YellowGreen">solid</Span>
          <Span Foreground="Orange">colors</Span>
        </Bold>
        for the
        <Italic Foreground="DodgerBlue">Foreground</Italic>

        <LineBreak/>
        <LineBreak/>

        <Bold FontSize="20" Foreground="Gray">LinearGradientBrush</Bold>
        <LineBreak/>
        <Bold>
          <Span>
            <Span.Foreground>
              <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <GradientStop Color="Red" Offset="0"/>
                <GradientStop Color="YellowGreen" Offset="1"/>
              </LinearGradientBrush>
            </Span.Foreground>
            Different
          </Span>
          <Span>
            <Span.Foreground>
              <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Color="Green" Offset="0"/>
                <GradientStop Color="Gold" Offset="1"/>
              </LinearGradientBrush>
            </Span.Foreground>
            linear
          </Span>
          <Span>
            <Span.Foreground>
              <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="Orange" Offset="0"/>
                <GradientStop Color="DodgerBlue" Offset="1"/>
              </LinearGradientBrush>
            </Span.Foreground>
            gradients
          </Span>
        </Bold>
        for the
        <Italic>
          <Italic.Foreground>
            <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
              <GradientStop Color="DodgerBlue" Offset="0"/>
              <GradientStop Color="Magenta" Offset="1"/>
            </LinearGradientBrush>
          </Italic.Foreground>
          Foreground
        </Italic>

        <LineBreak/>
        <LineBreak/>

        <Bold FontSize="20" Foreground="Gray">RadialGradientBrush</Bold>
        <LineBreak/>
        <Bold>
          <Span>
            <Span.Foreground>
              <RadialGradientBrush GradientOrigin="0,0" Center="0,0" SpreadMethod="Reflect">
                <GradientStop Color="Red" Offset="0"/>
                <GradientStop Color="YellowGreen" Offset="1"/>
              </RadialGradientBrush>
            </Span.Foreground>
            Different
          </Span>
          <Span>
            <Span.Foreground>
              <RadialGradientBrush>
                <GradientStop Color="Green" Offset="0"/>
                <GradientStop Color="Gold" Offset="1"/>
              </RadialGradientBrush>
            </Span.Foreground>
            radial
          </Span>
          <Span>
            <Span.Foreground>
              <RadialGradientBrush GradientOrigin="1,1" Center="1,1" SpreadMethod="Reflect">
                <GradientStop Color="Orange" Offset="0"/>
                <GradientStop Color="DodgerBlue" Offset="1"/>
              </RadialGradientBrush>
            </Span.Foreground>
            gradients
          </Span>
        </Bold>
        for the
        <Italic>
          <Italic.Foreground>
            <RadialGradientBrush RadiusX="0.2" SpreadMethod="Repeat">
              <GradientStop Color="DodgerBlue" Offset="0"/>
              <GradientStop Color="Magenta" Offset="1"/>
            </RadialGradientBrush>
          </Italic.Foreground>
          Foreground
        </Italic>
      </TextBlock>
    </StackPanel>
  </Viewbox>
</Grid>

TextTutorialImg7.jpg

教程8：文字教学

文字教学

内联

字体系列

样式属性

布局属性

颜色属性

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Noesis Gui