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