博客园客户端(Universal App)开发随笔 -- App的精灵：自定义控件

前言

拿到一个App的需求后，对于前端工程师来说，第一步要干什么？做Navigation规划！第二步要干什么？做页面分解！页面分解如何做？首先要确定UI Element的容器，其次要抽象UI Element本身，也就是要做一堆自定义控件，最终组成整个页面。今天我们就说说自定义控件如何实现吧。

感性认识

在我们的博客园UAP的Windows Phone的版本中，一个最重要的自定义控件就是PostControl，它的样子如下图中红色矩形内所示。

这个控件在无数页面中都要用到，而且有几种变种。上面看到的是在主页/热门/精华中所展示的样子，是界面元素最全的，包括标题，作者，发布时间，阅读状态（朕已阅），摘要，属性（最下方的三组数字），还有最下方的横线（可不要忽视它哟，它是整体页面设计的重要组成部分）。

第二个变种，是在博客列表中，如下图所示。细心的人可以发现这个变种中没有显示作者，因为这是在博主页面，上下文中有MS-UAP的作者名称了，所以没必要再显示了，否则会显得很自恋。

第三个变种，在分类博客列表里面，最下方的属性没有显示。由于服务器端返回的数据中，推荐/阅读/评论次数都是0，所以弄3个0在那里感觉很傻，所以可以不显示了，这样会觉得自己智商有所提升。

第四个变种，是在所有列表中都有，就是不显示阅读状态（标题下面的“朕已阅”没有），表示这是一篇新博客，你还没有来得及看。

第五个变种，是不显示摘要和属性，如下图所示。因为这篇博客你已经读过了（朕已阅），没必要再把摘要显示出来占据有限的屏幕空间了，留着地方显示那些没读过的博客。老话儿说，吃肉别吧唧嘴，让人家没吃到肉的人听着难受，显示咱们有教养。

当然，你如果想看摘要的话，点击一下标题，摘要就自动优雅地展开了（有个小动画）；如果想看正文，就点击一下摘要部分，进入到阅读页面。

以上这些变种的逻辑，包括动画，都是在自定义控件中来实现的，很强大吧？下面让我看看如何实现它吧。

两种自定义控件的选择

WinRT SDK有两种用户自定义控件的实现方式，一种是User Control, 另一种是 Template Control。在WPF/ASP.NET/WindowsForm中都有这两个概念，只不过后者可能叫做Custom Control。总之这是一个很古老的概念了。

如何选择这两种控件呢？说实话，不知道！但是我们强烈建议你使用Template Control, 因为我们还没发现它有什么缺点，但是发现User Control有缺点。

在Visual Studio 2013中，在你的Project上点击鼠标右键，Add New Item：

注意几个选择点，下面写PostControl.cs, 就可以轻轻点击Add按钮了。请不要猛击该按钮，注意咱们开发人员的素质。

如果一切正常的话，你的项目文件中会出现下面两个东西：

上面那个是PostControl.cs, 我后来把它移到Controls folder下面的，为了好管理。下面那个是Themes/Generic.xaml, 是系统帮你生成好的，别动它的位置，否则后果自负。这里有个bug，如果你是第二次添加自定义控件，很有可能出现了.cs文件后，在Generic.xaml中没有新控件的style。此时你可以用仇恨的笔写一封email发给有关部门控诉这个bug，然后乖乖的在Generic.xaml中自己添加。添加什么东西呢？后面会说到。

Generic.xaml

首先我们看这个文件中的模样，一堆xaml语法而已：

<Style TargetType="local:PostControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:PostControl">
                    <Border>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

最开始时是上面那个样子，空白的模板，你要把它写成你自己想要的样子。此时你的头脑中要有PostControl控件的具体样式，因为这个编辑器不能所见即所得。我最后把他改成了以下样子：

<Style TargetType="local:PostControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:PostControl">
                    <Border BorderThickness="0,0,0,1" BorderBrush="{ThemeResource CNBlogsLineColor}">
                        <Grid Margin="15">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock x:Name="tb_Title" Grid.Row="0" Text="{Binding Title}" Style="{StaticResource PostTitleFont}"/>
                            <Grid Grid.Row="1" Margin="0,5,0,0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <local:AuthorControl Grid.Column ="0" Visibility="{TemplateBinding AuthorVisible}" NameFontSize="20" NameColor="{ThemeResource CNBlogsAttributionColor}" AvatarHeight="25" Margin="0,0,10,0" />
                                <TextBlock Grid.Column="1" Text="{Binding PublishTime, Converter={StaticResource TimeCountDownConverter}}" Style="{StaticResource PublishTimeFont}" VerticalAlignment="Center"/>
                                <TextBlock x:Name="tb_Status" Grid.Column="2" Text="{Binding Status, Converter={StaticResource PostStatusConverter}}" FontFamily="Segoe UI Symbol" FontSize="14" HorizontalAlignment="Right" VerticalAlignment="Center"/>
                            </Grid>

                            <!-- used for tapped anywhere on title and attribution -->
                            <Rectangle x:Name="rect_Header" Grid.RowSpan="2" Fill="Transparent"/>

                            <TextBlock x:Name="tb_Summary" Grid.Row="2" Margin="0,5" TextTrimming="CharacterEllipsis" MaxLines="4" FontSize="20" FontFamily="Segoe WP" Foreground="{ThemeResource CNBlogsSummaryColor}" TextWrapping="Wrap" Visibility="Collapsed">
                                <Run Text="{Binding Summary}"/>
                                <Run Text="..."/>
                                <TextBlock.Resources>
                                    <Storyboard x:Name="sb_Summary">
                                        <DoubleAnimation Storyboard.TargetName="tb_Summary" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1"/>
                                    </Storyboard>
                                </TextBlock.Resources>
                            </TextBlock>
                            <local:AttributionControl x:Name="control_Attribution" Grid.Row="3" HorizontalAlignment="Right" Visibility="{TemplateBinding AttributionVisible}" FontFamily="Global User Interface"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

最外面有个Border，它的好处是把边界设置成{0,0,0,1}就会在最下面显示分割线。如果你不想在最下面显示一条横线来分割两个博客，可以把这层border去掉。

里面是个Grid，定义了四行：第一行是标题；第二行是作者/发布时间/阅读状态。这里作者又是另一个自定义控件，所以写成了local:AuthorControl；第三行是摘要；第四行是属性，也是一个自定义控件。

说明几个***（雕）民（虫）小技：

1）控件可以套控件，比如AuthorControl和AttributionControl在PostControl里面。

2）阅读状态的HorizontalAlignment=Right，就是右侧对齐，这个必须在Grid里才有用，在StackPanel里好像做不到。也许我不够***，反正在Windows Phone上没试出来。

3）必须要知道屏幕的宽度，否则如果显示内容不够一屏宽，右对齐就不是真正的右对齐了，这个你自己试试就知道了。如何知道屏幕宽度呢？在PostControl.cs里：

public PostControl()
        {
            this.DefaultStyleKey = typeof(PostControl);
            this.DataContextChanged += PostControl_DataContextChanged;
            this.Width = CNBlogs.DataHelper.Helper.Functions.GetWindowsWidth();
        }

上面那个this.Width，就是根据屏幕宽度指定控件本身的宽度。如果你要两边留白，可以想别的办法得到该控件所属的容器的宽度，比如listview的宽度。

4）不要在最外层设置Margin，就是Border那一层，比如Margin=20. 如果设置了，你麻烦大了！别紧张，你唯一的麻烦是在调整个页面的样子时，遇到一些奇怪的空白，找了一圈才知道是控件自己内部有空白。如果想设置空白，在使用这个控件的XAML里设置，比如ListView的ItemsPanel里。

5）大家可能看到这个：<Rectangle x:Name="rect_Header" Grid.RowSpan="2" Fill="Transparent"/>。挺奇怪的，但作用很大。因为我们设计在点击上面两行（标题和作者）时隐藏或显示摘要，但是这两行并不会充满了字，肯定有很多空白。如果你纤细的手指点击到了空白处，不会触发任何内部点击事件。如果加了一层透明的Rectangle，可以点击任何位置了。

6）里面可以发现有用到TemplateBinding语法的，这个对应的属性要在PostControl.cs里注册（下面有说）。

7）写完所有style后，仔细看一遍，不要有多余的Border, Grid, StackPanel等容器。尤其是在修改了style后，这种情况很有可能发生。其坏处就是让别人觉得你的程序员素质不高啊

8）可以在style里面定义动画，就像summary里的Storyboard那样，然后在PostControl.cs里调用。

9）TextBlock是个好东东，要妥善使用。比如<Run Text/>语法，可以用来拼接字符串，还可以指定不同的字体字号字色，但不建议这样做，会毁坏的你的UI，让别人觉得你的素质不高啊（又来了）。

PostControl.cs

自定义属性

如果想从外面（使用时）控制某些内容，比如显示或不显示作者，需要自定义属性如下：

public Visibility AuthorVisible
        {
            get { return (Visibility)GetValue(AuthorVisibleProperty); }
            set { SetValue(AuthorVisibleProperty, value); }
        }

        // Using a DependencyProperty as the backing store for AuthorVisiable.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty AuthorVisibleProperty =
            DependencyProperty.Register("AuthorVisible", typeof(Visibility), typeof(PostControl), new PropertyMetadata(Visibility.Visible));

这个语法太难记住了，你可以每次copy/paste/modify，有一个简单的方式是在空白处键入propdp，然后按Tab键，会自动生成这些东东，然后再手工改一些关键的西西，就是你想要的东西了。有了这个属性后，在Style里面(Generic.xaml)，可以这样写：

<local:AuthorControl Grid.Column ="0" Visibility="{TemplateBinding AuthorVisible}" />

表明这个AuthorControl的显示与否可以在使用时控制。

然后你在使用这个PostControl的page.xaml中这样写：

<ListView x:Name="lv_AuthorPosts" Grid.Row="1" Background="{ThemeResource CNBlogsBackColor}" Loaded="lv_AuthorPosts_Loaded">
            <ListView.Header>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <local:PostControl AuthorVisible="Collapsed" Tapped="PostControl_Tapped"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

PostControl的AuthorVisible=Collapsed，于是乎作者不显示了，显示的是我们开发者的情怀（扯远了）。

事件注册

在构造函数中，可以注册你想要的事件，如：

public PostControl()
        {
            this.DefaultStyleKey = typeof(PostControl);
            this.DataContextChanged += PostControl_DataContextChanged;
            this.Width = CNBlogs.DataHelper.Helper.Functions.GetWindowsWidth();
        }

此处注册了DataContextChanged事件，并在后面要响应这个事件。

还有些事件是不需注册的，比如OnApplyTemplate(), 表现为一个方法，直接override即可。

显示控制

如果在一个ListView中显示一串博文，而且这些博文的状态可能不一样，比如有的是”朕已阅“不显示摘要，有的是要显示摘要，我们需要在OnApplyTemplate()中控制这个显示行为。

protected override void OnApplyTemplate()
        {
            this.UpdateUI(false);
        }

注意啦！这里有个问题，你实际运行就知道了，由于ListView有一些”智能“显示控制，它只会对前几个博文执行OnApplyTemplate()方法，具体几个呢？依赖于你的屏幕的高度能显示几个博文。对于后面所有的博文，都会无视这个方法，这样当你卷滚ListView至下方时，悲剧发生了，没有按照你的意思控制显示（该隐藏的摘要没有隐藏）。

怎么办？再次拿起仇恨的笔写一封控告信，然后默默地烧掉它。幸好我们注册了DataContextChanged事件，于是轻松地写下如下代码：

void PostControl_DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args)
{
        this.UpdateUI(false);
}

搞定啦！后面的博文也能按照你的逻辑显示了。具体原因不讲了，你自己领会吧。

事件响应

OnTapped事件是我们必须要用到的，处理当用户点击此控件的任何一个部分时，你要响应的逻辑。

/// <summary>
        /// if user click title, control will collapse summary, set status = Skip, next time: show title only
        /// if user click summary, goto reading page, set status = Read, next time: show title only
        /// if user click favorite in reading page, set status = Favorite, next time: show title only
        /// </summary>
        /// <param name="e"></param>
        protected override void OnTapped(TappedRoutedEventArgs e)
        {
            CNBlogs.DataHelper.DataModel.Post post = this.DataContext as CNBlogs.DataHelper.DataModel.Post;
            if (post == null)
            {
                return;
            }

            // click on the title
            if (e.OriginalSource is Windows.UI.Xaml.Shapes.Rectangle)
            {
                this.GotoReadingPage = false;
                if (this.showSummary) // show summary
                {
                    this.HideSummary();
                    this.SetNewStatus(post, DataHelper.DataModel.PostStatus.Skip);
                }
                else // hide summary
                {
                    this.ShowSummary(true);
                }
            }
            else // click on the summary
            {
                TextBlock tbSource = e.OriginalSource as TextBlock;
                if (tbSource.Name == "tb_Summary")
                {
                    // don't navigate to target page here(in control), need do that in page's viewmodel (.cs)
                    this.GotoReadingPage = true;
                    this.SetNewStatus(post, DataHelper.DataModel.PostStatus.Read);
                }
            }

            base.OnTapped(e);
        }

我把最上端的注释也保留了，for your eyes only.

这里特别强调一点，很重要：其实这个点击事件可以在三个地方响应：

1）在这里的code中响应

2）在ListView的Control中响应（PostControl_Tapped）

<ListView x:Name="lv_BestPosts" Grid.Row="1" Background="{ThemeResource CNBlogsBackColor}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <local:PostControl Tapped="PostControl_Tapped"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

3）在ListView的ItemClicked事件中响应。

有何区别呢？建议如下：

1）在PostControl.cs中响应事件时，只关注控件本身的样式变化，比如隐藏摘要，不要做别的事情，否则就会超出你的职责范围了，让上层事件无法处理。

2）在控件的PostControl_Tapped中，你可以做上层逻辑了，比如直接显示博文阅读页面。但是PostControl实例是从sender里得到的：

private void PostControl_Tapped(object sender, TappedRoutedEventArgs e)
        {
            PostControl postControl = sender as PostControl;
            if (postControl.GotoReadingPage)
            {
                Post post = postControl.DataContext as Post;
                this.Frame.Navigate(typeof(PostReadingPage), post);
            }
            else
            {

            }

3）在ListView的ItemClicked事件中（如果有的话），也同样可以做上层逻辑。记得上面那个透明的Rectangle吧，如果没有它，ItemClicked事件也会响应，但是底层那两个事件不一定会响应（如果手指头太细点在了空白处）。而且对应的类实例是从click事件中得到的，而不是sender：

private void lv_Category_ItemClick(object sender, ItemClickEventArgs e)
        {
            Category category = e.ClickedItem as Category;
            this.Frame.Navigate(typeof(SubCategoriesPage), category);
        }

如上面代码中的Category实例，是从e.ClickedItem中得到的。

小结

写累了，休息一下，我们已经完成了一个自定义控制的样式定义和逻辑定义，用几次就熟悉了。某些粗糙的App, 直接用一个TextBlock显示内容，不加任何修饰，体现不出我程序员们的素质，建议稍微讲究一些，用个template control。就拿这个PostControl来说，你尽可以把它拿去稍微修改一下，就可以适应所有阅读类的需求了。真的，不信你试试，我反正已经用这个Control做了三个App了。

在Windows 8.1上，同样的道理，可以使用自定义control。但是以博客园为例，由于UI design相差太大，无法复用样式，但可以部分复用逻辑，所以建议不要把这些control放在Shared里面，而是放在各自的Project内部。

比较Windows 8.1和Windows Phone 8.1的自定义控件，在Windows上，由于显示面积大，控件要设计得大气，别扣扣嗦嗦的，可以色彩鲜明些，显示充分些；但是在Windows Phone上，显示面积小，要讲究精巧，比如隐藏摘要这件事，很适合Windows Phone，但是不适合Windows。