[Silverligt技巧]如何讓TextBlock文本豎排

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"/>

效果:

但是,這個方法有一個缺點,就是你需要設定好TextBlock.的with屬性和文本字型大小的比例. 例如,我們將依舊設定成width = 12, FontSize =20,即:

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

得到的效果:

很明顯文字有被遮擋,因此,如果再給字型添加一個粗體的屬性,那遮擋效果更明顯.於是,尋求另一中方法.

方法二:自訂一個繼承與Control的類,命名為VerticalTextBlock.

該類公布一個TextProperty屬性,並自訂控制項模板,在模板中添加一個TextBlock,TextBlock的Text內容由一系列帶有分行符號的字元組成.該類也重寫模板應用方法.代碼如下:

VerticalTextBlock

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;
                }
            }
        }

    }

 

 

如何應用?

很簡單,添加控制項所在的命名空間,然後再xaml裡像添加控制項一樣載入即可.

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

效果:

 

第二種方法比較好,就像正常使用TextBlock控制項一樣使用,不需要考慮到字型大小和控制項大小間的關係.

 

轉載之:http://blogs.msdn.com/delay/archive/2008/06/19/text-from-a-slightly-different-perspective-verticaltextblock-control-sample-for-silverlight-2.aspx

 

2011-07-10補充:  

利用Behavior實現文本豎排

http://www.cnblogs.com/HalfwayMonk/archive/2011/06/26/2090902.html