博客园客户端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呢？如下图所示，上面那个有图片（特意用红色矩形标记了一下），下面那个没图片。





我们得到两种回答：

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