我们上一次说到了App的精灵:自定义控件。这一次,我们接着这一话题,说说自定义控件的两个得力助手:
这两个东西能帮助自定义控件更为简单方便地被使用,所以必须掌握。
这个大家可能不陌生,因为在MSDN里,介绍到Data Binding时,总会顺带着介绍一下数据转换,比如这个网页:
http://msdn.microsoft.com/library/windows/apps/xaml/hh464965.aspx/
最后的那个StringFormatter就是。
在博客园UAP中,我们使用了好几个Converter,每个Converter实际上是一段cs类,派生自IValueConverter接口。它们都放在CNBlogs.Shared项目的ControlHelper目录中。我们用其中的两个做例子来说明一下。
我们看这段代码:
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)可读性极好
再举一个例子巩固一下,上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,会显示“夜间模式”。
模板选择器很少有人用到,因为介绍它的文档很少,到目前为止我们没发现,也是一个偶然的机会知道有这么个东西的,很好用!记得有几次面试,我们都问到了这个问题:如果一条新闻有图片,另一条新闻没图片,你准备如何显示这两个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