UWP开发入门(十一)——Attached Property的简单应用

原文:UWP开发入门(十一)——Attached Property的简单应用

  UWP中的Attached Property即附加属性,在实际开发中是很常见的,比如Grid.Row:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Button Grid.Row="1"></Button>
    </Grid>

   Grid.Row这个属性并不是Button对象本身的实例方法,而是定义在Grid类型上的static property,实际使用时却又附在其他控件的XAML里。

  我们今天不讨论如何使用UWP中已经定义好的Attached Property(使用起来很简单,没啥好讲的),也不会介绍附件属性的定义,以及与.NET属性的区别(MSDN文档非常详细),更不会花大力气去分析附加属性背后的原理(这个有大牛珠玉在前,不敢造次)。

  本篇仅以极简单的例子来展示Attached Propery的应用场景,抛砖引玉以期共同学习提高。

  设想场景如下,需要根据文本内容,将电话号码和邮箱地址以下划线蓝色字体和普通文本区分开来:

  

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock local:RichTextBlockEx.RichText="种子我发你这个邮箱:SampleEmail@outlook.com,有事打我电话18610241024。"></TextBlock>
    </Grid>

  显示文本UWP中一般是通过TextBlock来实现,一段文字中如果需要不同颜色,以及增加下划线就需要在TextBlock的Inlines属性中添加不同的Inline的子类对象(比如Run,Underline等)。

  而修改TextBlock的Inlines集合需要直接操作TextBlock对象,UWP的程序又通常是MVVM结构,在ViewModel中不应添加对View层级的引用,这就要求不能在ViewModel中访问TextBlock。

  那么修改TextBlock的逻辑就只能放在View中,问题是最终返回的TextBlock需要根据运行时具体绑定的文本内容才能确定,要求同时能访问TextBlock以及绑定的DataContext。似乎也不适合写在Page.xaml.cs中。

  Attached Propery则非常完美的解决了我们的问题,首先附加属性支持binding,这就将View中的TextBlock和ViewModel中的文本内容结合在一起;其次附加属性是View层级的概念,通过它来修改TextBlock不会破坏MVVM的结构。

  接下来我们动手定义一个Attached Property:

        public static string GetRichText(DependencyObject obj)
        {
            return (string)obj.GetValue(RichTextProperty);
        }

        public static void SetRichText(DependencyObject obj, string value)
        {
            obj.SetValue(RichTextProperty, value);
        }

        // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty RichTextProperty =
            DependencyProperty.RegisterAttached("RichText", typeof(string), typeof(RichTextBlockEx), new PropertyMetadata(null, RichTextChanged));

  这个附加属性叫做RichTextProperty,我们给他做了GetRichText和SetRichText两个方法的封装,以便我们能像经典的.NET属性一样,通过“RichText”来访问。具体的细节请参考MSDN的文档,这里我们着重看一下RegisterAttached方法中传递了一个回调方法RichTextChanged。

        private static void RichTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            TextBlock textBlock = d as TextBlock;
            if (textBlock == null)
                return;
            string inputString = e.NewValue as string;
            if (string.IsNullOrEmpty(inputString) || string.IsNullOrWhiteSpace(inputString))
            {
                textBlock.Text = string.Empty;
                return;
            }
            textBlock.Inlines.Clear();
            CreateTextBlock(textBlock, inputString);
        }

  该方法是一个静态方法,在biding的对象发生改变时触发,并将biding的对象本身作为第一个参数传递进来。该方法的代码先判断了绑定的新值是否为空,不为空则调用CreateTextBlock方法,根据inputString来创建带有蓝色下划线的TextBlock。

        private static void CreateTextBlock(TextBlock textBlock, string inputString)
        {
            var resultList = new List<MatchResult>();
            resultList.AddRange(GetMatchResultList(inputString));

            int offset = 0;
            var matchDicOrder = resultList.OrderBy(_ => _.Match.Index);
            foreach (var item in matchDicOrder)
            {
                var match = item.Match;
                if (match.Index >= offset)
                {
                    if (match.Index > 0 && match.Index != offset)
                    {
                        var text = inputString.Substring(offset, match.Index - offset);
                        AddText(textBlock, text);
                    }

                    var content = inputString.Substring(match.Index, match.Length);
                    AddUnderline(textBlock,  content);
                    offset = match.Index + match.Length;
                }
            }

            if (offset < inputString.Length)
            {
                var text = inputString.Substring(offset);
                AddText(textBlock, text);
            }
        }

  通过正则表达式匹配phone和email,将匹配的内容通过AddUnderline方法添加到原TextBlock中,不匹配的内容则直接AddText。

        private static void AddText(TextBlock textBlock, string text)
        {
            Run run = new Run();
            run.Text = text;
            textBlock.Inlines.Add(run);
        }

        private static void AddUnderline(TextBlock textBlock, string content)
        {
            Run run = new Run();
            run.Text = content;
            run.Foreground = new SolidColorBrush(Colors.Blue);
            Underline underline = new Underline();
            underline.Inlines.Add(run);

            textBlock.Inlines.Add(underline);
        }

  实际的开发中,这里可能存在更复杂的逻辑,比如即时通讯程序中存在@的概念,下划线的内容需要在点击后做相应处理等(打电话,发邮件)。本篇中的代码为了简单清晰做了最简化的处理,各位在自己的APP里可以进一步发挥想象补充,只要别让手机或电脑爆炸就行……

  本篇有心回归开发入门的初心,介绍的内容较为简单,写得不好还请包涵。

  照例放出GayHub地址:

  https://github.com/manupstairs/UWPSamples

 

时间: 2024-09-11 18:25:52

UWP开发入门(十一)——Attached Property的简单应用的相关文章

UWP开发入门(八)——聊天窗口和ItemTemplateSelector

原文:UWP开发入门(八)--聊天窗口和ItemTemplateSelector 我们平常用的最多的APP可能就是企鹅和微信了.有没有想过聊天窗口如何实现的?本篇我们将简单模拟一个聊天窗口. 聊天窗口大致上就是消息的一个集合列表.集合列表最常见的展现形式无非就是ListView.可能有些童鞋会觉得ListView的样式和聊天窗口相去甚远,虽然我们可以通过自定义ItemTemplate来修改元素的显示效果,但如何将ListView的元素以不同样式展现呢?这就要通过ListView的ItemTemp

UWP开发入门(十二)——神器Live Visual Tree

原文:UWP开发入门(十二)--神器Live Visual Tree 很久以前,我们就有Snoop这样的工具实时修改.查看正在运行的WPF程序,那时候调个样式,修改个模板,相当滋润.随着历史的车轮陷进WP的泥潭中,无论WP7的Silverlight还是WP8.1的runtime,偶们都不能方便快捷的查看APP的可视化树(Visual Tree)了,呜呼哉,是可忍孰不可忍放下筷子就骂微软.没想到Visual Studio 2015倒是给了我们一个惊喜,自带了一套非常强大的调试工具Live Visu

UWP开发入门(七)——下拉刷新

原文:UWP开发入门(七)--下拉刷新 本篇意在给这几天Win10 Mobile负面新闻不断的某软洗地,想要证明实现一个简单的下拉刷新并不困难.UWP开发更大的困难在于懒惰,缺乏学习的意愿.而不是"某软连下拉刷新控件都没有"这样的想法. 之前我也没有进行过下拉刷新的研究.于是先去google了几篇blog学习了一下,然后再看了某软官方的Sample.(同学们啊官方有下拉刷新的Sample啊!就在Git上啊!不要钱无门槛啊!)学习之后发现实现的方式大体分为两类. 一类是以某软Sample

UWP开发入门(十四)—— UserControl中Adaptive UI的小技巧

原文:UWP开发入门(十四)-- UserControl中Adaptive UI的小技巧 本篇我们通过绘制一个非常简单的UserControl控件,来分享一下对Adaptive UI的理解及一些图形绘制的技巧. 现在流行的APP都少不了精致的用户头像,首先假设我们需要绘制如下的图形作为默认头像: <UserControl x:Class="AdaptiveUserControl.Circle0" xmlns="http://schemas.microsoft.com/w

UWP开发入门(六)——对多设备不同分辨率显示效果的讨论

原文:UWP开发入门(六)--对多设备不同分辨率显示效果的讨论 本篇不涉及具体代码,而是把实际开发UWP APP的过程中,遇到的不同设备,不同分辨率显示效果差异的问题进行讨论.希望能够抛砖引玉,和各位擦出一些火花. 蜀黍我目前是在做一套牛逼的UWP APP啦,目标是能跑在各种尺寸不同,分辨率不同的PC,Phone和Tablet上.无论是从代码的复杂度还是实现的难度来说,都只希望维护一套代码. 在项目的初始阶段,美工MM对Tablet和Phone各设计了一套界面,在对UWP的Adaptive UI

UWP开发入门(十九)——10分钟学会在VS2015中使用Git

原文:UWP开发入门(十九)--10分钟学会在VS2015中使用Git 写程序必然需要版本控制,哪怕是个人项目也是必须的.我们在开发UWP APP的时候,VS2015默认提供了对微软TFS和Git的支持.考虑到现在Git很火,作为微软系的程序员也不得不学一点防身,以免被开源世界的家伙们嘲笑.蜀黍我Git也是菜鸟一只(还请老司机多多指点),只会用VS2015和SourceTree这样的GUI工具点一点按钮,但是我相信用惯了SVN和TFS的童鞋们,需要一点勇气去学习一些新东西,特别是Git已经形成潮

UWP开发入门(四)——自定义CommandBar

原文:UWP开发入门(四)--自定义CommandBar 各位好,再次回到UWP开发入门系列,刚回归可能有些不适应,所以今天我们讲个简单的,自定义CommandBar,说通俗点就是自定义类似AppBarButton的东西,然后扔到CommandBar中使用. 话说为了在公司次世代平台级战略层产品上实现与水果和机器人一致的用户体验,美工把Win10 APP的AppBar也画成左右分开的了,好看是好看了,问题原生的ComandBar控件不支持这么排列啊--头疼归头疼,只能再次展开山寨之路-- 初步思

UWP开发入门(十五)——在FlipView中通过手势操作图片

原文:UWP开发入门(十五)--在FlipView中通过手势操作图片 本篇的最终目的,是模拟系统的照片APP可以左右滑动,缩放图片的操作.在实现的过程中,我们会逐步分析UWP编写UI的一些思路和技巧. 首先我们先实现一个横向的可以浏览图片的功能,也是大部分APP中的实现.最简单的方式是使用FlipView,再将FlipView的ItemTemplate设置成Image.大体代码如下: <FlipView ItemsSource="{Binding Photos,Mode=OneTime}&

UWP开发入门(五)——自定义Panel

原文:UWP开发入门(五)--自定义Panel 各位好,终于讲到自定义Panel了.当系统自带的几个Panel比如Gird,StackPanel,RelativePanel不能满足我们的特定要求时(其实不常见啦),自定义Panel就显得非常必要,而且因为是针对性的处理,效果也会非常好.更何况自定义Panel其实并不复杂,今天俺们就来学习一下. 记得上一篇自定义CommandBar在增加占位控件AppBarEmpty时,采用的是通过Page的SizeChanged事件中计算页面Width,减去Co