WPF文字排列方式解析zz

时间：2022-05-21 07:57:52

 

WPF文字的处理是一个比较基础的技能。在使用WPF开发工具时，对于各种文字的处理时经常会遇到的情况。希望大家可以通过实践经验的积累，牢固掌握这一方面知识。

AD：WOT2014：用户标签系统与用户数据化运营培训专场

WPF文字在处理的过程中可以实现许多种方式来满足我们开发人员在实际编程中的需求。在这里将会为大家呈现一种WPF文字作为标题时的竖排方式。

有时Expande 控件的标题文字需要竖排，例如 Expande的FlowDirection属性为"RightToLeft"，即左右方向的收。

WPF文字的处理相关代码示例：

  1. < Grid x:Name="gridTemplate">
  2. < Grid.Resources>
  3. < !--模板数据的Expender标题竖排-->
  4. < DataTemplate x:Key=
    "ExpanderHeaderTextV">
  5. < TextBlock Text="{Binding}"
  6. Width="30"
  7. Foreground="Green"
  8. FontSize="20"
  9. FontWeight="Normal"
  10. TextWrapping="Wrap">
  11. < TextBlock.RenderTransform>
  12. < TransformGroup>
  13. < MatrixTransform/>
  14. < /TransformGroup>
  15. < /TextBlock.RenderTransform>
  16. < Run Text="模"/>
  17. < LineBreak/>
  18. < Run Text="版"/>
  19. < LineBreak/>
  20. < Run Text="内"/>
  21. < LineBreak/>
  22. < Run Text="容"/>
  23. < LineBreak/>
  24. < /TextBlock>
  25. < /DataTemplate>
  26. < /Grid.Resources>
  27. < Expander HorizontalAlignment=
    "Stretch" Header="" HeaderTemplate=
    "{StaticResource ExpanderHeaderTextV}
    " ExpandDirection="Left"
    FlowDirection="RightToLeft"
    VerticalAlignment="Stretch"
    AllowDrop="False">
  28. < TabControl IsSynchronizedWith
    CurrentItem="True" Margin=
    "0,0,0,0" FontSize="14">
  29. < TabItem Header="模板数据"
    x:Name="tabTemplate">
  30. < Grid/>
  31. < /TabItem>
  32. < /TabControl>
  33. < /Expander>
  34. < /Grid>

WPF文字的基本处理方法就为大家介绍到这里。

 

--------------------------------------------------------------------------------------------------------------------------------------

 

Silverlight提供的TextBlock 用于基本的文本显示. 通常状态下,TextBlock文本都是横排状态.但是,有的时候,我们需要文本竖排以满足我们的需求. 下面介绍一下两种方法:

方法一: 使用TextWrapping = Wrap

TextBlock的TextWrapping属性用于获取或设置TextBlock对文本的换行方式,它有两个枚举值:NoWrap和Wrap.Wrap表示允许TextBlock当文本的长度超过TextBlock的ActualWith时,文本自动换行.这个属性给我们一点启示:我们可以设置TextWrapping = Wrap,并设定TextBlock的With来实现我们的效果.

例如:

<TextBlock TextAlignment="Center" TextWrapping="Wrap" Text="好友列表" Width="12" Foreground="Red"/>

效果:

WPF文字排列方式解析zz

但是,这个方法有一个缺点,就是你需要设置好TextBlock.的with属性和文本字体大小的比例. 例如,我们将依旧设置成width = 12, FontSize =20,即:

<TextBlock TextAlignment="Center" TextWrapping="Wrap" Text="好友列表" Width="12" Foreground="Red" FontSize="20" />

得到的效果:

WPF文字排列方式解析zz

很明显文字有被遮挡,因此,如果再给字体添加一个粗体的属性,那遮挡效果更明显.于是,寻求另一中方法.

方法二:自定义一个继承与Control的类,命名为VerticalTextBlock.

该类公布一个TextProperty属性,并自定义控件模板,在模板中添加一个TextBlock,TextBlock的Text内容由一系列带有换行符的字符组成.该类也重写模板应用方法.代码如下:

WPF文字排列方式解析zz

WPF文字排列方式解析zz

public class VerticalTextBlock:Control
    {
public VerticalTextBlock()
        {
            IsTabStop = false;
            var templateXaml =
@"<ControlTemplate " +
#if SILVERLIGHT
"xmlns='http://schemas.microsoft.com/client/2007' " +
#else
"xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' " +
#endif
"xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>" +
"<Grid Background=\"{TemplateBinding Background}\">" +
"<TextBlock x:Name=\"TextBlock\" TextAlignment=\"Center\"/>" +
"</Grid>" +
"</ControlTemplate>";
#if SILVERLIGHT
            Template = (ControlTemplate)XamlReader.Load(templateXaml);
#else
using(var stream = new MemoryStream(Encoding.UTF8.GetBytes(templateXaml)))
            {
                Template = (ControlTemplate)XamlReader.Load(stream);
            }
#endif
        }
public override void OnApplyTemplate()
        {
base.OnApplyTemplate();
            _textBlock = GetTemplateChild("TextBlock") as TextBlock;
            CreateVerticalText(_text);
        }
private string _text { get; set; }
private TextBlock _textBlock { get; set; }
public string Text
        {
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
        }
public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
"Text", typeof(string), typeof(VerticalTextBlock), new PropertyMetadata(OnTextChanged));
private static void OnTextChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
        {
            ((VerticalTextBlock)o).OnTextChanged((string)(e.NewValue));
        }
private void OnTextChanged(string newValue)
        {
            CreateVerticalText(newValue);
        }
private void CreateVerticalText(string text)
        {
            _text = text;
if (null != _textBlock)
            {
bool first = true;
foreach (var c in _text)
                {
if (!first)
                    {
                        _textBlock.Inlines.Add(new LineBreak());
                    }
                    _textBlock.Inlines.Add(new Run { Text = c.ToString() });
                    first = false;
                }
            }
        }
    }

WPF文字排列方式解析zz

如何应用?

很简单,添加控件所在的命名空间,然后再xaml里像添加控件一样加载即可.

<mcl:VerticalTextBlock Text="功能列表" FontWeight="bold" Foreground="Red" FontSize="20"/>

效果:

WPF文字排列方式解析zz

第二种方法比较好,就像正常使用TextBlock控件一样使用,不需要考虑到字体大小和控件大小间的关系.

相关文章