[UWP]瞭解模板化控制項(10)：原則與技巧

1. 原則推薦以符合以下原則的方式編寫模板化控制項：選擇合適的父類：選擇合適的父類可以節省大量的工作，從UWP自帶的控制項中選擇父類是最安全的做法，通常的選擇是Control、ContentControl、ItemsControl，也可以選擇從RangeBase、Selector中。代碼和UI分 ...

1. 原則

推薦以符合以下原則的方式編寫模板化控制項：

選擇合適的父類：選擇合適的父類可以節省大量的工作，從UWP自帶的控制項中選擇父類是最安全的做法，通常的選擇是Control、ContentControl、ItemsControl，也可以選擇從RangeBase、Selector中。
代碼和UI分離：通常控制項的開發者不能控制最終用戶怎麼重寫ControlTemplate，儘量做到代碼和UI分離可以避免更多的異常。而且先寫完所有代碼，再用Blend實現UI，會比在代碼和UI間交錯地工作更高效。
使用依賴屬性：控制項的使用者會認為所有控制項的屬性都是可以綁定的，除非有特殊理由不要破壞這個約定俗成的規則。
不要實施嚴格的模版約定：模版約定指TemplatePart和TemplateVisualState，應該儘可能減少約定，在沒有遵循模版約定的任何一項時也不應該引發異常，要允許ControlTemplate的開發者可以通過刪除某項TemplatePart或VisualState來屏蔽某項功能。

2. 命名模式

一個控制項是否好用，很大一部分取決於名稱。好的命名能讓使用者用起來更得心應手，壞的命名只會讓代碼更混淆。下麵總結了UWP控制項命名的一般模式：

根據控制項實際功能命名，譬如Button。
以父類型的名字作為尾碼，如RepeatButton。
使用常用的尾碼，如-Control、-Box、-Item、-View、-Viewer、-Bar。
如果控制項如現有控制項功能相同，可以考慮使用Extend-、Advanced-、Simple-做首碼；也可以使用公司名做首碼，譬如ComponentOne公司的C1DataGrid。
可以使用-ex做尾碼，但容易和擴展方法類混淆。
ItemsControl派生類的子元素控制項要使用父元素名稱做首碼、-Item做尾碼，譬如ComboBox的子元素ComboBoxItem。
如果控制項時打開一個Popup，並通過滑鼠在Popup中選取內容，可以使用-picker做尾碼。
儘量不要用-Panel做尾碼，通常只有繼承Panel的才會用這種方式命名，如StackPanel。但也有ControlPanel這種例外。

3. 小技巧

對於複雜的控制項或控制項庫項目，以下技巧可能對你有幫助。

3.1 partial class

在編寫模板化控制項時，依賴屬性最大的缺點會暴露無遺：它太複雜了。一個完整的依賴屬性定義可以有20行（屬性標識符、屬性包裝器、PropertyChangedCallback等），而且其中一部分是靜態的，另外一部分不是，在類中將一個依賴屬性的所有部分放在一起，還是按靜態、非靜態的順序存放，這也可能引起爭論。

一個好的做法是使用單獨的partial 類存放所有依賴屬性，具體可參考UWPCommunityToolkit的AdaptiveGridView.Properties.cs。

3.2 合併資源字典

如果一個項目的模板化控制項太多，Generic.xaml會異常的複雜，可以將各個控制項的資源文件分開存放，再在Generic.xaml中合併它們。具體可參考UWPCommunityToolkit的做法：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/HamburgerMenu/HamburgerMenu.xaml" />
        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/RangeSelector/RangeSelector.xaml" />
        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/SlidableListItem/SlidableListItem.xaml" />
        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/ImageEx/ImageEx.xaml" />
        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/HeaderedTextBlock/HeaderedTextBlock.xaml" />
        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/RadialGauge/RadialGauge.xaml" />
        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/PullToRefreshListView/PullToRefreshListView.xaml" />
        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/RotatorTile/RotatorTile.xaml" />
        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/BladeView/BladeView.xaml" />
        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/GridSplitter/GridSplitter.xaml" />
        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/MasterDetailsView/MasterDetailsView.xaml" />
        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/ScrollHeader/ScrollHeader.xaml" />
        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/MosaicControl/MosaicControl.xaml" />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

3.3 統一管理VisualState

在控制項庫中，很多VisualState都是通用的，譬如Normal、Disabled、Selected，把它們全都寫進一個VisualStates的類中可以方便調用。SilverlightToolkit即是使用這種方式處理：VisualStates.cs。

/// <summary>
/// Names and helpers for visual states in the controls.
/// </summary>
internal static class VisualStates
{
    #region GroupCommon
    /// <summary>
    /// Common state group.
    /// </summary>
    public const string GroupCommon = "CommonStates";

    /// <summary>
    /// Normal state of the Common state group.
    /// </summary>
    public const string StateNormal = "Normal";

    /// <summary>
    /// Normal state of the Common state group.
    /// </summary>
    public const string StateReadOnly = "ReadOnly";

    /// <summary>
    /// MouseOver state of the Common state group.
    /// </summary>
    public const string StateMouseOver = "MouseOver";

    /// <summary>
    /// Pressed state of the Common state group.
    /// </summary>
    public const string StatePressed = "Pressed";

    /// <summary>
    /// Disabled state of the Common state group.
    /// </summary>
    public const string StateDisabled = "Disabled";
    #endregion GroupCommon
}

4. 結語

這個系列的主旨是講解常見的模板化控制項技術，希望瞭解這些技術後能更輕鬆地構造自己的控制項，對理解開源控制項庫的代碼也有一定的幫助。
職業生涯中看過很多程式員都不會寫模板化控制項（畢竟大部分場景使用UserControl或修改ControlTemplate就能解決），希望這個系列可以幫到想要學習模板化控制項的開發者。
雖然寫得很長，其實已經儘量精簡文字和內容了。平時我看到很長的文章，都會“保存到Pocket”，然後就再也沒讀過。汲取了這個教訓，這次的文章分成多篇，儘量每篇都控制在可以三五分鐘內看完。
這個系列的內容有很多來自於WPF/Silverlight的經驗，雖然有一些小出入，基本上可以用在WPF的自定義控制項。
創建模板化控制項通常意味著會被其它開發者使用，那麼就應該遵守Framework Design Guidelines。
如有錯漏請指出。

5. 參考

控制項模板
 Silverlight 控制項自定義
 UWPCommunityToolkit