博客园客户端UAP开发随笔--自定义控件的左膀右臂

前言

我们上一次说到了App的精灵:自定义控件。这一次,我们接着这一话题,说说自定义控件的两个得力助手:

  • 选择器 - TemplateSelector
  • 转换器 – Converter

这两个东西能帮助自定义控件更为简单方便地被使用,所以必须掌握。

数值转换器 Converter

这个大家可能不陌生,因为在MSDN里,介绍到Data Binding时,总会顺带着介绍一下数据转换,比如这个网页:

http://msdn.microsoft.com/library/windows/apps/xaml/hh464965.aspx/

最后的那个StringFormatter就是。

在博客园UAP中,我们使用了好几个Converter,每个Converter实际上是一段cs类,派生自IValueConverter接口。它们都放在CNBlogs.Shared项目的ControlHelper目录中。我们用其中的两个做例子来说明一下。

Bool/Visibility的转换

我们看这段代码:

public class BoolToVisibilityConverter : IValueConverter

{

        public object Convert(object value, Type targetType, object parameter, string language)

        {

            return (bool)value ? Visibility.Visible : Visibility.Collapsed;

        }



        public object ConvertBack(object value, Type targetType, object parameter, string language)

        {

            throw new NotImplementedException();

        }

}

功能很直接,就是把bool值转换成Visibility的枚举值,然后绑定到一个控件的某个元素上,比如,在XAML里:

<Style TargetType="local:FavoriteAuthorControl">

        <Setter Property="Template">

            <Setter.Value>
……
                            <TextBlock Grid.Column="0" Text="" FontFamily="Segoe UI Symbol" Foreground="Red" Visibility="{Binding Converter={StaticResource BoolToVisiblityConverter}, Path=HasNew}"/>
……

            </Setter.Value>

        </Setter>

</Style>

上面这段XAML是一个自定义控件的style描述,控件本身是“收藏”页中的“关注的博主”控件,其目的是:当HasNew字段值是true时,在博主的头像左侧显示一个红色的小星星,表示该博主有新的博客发表了,你如果关注了该博主,可以点进去看他的新博客。当HasNew是false时,不显示小星星,你就不需要进去看一圈,发现没有新博客然后失望地离开了。

有的人也许会说:我在FavoriteAuthorControl.cs的code里,直接取HasNew值,看其是true还是false,然后直接用code写Visibility = Visiable or Collapsed即可。

这样做当然也可以啦,但是有几个不方便的地方:

1)你需要写code

2)读你的程序的人,如果没读到你的code,就不知道这个逻辑

3)你需要命名那个TextBlock (x:Name=…)然后在code里用GetChildTemplate(“…")来得到这个控件,再指定其Visibility值。

4)在其它控件中,你依然还要写code做类似的事

而用我们推荐的方法,其好处显而易见:

1)在XAML中绑定即可,no code

2)这个转换器可以重用

3)无需更多定义,在binding阶段一次性解决(这也是WPF的优点之一),性能无需考虑

4)可读性极好

bool/string转换器

再举一个例子巩固一下,上code:

class NightModeLabelConverter : IValueConverter

{

        public object Convert(object value, Type targetType, object parameter, string language)

        {

            bool bValue = (bool)value;

            if (bValue)

            {

                return "日间模式";

            }

            else

            {

                return "夜间模式";

            }

        }



        public object ConvertBack(object value, Type targetType, object parameter, string culture)

        {

            throw new NotImplementedException();

        }

}

在XAML中这样使用:

<AppBarButton x:Name=”btn_Mode”Label=”{Binding Converter={StaticResource NightModeLabelConverter}, Path=Settings.NightMode”/>

这个绑定过程会先检查Setting中NightMode的值,如果是True,会在按钮下方显示“日间模式”;如果是false,会显示“夜间模式”。

模板选择器 TemplateSelector

模板选择器很少有人用到,因为介绍它的文档很少,到目前为止我们没发现,也是一个偶然的机会知道有这么个东西的,很好用!记得有几次面试,我们都问到了这个问题:如果一条新闻有图片,另一条新闻没图片,你准备如何显示这两个Control呢?如下图所示,上面那个有图片(特意用红色矩形标记了一下),下面那个没图片。

image

我们得到两种回答:

1)做成一个通用的Control,然后根据有无图片的URL自动显示右侧的图片

2)用code在自定义空间里控制右侧图片是否显示

当然可以!这些都能实现这个目的。但要注意图片左侧还有一条灰色竖线哟。

我们今天推荐一个更为标准通用的方法:TemplateSelector。

先上code:

namespace CNBlogs.ControlHelper

{

    class NewsControlTemplateSelector : DataTemplateSelector

    {

        public DataTemplate dtHasImage { get; set; }

        public DataTemplate dtNoImage { get; set; }



        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)

        {

            CNBlogs.DataHelper.DataModel.News news = item as CNBlogs.DataHelper.DataModel.News;

            if (string.IsNullOrEmpty(news.TopicIcon))

            {

                return dtNoImage;

            }

            return dtHasImage;

        }

    }

}

在Shared project中,ControlHelper目录下,有个NewsControlTemplateSelector.cs。它从DataTemplaterSelector父类派生出来,先定义了两个DataTemplate: dtHasImage和dtNoImage,分别对应有无图片的两种情况。然后在SelectTemplateCore重写方法中,先获得news实例,判断TopicIcon是否存在,如果存在,返回dtHasImage;否则返回dtNoImage。

在MainPage.xaml中,这样使用:

<Page.Resources>

......

        <DataTemplate x:Key="NewsNoImageTemplate">

            <local:NewsTitleTextControl/>

        </DataTemplate>



        <DataTemplate x:Key="NewsHasImageTemplate">

            <local:NewsTitleTextImageControl/>

        </DataTemplate>

......

</Page.Resources>

首先在Page.Resource中定义两个Template,给出两个不一样的Key值,一个叫做“NewsNoImageTemplate”,另一个叫做“NewsHasImageTemplate”,分别对应两个自定义control:NewsTitleTextControl和NewsTitleTextImageControl (在Theme\Generic.xaml中定义的,一个只有标题文本,另一个有标题文本和右侧图片)。

然后在News PivotItem的ListView中这样写:

<PivotItem Margin="0" Tag="news">

......

                <ListView.ItemTemplateSelector>

                    <ControlHelper:NewsControlTemplateSelector

                        dtHasImage="{StaticResource NewsHasImageTemplate}"

                        dtNoImage="{StaticResource NewsNoImageTemplate}"/>

                </ListView.ItemTemplateSelector>

        </ListView>

</PivotItem>

ListView.ItemTemplateSelector用于定义当前的新闻用什么样的模板来显示。注意下面的语法:

1)ControlHelper:NewsControlTemplateSelector对应第一段cs代码的类名

2)dtHasImage/dtNoImage对应cs代码中的两个返回值

3)StaticResource NewsHasImageTemplate对应Page.Resources中的x:Key=”NewsHasImageTemplate”,间接对应到了有图片的自定义控件模板。

即:控件<—>资源文件<—>选择器。这三者的关系容易搞混,尤其是名字,特别容易起错,以至于最后自己都不记得什么对应什么。建议是控件用Control做结尾,如NewTitleTextControl;资源文件的Key用Template做结尾,如NewsNoImageTemplate;选择器用dt做开始,如dtNoImage。这样的话,如果有图片,Selector就会返回dtHasImage,对应到了本页资源中的StaticResource NewHasImageTemplate,从而使用NewsTitleTextImage自定义控件来显示该条新闻。

小结

好了,掌握了第一个转换器,我们不用再每个control里都写code了,直接在XAML中绑定即可。掌握了第二个选择器,我们可以充分分解页面逻辑,把它们颗粒化到一个合理的程度,不需要再考虑如何用一个控件显示两种或多种样式。

但是要注意,在以前的“App精灵”随笔中,提到的PostControl控件,有时要显示作者头像,有时要显示“朕已阅”等等,如果你要做成5个Control,再用TemplateSelector来选择就是不对的了。基本原则是:在一个ListView中,如果有两种以上的样式选择,用TemplateSelector;在两个页面中,用TemplateBinding外部配置来指定要不要显示某个元素,比如AuthorAvatar.Visibility = {TemplateBinding ShowAvatar},使用它时在两个页面中分别直接指定Visable或Collapsed即可,从而允许使用一个控件搞定5种情况。

在Windows Phone 8.1和Windows 8.1中,一点儿区别都没有,所以我们把这些cs都放在了shared project中,以便能够在两个项目中共享。

 

分享代码,改变世界!

 

Windows Phone Store App link:

http://www.windowsphone.com/zh-cn/store/app/博客园-uap/500f08f0-5be8-4723-aff9-a397beee52fc

Windows Store App link:

http://apps.microsoft.com/windows/zh-cn/app/c76b99a0-9abd-4a4e-86f0-b29bfcc51059

GitHub open source link:

https://github.com/MS-UAP/cnblogs-UAP

MSDN Sample Code:

https://code.msdn.microsoft.com/CNBlogs-Client-Universal-477943ab

 

MS-UAP

2015/1/5

你可能感兴趣的:(自定义控件)