应用变换可以改变应用程序中文本的显示。 下面的示例使用不同类型的呈现变换来影响
TextBlock
控件中文本的显示。
下面的示例演示了在 x-y 二维平面中文本围绕一个特定点进行旋转。
以下代码示例使用
RotateTransform
旋转文本。 如果
Angle
值为 90,则元素会按顺时针方向旋转 90 度。
<!-- Rotate the text 90 degrees using a RotateTransform. -->
<TextBlock FontFamily="Arial Black" FontSize="64" Foreground="Moccasin" Margin ="80, 10, 0, 0">
Text Transforms
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
下面的示例演示沿 X 轴放大 150% 得到第二行文本,沿 Y 轴放大 150% 得到第三行文本。
下面的代码示例使用 ScaleTransform 从文本原始大小对文本进行缩放。
<!-- Scale the text using a ScaleTransform. -->
<TextBlock
Name="textblockScaleMaster"
FontSize="32"
Foreground="SteelBlue"
Text="Scaled Text"
Margin="100, 0, 0, 0"
Grid.Column="0" Grid.Row="0">
</TextBlock>
<TextBlock
FontSize="32"
FontWeight="Bold"
Foreground="SteelBlue"
Text="{Binding Path=Text, ElementName=textblockScaleMaster}"
Margin="100, 0, 0, 0"
Grid.Column="0" Grid.Row="1">
<TextBlock.RenderTransform>
<ScaleTransform ScaleX="1.5" ScaleY="1.0" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock
FontSize="32"
FontWeight="Bold"
Foreground="SteelBlue"
Text="{Binding Path=Text, ElementName=textblockScaleMaster}"
Margin="100, 0, 0, 0"
Grid.Column="0" Grid.Row="2">
<TextBlock.RenderTransform>
<ScaleTransform ScaleX="1.0" ScaleY="1.5" />
</TextBlock.RenderTransform>
</TextBlock>
放大文本不同于增大文本字号。 字号的计算相互独立,以便针对不同字号提供最佳分辨率。 而缩放后的文本将按比例保持原始的文本大小。
以下示例演示沿 X 轴倾斜的文本。
下面的代码示例使用 SkewTransform 来扭曲文本。 扭曲(也称为倾斜)是一种以非均匀方式拉伸坐标空间的变换。 在本示例中,两个文本字符串沿 x 坐标扭曲了 -30° 和 30°。
<!-- Skew the text using a SkewTransform. -->
<TextBlock
Name="textblockSkewMaster"
FontSize="32"
FontWeight="Bold"
Foreground="Maroon"
Text="Skewed Text"
Margin="125, 0, 0, 0"
Grid.Column="0" Grid.Row="0">
<TextBlock.RenderTransform>
<SkewTransform AngleX="-30" AngleY="0" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock
FontSize="32"
FontWeight="Bold"
Foreground="Maroon"
Text="{Binding Path=Text, ElementName=textblockSkewMaster}"
Margin="100, 0, 0, 0"
Grid.Column="0" Grid.Row="1">
<TextBlock.RenderTransform>
<SkewTransform AngleX="30" AngleY="0" />
</TextBlock.RenderTransform>
</TextBlock>
下面的示例演示沿 x 轴和 y 轴平移或移动的文本。
以下代码示例使用 TranslateTransform 偏移文本。 在本示例中,主要文本下方略微偏移的文本副本营造出了阴影效果。
<!-- Skew the text using a TranslateTransform. -->
<TextBlock
FontSize="32"
FontWeight="Bold"
Foreground="Black"
Text="{Binding Path=Text, ElementName=textblockTranslateMaster}"
Margin="100, 0, 0, 0"
Grid.Column="0" Grid.Row="0">
<TextBlock.RenderTransform>
<TranslateTransform X="2" Y="2" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock
Name="textblockTranslateMaster"
FontSize="32"
FontWeight="Bold"
Foreground="Coral"
Text="Translated Text"
Margin="100, 0, 0, 0"
Grid.Column="0" Grid.Row="0"/>
DropShadowBitmapEffect 提供了个多种丰富的功能来产生阴影效果。 有关详细信息,请参阅创建具有阴影的文本。
向文本应用动画
Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see: https://aka.ms/ContentUserFeedback.
提交和查看相关反馈