【WP8.1】富文本

　　之前写过一篇WP8下的富文本的文章，但是写的不是很好，整理了一下，分享一下WP8.1下的富文本处理

富文本处理主要是对表情和链接的处理，一般使用RichTextBlock进行呈现

 

问题说明:

　　由于RichTextBlock内部的元素不是普通的FrameworkElement，而是继承自TextElement，FrameworkElement的一些属性不支持

　　当HyperLink设置了NavigateUri属性时，其默认的行为是跳转到外部的IE浏览器

　　有时候我们需要自定义HyperLink的行为，例如QQ：当点击富文本的链接时，弹出ContextMenu，或者调到内部的浏览器，或者调到指定页面

　　所以不能设置NavigateUri值，通过Click事件处理相关逻辑，我们需要把链接的值传到Click事件中，这里我用了附加属性给HyperLink附加一个属性，以保证在Click事件能取到导航的值

 

下面是代码

　　表情和链接的解析用正则表达式

1、定义附加属性的类

    public class HyperLinkExtensions

    {

        public static readonly DependencyProperty NavigateUrlProperty = DependencyProperty.Register(

            "NavigateUrl", typeof (string), typeof (HyperLinkExtensions), new PropertyMetadata(default(string)));



        public static string GetNavigateUrl(Hyperlink element)

        {

            return (string)element.GetValue(NavigateUrlProperty);

        }



        /// <summary>

        /// 为HyperLink附加NavigateUrl属性

        /// </summary>

        public static void SetNavigateUrl(Hyperlink element, string value)

        {

            element.SetValue(NavigateUrlProperty, value);

        }

    }

2、Xaml

<Grid>

    <RichTextBlock FontSize="25" x:Name="Rtb"/>

</Grid>

3、富文本处理

    //表情字典，表情转文件名

    private readonly Dictionary<string, string> emojiDict = new Dictionary<string, string>

    {

        {"大笑", "daxiao"},

        {"大哭", "daku"},

    };



    /// <summary>

    /// 文本转富文本

    ///     表情为格式为：{表情}

    ///     链接格式为：<a href="http://www.baidu.com">百度</a>

    /// </summary>

    private Paragraph AnalyzeText(string richText)

    {

        richText = Regex.Replace(richText, "{(?<emoji>[^}]+)}|<a[^>]*?>(?<link_title>[^<]*?)</a>", i =>

        {

            if (!string.IsNullOrEmpty(i.Groups["link_title"].Value))

            {

                const string link =

                    @"<Hyperlink Foreground=""{{StaticResource PhoneAccentBrush}}"" NavigateUri=""http://www.baidu.com"">

                                    <Underline>{0}</Underline>

                                </Hyperlink>";

                return string.Format(link, i.Groups["link_title"].Value);

            }

            if (!string.IsNullOrEmpty(i.Groups["emoji"].Value))

            {

                const string image = @"<InlineUIContainer>

                                        <Image Source=""/Assets/Emoji/{0}.png"" Width=""30"" VerticalAlignment=""Center""/>

                                    </InlineUIContainer>";

                return string.Format(image, emojiDict[i.Groups["emoji"].Value]);

            }

            

            return string.Empty;

        });



        const string paragraph = @"<Paragraph 

                        xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""

                        xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"">

                        {0}

                    </Paragraph>";



        var p = (Paragraph)XamlReader.Load(string.Format(paragraph, richText));



        HandleHyperlink(p);

        return p;

    }



    /// <summary>

    /// 处理点击事件

    /// </summary>

    /// <param name="p"></param>

    private void HandleHyperlink(Paragraph p)

    {

        foreach (var inline in p.Inlines)

        {

            var link = inline as Hyperlink;

            if (link != null)

            {

                HyperLinkExtensions.SetNavigateUrl(link, link.NavigateUri.OriginalString);

                link.NavigateUri = null;

                link.Click += link_Click;

            }

        }

    }



    private async void link_Click(Hyperlink sender, HyperlinkClickEventArgs args)

    {

        var uri = HyperLinkExtensions.GetNavigateUrl(sender);

        //这里定义点击事件

        await new MessageDialog(uri).ShowAsync();

    }

4、测试

    private void Test()

    {        

        var richText = @"2015年喽嘻嘻~~新年新气象，三羊开泰，诸事喜气洋洋。GO~，发红包啦<a href=""http://www.baidu.com"">点我领红包</a>{大笑}哈哈{大哭}呜呜";



        var p = AnalyzeText(richText);

        Rtb.Blocks.Add(p);

    }

5、结果

 

 

Demo：http://files.cnblogs.com/files/bomo/RichTextDemo8.1.zip

 

声明：转载请注明出处  http://www.cnblogs.com/bomo/p/4320595.html