原文:WPF文字描边的解决方法(二)——支持文字竖排和字符间距调整

自前天格式化文本效果出来后,今天又添加文本竖排和调整字符间距的功能。另外,由于上次仓促,没来得及做有些功能的设计时支持,这次也调整好了。

由于本人比较懒,没有重新做,文字竖排和字符间距主要是通过新建继承自StackPanel的FormatedText类逐字符添加StrokeableLabel做的,竖排是用的StackPanel.Orientation来设置的,字符间距主要用的StrokeableLabel.Margin。

对于StrokeableLabel只是添加了设计时支持,其他没有改变,如果对StrokeableLabel不了解请看http://blog.csdn.net/springberlin/article/details/45699625

FormatedText有如下新添属性:

StretchSize:字符间距

TextOrientation:文字排版

下面是效果图

XMAL配置:

<Window x:Class="StrokeableLabelTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wpflib="clr-namespace:BLCTClassLibrary.WpfLib;assembly=BLCTClassLibrary.WpfLib"
Title="MainWindow" Height="422" Width="579">
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" >
<Label Margin="10" Content="以下是StrokeableLabel类(相对轻量级)"/>
<wpflib:StrokeableLabel Text="测试文本" Fill="Yellow" Stroke="Black" StrokeThickness="0.3" FontWeight="Bold" FontSize="50"/>
<wpflib:StrokeableLabel Text="测试文本" Fill="Yellow" Stroke="Red" StrokeThickness="0.7" FontWeight="DemiBold" FontSize="50">
<wpflib:StrokeableLabel.Effect>
<DropShadowEffect Color="Black" BlurRadius="15" RenderingBias="Quality" Direction="290" ShadowDepth="5" Opacity="1" />
</wpflib:StrokeableLabel.Effect>
</wpflib:StrokeableLabel>
<wpflib:StrokeableLabel Text="测试文本" Fill="White" StrokeThickness="2" FontWeight="Bold" FontSize="50">
<wpflib:StrokeableLabel.Stroke>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Blue" Offset="0.2"/>
<GradientStop Color="Brown" Offset="0.3"/>
<GradientStop Color="PowderBlue" Offset="0.7"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</wpflib:StrokeableLabel.Stroke>
</wpflib:StrokeableLabel>
<wpflib:StrokeableLabel Text="测试文本" Stroke="red" StrokeThickness="2" FontWeight="Bold" FontSize="50">
<wpflib:StrokeableLabel.Fill>
<ImageBrush ImageSource="/StrokeableLabelTest;component/Images/20085385922474_2.jpg" />
</wpflib:StrokeableLabel.Fill>
</wpflib:StrokeableLabel>
<wpflib:StrokeableLabel Fill="Transparent" FontSize="50" FontWeight="Light" StrokeThickness="8" Text="测试文本" >
<wpflib:StrokeableLabel.Stroke>
<ImageBrush ImageSource="/StrokeableLabelTest;component/Images/05.jpg" />
</wpflib:StrokeableLabel.Stroke>
</wpflib:StrokeableLabel>
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Vertical" >
<TextBlock Margin="10" Text="以下是FormatedText类(在StrokeableLabel的基础上可以使文字竖排,可以控制字符间距)" TextWrapping="WrapWithOverflow" />
<wpflib:FormatedText StretchSize="-5" TextOrientation="Vertical" HorizontalAlignment="Center" Text="测试文本" Fill="Yellow" Stroke="Black" StrokeThickness="0.3" FontWeight="Bold" FontSize="50"/>
<wpflib:FormatedText StretchSize="-10" HorizontalAlignment="Center" Text="测试文本" Fill="Yellow" Stroke="Black" StrokeThickness="0.3" FontWeight="Bold" FontSize="50"/>
<wpflib:FormatedText StretchSize="20" HorizontalAlignment="Center" Text="测试文本" Fill="Yellow" Stroke="Black" StrokeThickness="0.3" FontWeight="Bold" FontSize="50">
<wpflib:FormatedText.Effect>
<DropShadowEffect Color="Black" BlurRadius="15" RenderingBias="Quality" Direction="290" ShadowDepth="5" Opacity="1" />
</wpflib:FormatedText.Effect>
</wpflib:FormatedText>
</StackPanel>
</Grid>
</Window>

库文件仅贴关键代码,其余请参考源码。库文件中利用StrokeableLabel进行排版以达到横/竖排和字符间距的效果:

        private void CreateText(string newStr)
{
this.Children.Clear();
if (newStr == null)
return;
this.Orientation = TextOrientation; for (int i = 0; i < newStr.Length; i++)
{
if (i < newStr.Length - 1)
addChar(newStr[i], false);
else
addChar(newStr[i], true);
}
} /// <summary>
/// 添加一个字符
/// </summary>
/// <param name="c"></param>
private void addChar(char c, bool ignore)
{
StrokeableLabel label = new StrokeableLabel();
label.Text = c + "";
label.Fill = this.Fill;
label.Stroke = this.Stroke;
label.StrokeThickness = this.StrokeThickness;
label.FontSize = this.FontSize;
label.FontFamily = this.FontFamily;
label.FontStyle = this.FontStyle;
label.FontWeight = this.FontWeight;
label.FontStretch = this.FontStretch;
if (!ignore)
switch (Orientation)
{
case System.Windows.Controls.Orientation.Horizontal:
label.Margin = new Thickness(0, 0, StretchSize, 0);
break;
case System.Windows.Controls.Orientation.Vertical:
label.Margin = new Thickness(0, 0, 0, StretchSize);
break;
}
label.VerticalAlignment = System.Windows.VerticalAlignment.Center;
label.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
this.Children.Add(label);
}

源码:

http://download.csdn.net/detail/wblct/8708017







WPF文字描边的解决方法(二)——支持文字竖排和字符间距调整的更多相关文章

  1. WPF文字描边的解决方法

    原文:WPF文字描边的解决方法  由于项目原因,今天研究了一下午WPF的文字描边,网上这方面的资料奇少,搞了半天才发现强大的WPF原来不直接支持文字描边啊.最后求助于MSDN,找到了方案,和大家分 ...

  2. echarts图表X轴文字过长解决解决方案:根据文字长度自动旋转

    Echarts 标签中文本内容太长的时候怎么办 ? 关于这个问题搜索一下,有很多解决方案.无非就是 省略(间隔显示).旋转文字方向.竖排展示 前面两种解决方案,就是echarts暴露的: {   ax ...

  3. 使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行

    使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行 前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的 ...

  4. FusionCharts使用问题及解决方法(二)-FusionCharts常见问题大全

    在上文中,我们介绍了FusionCharts常见问题(FAQ)的解决方法,本文将一同讨论FusionCharts使用者面临的一些复杂问题的解决方法. 如何启用JavaScript调试模式? 要启用Ja ...

  5. Unity导出APk出错解决方法二

    错误提示(需得打开编辑器log文件才能看到全部log,Unity3d只显示一部分): Error building Player: CommandInvokationFailure: Unable t ...

  6. RecyclerView嵌套TextView时显示文字不全的解决方法之一

    先描述一下这个小bug:简单的TextView嵌套RecyclerView作为itemView时,可能会在文本中出现布局覆盖的现象,itemView的布局其实很简单,就是一个RelativeLayou ...

  7. PHP中Strict Standards错误解决方法二

    在PHP5.3.3 中安装wordpress 3.0.1 ,在安装时出现错误:Strict Standards: PHP Strict Standards: Declaration of Walker ...

  8. Xcode真机测试could not find developer disk image解决方法(支持iOS9.2)

    这个问题开发者经常碰到,因为当我们更新手机iOS版本的时候,可能我们开发人员因为项目的需要等原因并一定愿意更新xcode到最新版本.但是老版本的xcode极有可能不支持最新的iOS版本,也有一些旧的i ...

  9. input输入框只允许输入数字/ 数字+小数点/ 文字+字母/ 等解决方法

    1.只允许输入数字: <input type="text" onkeyup="this.value=this.value.replace(/[^0-9]/g,'') ...

随机推荐

  1. [Nuxt] Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt

    Install: npm install -g vue-cli Init project: vue init nuxt/starter . Run: npm run dev Create a inde ...

  2. [Maven实战](6)仓库(本地仓库,远程仓库,镜像)

    1. 简单介绍 maven能够在某个位置统一存储全部maven项目共享的构件,这个统一的位置就是仓库.实际的Maven项目将不会各自存储其依赖文件,它们仅仅须要声明这些依赖的坐标,在须要的时候(比如. ...

  3. Linux动态链接库的创建与使用

    Linux动态链接库的创建与使用1. 介绍     使用GNU的工具我们如何在Linux下创建自己的程序函数库?一个“程序函数库”简单的说就是一个文件包含了一些编译好的代码和数据,这些编译好的代码和数 ...

  4. UILabel调整字间距

    1.引入 在文件导入 #import <CoreText/CoreText.h> 2.程序 NSMutableAttributedString *attributedString =[[N ...

  5. 云应用开发之新浪SAE读写云端数据库MySQL

    本博文为前篇博文新浪云应用SAE日志查看的延续. 在读写云数据库MySQL之前,须要说明的是,在新浪云平台上使用数据库时.该平台默认会为每个应用单独新建一个数据库database实例.在该实例中再创建 ...

  6. 【SPOJ QTREE】树链剖分模板

    用线段树求解,这里注意因为求的是路径最大值,注意一下细节. #include<cstdio> #include<cstring> #include<algorithm&g ...

  7. 关于spyder的一些用法

    目前还不会用spyder,感觉不习惯,也没怎么用MATLAB 能记住几点算几点吧 1,双击程序左侧栏,加断点 1,按住Ctrl,点击函数,进入函数

  8. [Docker] Build Your Own Custom Docker Image

    In this lesson we will cover how to build your own custom Docker image from scratch. We'll walk thro ...

  9. Gibbs 采样定理的若干证明

    坐标平面上的三点,A(x1,y1),B(x1,y2),C(x2,y1),假设有概率分布 p(x,y)(P(X=x,Y=y) 联合概率),则根据联合概率与条件概率的关系,则有如下两个等式: {p(x1, ...

  10. css 弹性盒模型Flex 布局

    参考文章:http://www.runoob.com/w3cnote/flex-grammar.html Flex 布局是什么:采用Flex布局的元素,称为Flex容器(flex container) ...