【WP8】富文本功能實現

2014年8月1日更新：修復如果有多個相同鏈接解析失敗的Bug，謝謝 @Walsh 提供的問題

  

富文本在移動APP上應用的最多的就是表情了，類似微博，QQ，微信都有對提供對表情和鏈接的支持，富文本一般包括：文本，表情，超鏈接

WP上沒有提供對富文本的直接編輯，富文本是通過字符串進行轉換的，例如：QQ上的表情用斜杠標識（例如：/哈哈），微博上的表情用中括號標識（例如：[兔子]）

　　本文實現富文本的思路是：

　　　　表情：通過構造正則表達式，匹配相關的表情標識，並替換成相關的表情圖片

　　　　鏈接：通過正則表達式匹配以http://或https://開頭的一連串的ASCII字符（空格除外）

 

在msdn看到RichTextBox支持一個Xaml的屬性，可以直接構造Xaml字符串，賦給RichTextBox，但是Xaml屬性不支持圖片元素，所以如果不需要顯示圖片的話可以使用該屬性

詳情見：http://msdn.microsoft.com/zh-cn/library/system.windows.controls.richtextbox.xaml(v=vs.95).aspx

 

由於需要用到圖片元素，所以我們通過構造Xaml然后用XamlReader把Xaml轉換為Paragraph，再把Paragraph賦值給RichTextBox.Blocks，從而實現富文本

先看效果圖吧

 

我們對RichTextBox進行擴展，添加一個新屬性Text

定義RichTextBox之前，我們先說明表情字典的加載，我把表情字典保存在一個txt文件中，在加載的時候進行讀取

表情字典在文件中的定義如下

sina/s001.png,[兔子]
sina/s002.png,[熊貓]
sina/s003.png,[給力]
sina/s004.png,[神馬]
sina/s005.png,[浮雲]
sina/s006.png,[織]
sina/s007.png,[圍觀]

然后在需要的時候從文件中讀取（放在RichTextBoxExt）

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Markup;

namespace RichTextDemo
{
    public class RichTextBoxExt : RichTextBox
    {
        #region 富文本Text

        public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
            "Text", typeof(string), typeof(RichTextBoxExt), new PropertyMetadata(default(string), TextChangedCallback));

        private static void TextChangedCallback(DependencyObject dependencyObject,
            DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
        {
            var richTextBox = (RichTextBoxExt)dependencyObject;

            var text = (string)dependencyPropertyChangedEventArgs.NewValue;
            var p = richTextBox.ConvertToElement(text);
            richTextBox.Blocks.Clear();
            richTextBox.Blocks.Add(p);
        }


        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }

        #endregion
        
        //1、由於RichTextBox的Xaml屬性不支持圖片，所以沒辦法直接通過RichTextBox的Xaml屬性直接處理
        //      這里通過構造XAML並使用XamlReader進行讀取轉換達到富文本的目的
        //      富文本包括：文本，圖片，鏈接三種元素
        //          我們只需要分別對圖片和鏈接進行處理就可以
        /// <summary>
        /// 將文字轉為富文本（文字+圖片表情+鏈接）
        /// </summary>
        public Paragraph ConvertToElement(string input)
        {
            if (input == null)
            {
                return new Paragraph();
            }

            //匹配普通鏈接（遇到空格或非Ascii字符則停止）
            var mc = Regex.Matches(input, @"http://[\x21-\x7e-[\s]]+|http://[\x21-\x7e-[\s]]+|http://[\x21-\x7e-[\s]]+$");

            //記錄是否重復
            var matchs = new List<string>();

            foreach (Match m in mc)
            {
                if (matchs.Contains(m.Value))
                {
                    //如果有重復匹配項，則跳過
                    continue;
                }

                //這里鏈接用藍色顯示，不加下划線（注意，這里使用系統的瀏覽器IE打開）
                input = input.Replace(m.Value.Substring(0, m.Value.Length),
                    string.Format(@"<Hyperlink NavigateUri=""{0}"" MouseOverTextDecorations=""None"" MouseOverForeground=""Blue"" Foreground=""Blue"" TargetName=""_blank"" >{0}</Hyperlink>",
                        m.Value));

                matchs.Add(m.Value);
            }
            matchs.Clear();

            //匹配安全連接
            mc = Regex.Matches(input, @"https://[\x21-\x7e-[\s]]+|https://[\x21-\x7e-[\s]]+|https://[\x21-\x7e-[\s]]+$");
            foreach (Match m in mc)
            {
                if (matchs.Contains(m.Value))
                {
                    //如果有重復匹配項，則跳過
                    continue;
                }
                input = input.Replace(m.Value.Substring(0, m.Value.Length),
                    string.Format(@"<Hyperlink NavigateUri=""{0}"" MouseOverTextDecorations=""None"" MouseOverForeground=""Blue"" Foreground=""Blue"" TargetName=""_blank"" >{0}</Hyperlink>",
                        m.Value));
                matchs.Add(m.Value);
            }

            //表情字典
            var dict = EmotionDictionary;
            
            //構造正則模式串（匹配表情）
            var builder = new StringBuilder();
            foreach (var key in dict.Keys)
            {
                builder.Append(key.Replace("[", @"\[").Replace("]", @"\]").Replace("{", @"\{").Replace("}", @"\}"));
                builder.Append("|");
            }
            //定義一個Regex對象實例
            var r = new Regex(builder.ToString().Substring(0, builder.Length - 1));
            mc = r.Matches(input);
            foreach (Match m in mc)
            {
                //表情替換圖片
                input = input.Replace(m.Value, string.Format(@"
                                <InlineUIContainer>
                                    <Border>
                                        <Image Source=""/Assets/Emotions/{0}"" Width=""30"" Height=""30""/>
                                    </Border>
                                </InlineUIContainer>
                    ", dict[m.Value]));
            }

            var xaml = string.Format(@"<Paragraph 
                                        xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
                                        xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"">
                                    <Paragraph.Inlines>
                                    <Run></Run>
                                      {0}
                                    </Paragraph.Inlines>
                                </Paragraph>", input);

            return (Paragraph)XamlReader.Load(xaml);
        }

        #region 表情字典

        private static Dictionary<string, string> emotionDictionary;
        public static Dictionary<string, string> EmotionDictionary
        {
            get
            {
                if (emotionDictionary == null)
                {
                    emotionDictionary = new Dictionary<string, string>();

                    var files = new[] { "sina", "emoji" };

                    foreach (var file in files)
                    {
                        using (var stream = Application.GetResourceStream(
                            new Uri(string.Format("Assets/Emotions/{0}.txt", file), UriKind.Relative)).Stream)
                        {
                            using (var reader = new StreamReader(stream))
                            {
                                var line = reader.ReadLine();
                                while (line != null)
                                {
                                    var res = line.Split(',');
                                    emotionDictionary.Add(res[1], res[0]);
                                    line = reader.ReadLine();
                                }
                            }
                        }
                    }
                }
                return emotionDictionary;
            }
        } 

        #endregion
    }
}

 

 

下面是使用，使用很簡單

  <richTextDemo:RichTextBoxExt Text="富文本可以包含表情：{害怕}[心][哈哈]，鏈接：http://www.baidu.com，文字：這是一個富文本控件" Margin="-10,0"/>

RichTextBoxExt會自動把Text的文本中的表情轉換為圖片，鏈接轉換為超鏈接，如上面效果圖所示

 

附上Demo

http://files.cnblogs.com/bomo/RichTextDemo.zip

 

聲明：轉載請注明出處http://www.cnblogs.com/bomo/