码迷,mamicode.com
首页 > 其他好文 > 详细

【WP8】富文本功能实现

时间:2014-07-28 14:32:53      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   os   strong   文件   

富文本在移动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,从而实现富文本

先看效果图吧

bubuko.com,布布扣

 

我们对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)

    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]]+$");
            foreach (Match m in mc)
            {
                //这里链接用蓝色显示,不加下划线(注意,这里使用系统的浏览器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));
            }

            //匹配安全连接
            mc = Regex.Matches(input, @"https://[\x21-\x7e-[\s]]+|https://[\x21-\x7e-[\s]]+|https://[\x21-\x7e-[\s]]+$");
            foreach (Match m in mc)
            {
                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));
            }

            //表情字典
            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/

【WP8】富文本功能实现,布布扣,bubuko.com

【WP8】富文本功能实现

标签:style   blog   http   color   使用   os   strong   文件   

原文地址:http://www.cnblogs.com/bomo/p/3872561.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!