WPF文字修饰——上、中、下划线与基线

       我们知道,文字的修饰包括:空心字、立体字、划线字、阴影字、加粗、倾斜等。这里只说划线字的修饰方式,按划线的位置,我们可将之分为:上划线、中划线、基线与下划线。

从上至下,分别为上划线(Overline),中划线(StrikeThrough),基线(Baseline)和下划线(Underline)。

如何实现?

(1)XAML代码:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<TextBlock TextDecorations="Strikethrough" FontSize="72" FontFamily="Arial">A</TextBlock>
</Page>

这里 TextDecorations 属性可以设置为:OverLine, Strikethrough, Baseline, Underline None,如果没有设置 TextDecorations 属性,则默认为 None,即不带划线修饰。

(2)使用C#代码: private void SetDefaultStrikethrough() {    textBlock1.TextDecorations = TextDecorations.Strikethrough; } (为了简洁,这里只列出相关的关键代码,其他代码未用 C#列出。textBlock1 为 TextBlock 的名称,在 XAML 中使用 x:Name="textBlock1"形式标记)

如果要更复杂点的效果,比如需要设置划线的颜色、线粗等: 如何制作类似效果呢? 方法是:设置 TextBlock 的 TextDecorations 属性,再对 TextDecoration 的 Pen 属性进行设置。

如下 XAML 代码:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Canvas>
<TextBlock FontSize="84" FontFamily="Arial Black" Margin="0,0">
<TextBlock.TextDecorations>
<TextDecoration PenOffset="10" PenOffsetUnit="Pixel" PenThicknessUnit="Pixel">
 <TextDecoration.Pen>
          <Pen Thickness="5">
            <Pen.Brush>
              <LinearGradientBrush Opacity="0.8" StartPoint="0,0.5"  EndPoint="1,0.5">
                <LinearGradientBrush.GradientStops>
                  <GradientStop Color="Yellow" Offset="0" />
                  <GradientStop Color="Red" Offset="1" />
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Pen.Brush>
            <Pen.DashStyle>
              <DashStyle Dashes="1,2,3"/>
            </Pen.DashStyle>
          </Pen>
        </TextDecoration.Pen>
</TextDecoration>
</TextBlock.TextDecorations>
GOOD
</TextBlock>
</Canvas>
</Page>

C#关键代码:

private void SetLinearGradientUnderline()
{
    TextDecoration myUnderline = new TextDecoration();

    Pen myPen = new Pen();
    myPen.Brush = new LinearGradientBrush(Colors.Yellow, Colors.Red, new Point(0, 0.5), new Point(1, 0.5));
    myPen.Brush.Opacity = 0.8;
    myPen.Thickness = 5;
    myPen.DashStyle = DashStyles.Dash;
    myUnderline.Pen = myPen;
    myUnderline.PenThicknessUnit = TextDecorationUnit.FontRecommended;

    TextDecorationCollection myCollection = new TextDecorationCollection();
    myCollection.Add(myUnderline);
    textBlockGood.TextDecorations = myCollection;
}

引申问题: 可不可以同时画上划线、中划线和下划线?比如:可不可以画如下图所示的文武线呢?

答案是:可以!留给有兴趣的朋友去思考吧。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Flash/Flex学习笔记(50):3D线条与填充

3D线条:把上一篇中的3D坐标旋转示例稍做修改,用线把各个小球连接起来即可。 var balls:Array; var numBalls:uint=30; v...

1978
来自专栏前端萌媛的成长之路

CSS盒子模型

1593
来自专栏偏前端工程师的驿站

CSS魔法堂:重拾Border之——图片作边框

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半...

2236
来自专栏cnblogs

Css3新特性应用之过渡与动画

一、缓动效果 学习和利用贝塞尔曲线,默认支持ease,ease-in,ease-out,ease-in-out和linear等 还提供一个cubic-beize...

2477
来自专栏分享达人秀

可折叠列表ExpandableListView多级选择

上一期学习了AutoCompleteTextView和MultiAutoCompleteTextView,你已经掌握了吗?本期开始学习Expandabl...

37410
来自专栏用户2442861的专栏

openCV—基本绘图

431
来自专栏Jack的Android之旅

自定义天气显示温度变化的LinearChart控件

这次发表的是前几个月搞定的一个自定义控件,那时自己在写一个小的查看天气的软件,在这过程中就涉及了显示天气变化的折线图,一开始想用一些画图框架来解决问题,不过考虑...

761
来自专栏HTML5学堂

CSS3三维变形,其实很简单!

HTML5学堂:空间的变化一直是视觉感官上最吸引人的东西,而如果要把这些空间上的变化用代码在浏览器上实现出来,就需要深入的来了解CSS3的transform 3...

3287
来自专栏mySoul

css的2D转换

下面通过css实现动画效果,可以使用脚本化的css实现滑入,轮廓伸缩的列表,即动态的HTML,一个过时的说法DHTML

900
来自专栏用户2442861的专栏

关于CSS中background样式的repeat和no-repeat的坐标问题

http://blog.sina.com.cn/s/blog_98eef7830101cv8t.html

441

扫码关注云+社区