【WPF學習】第六十五章 創建無外觀控制項
- 2020 年 4 月 8 日
- 筆記
用戶控制項的目標是提供增補控制項模板的設計表面，提供一種定義控制項的快速方法，代價是失去了將來的靈活性。如果喜歡用戶控制項的功能，但需要修改使其可視化外觀，使用這種方法就有問題了。例如，設想希望使用相同的顏色拾取器，但希望使用不同的“皮膚”，將其更好地融合到已有的應用程式窗口中。可以通過樣式來改變用戶控制項的某些方面，但該控制項的一些部分是在內部鎖定，並硬編碼到標記中。例如，無法將預覽矩形移動到滑動條的左邊。
解決方法是創建無外觀控制項——繼承自控制項基類，但沒有設計表面的控制項。相反，這個控制項將其標記放到默認模板中，可替換默認模板而不會影響控制項邏輯。
一、修改顏色拾取器的程式碼
將顏色拾取器改成無外觀控制項並不難。第一步很容易——只需要改變類的聲明，如下所示：
public class ColorPicker:System.Windows.Controls.Control { }
在這個示例中，ColorPicker類繼承自Control類。繼承自FrameworkElement類是不合適的，因為顏色拾取器允許與用戶進行交互，而且其他高級的類不能準確地描述顏色拾取器的行為。例如，顏色拾取器不允許在內部嵌套其他內容，所以繼承自ContentControl類也是不合適的。
ColorPicker類中的程式碼與用於用戶控制項的程式碼是相同的(除了必須刪除構造函數中的InitializeComponent()方法調用)。可使用相同的方法定義依賴項屬性和路由事件。唯一的區別是需要通知WPF，將為控制項類提供新樣式。該樣式將提供新的控制項模板(如果不執行該步驟，將繼續使用在基類中定義的模板)。
為通知WPF正在提供新的樣式，需要在子彈女製程控制項類的靜態構造函數中調用OverrideMetadata()方法。需要在DefaultStyleKeyProperty屬性上調用該方法，該屬性是為自定義控制項定義默認樣式的依賴性屬性。需要的程式碼如下所示：
DefaultStyleKeyProperty.OverrideMetadata(typeof(ColorPicker), new FrameworkPropertyMetadata(typeof(ColorPicker)));
如果希望使用其他控制項類的模板，可提供不同的類型，但幾乎總是為每個自定義控制項創建特定的樣式。
二、修改顏色拾取器的標記
添加對OverrideMetadata()方法的調用後，只需要插入正確的樣式。需要將樣式放在名為generic.xaml的資源字典中，該資源字典必須放在項目文件夾的Themes子文件夾中。這樣，該樣式就會被識別為自定義控制項的默認樣式。下面列出添加generic.xaml文件的具體步驟：
（1）在Solution Explorer中右鍵類庫項目，並選擇Add|New Folder菜單項。
（2）將新建文件夾命名為Themes。
（3）右擊Themes文件夾，並選擇Add|New Item菜單項。
（4）在Add New Item對話框中選擇資源字典，輸入名稱generic.xaml，並單擊Add按鈕。
下圖顯示了Themes文件夾中的generic.xaml文件。
通常，自定義控制項庫會包含幾個控制項。為了保持它們的樣式相互獨立以便編輯，generic.xaml文件通常使用資源字典合併功能。下面是標記顯示了generic.xaml文件，該文件從ColorPicker.xaml資源字典中提取資源，該資源字典位於CustomControls控制項庫的Themes文件夾中：
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/CustomControls;component/Themes/ColorPicker.xaml"> </ResourceDictionary> </ResourceDictionary.MergedDictionaries> </ResourceDictionary>
自定義的控制項樣式必須使用TargetType特性來將自身自動關聯到顏色拾取器。下面是ColorPicker.xaml文件中標記的基本結構：
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:CustomControls"> <Style TargetType="{x:Type local:ColorPicker}"> ... </Style> </ResourceDictionary>
可使用樣式設置控制項類中的任意屬性(無論是繼承自基類的屬性還是新增屬性)。但在此，樣式最有用的任務是應用新目標，新目標定義了控制項的默認可視化外觀。
很容易就能將普通標記(如顏色拾取器使用的標記)轉換到控制項目標中。但要注意以下幾點：
- 當創建鏈接到父控制項類屬性的綁定表達式時，不能使用ElementName屬性。而需要使用RelativeSource屬性指示希望綁定到父控制項。如果單向綁定完全能夠滿足需要，通常可以使用輕量級的TemplateBinding標記表達式，而不需要使用功能完備的數據綁定。
- 不能在控制項模板中關聯事件處理程式。相反，需要為元素提供能夠識別的名稱，並在控制項構造函數中通過程式碼為他們關聯處理程式。
- 除非希望關聯事件處理程式或通過程式碼與它進行交互，否則不要在控制項模板中命名元素。當命名希望使用的元素時，使用“PART_元素名”的形式進行命名。
遵循上面幾點，可為顏色拾取器創建以下模板：
<Style TargetType="{x:Type local:ColorPicker}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:ColorPicker}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Slider Minimum="0" Maximum="255" Margin="{TemplateBinding Padding}" Value="{Binding Path=Red, RelativeSource={RelativeSource TemplatedParent}}"/> <Slider Grid.Row="1" Minimum="0" Maximum="255" Margin="{TemplateBinding Padding}" Value="{Binding Path=Green, RelativeSource={RelativeSource TemplatedParent}}"/> <Slider Grid.Row="2" Minimum="0" Maximum="255" Margin="{TemplateBinding Padding}" Value="{Binding Path=Blue, RelativeSource={RelativeSource TemplatedParent}}"/> <Rectangle Grid.Column="1" Grid.RowSpan="3" Margin="{TemplateBinding Padding}" Width="50" Stroke="Black" StrokeThickness="1"> <Rectangle.Fill> <SolidColorBrush Color="{Binding Path=Color,RelativeSource={RelativeSource TemplatedParent}}"></SolidColorBrush> </Rectangle.Fill> </Rectangle> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
正如上面看到的，本例已用TemplateBinding擴展提到一些綁定表達式。其他一些綁定表達式仍使用Binding擴展，但將RelativeSource設置為指向模板的父元素(自定義控制項)。儘管TemplateBinding和將RelativeSource屬性設置為TemplatedParent值得Binding的作用相同——從自定義控制項的屬性中提取數據——但是使用量級更輕的TemplateBinding總是合適的。如果需要雙向綁定(與滑動條一樣)或綁定到繼承自Freezable的類(如SolidColorBrush類)的屬性，TemplateBinding就不能工作了。
三、精簡控制項模板
通過上面設計，顏色拾取器控制項模板填充了需要的全部內容，可按與使用顏色拾取器相同的方式來使用。然而，仍可通過移除一些細節來簡化模板。
現在，所有希望提供自定義模板的控制項使用這必須添加大量的綁定表達式，已確保控制項能夠繼續工作。這並不難，但是很繁瑣。另一種選擇是，在控制項自身的初始化程式碼中配置所有綁定表達式。這樣，模板就不需要指定這些細節了。
1、添加部件名稱
為了讓這一系統能夠工作，程式碼要能找到所需的元素。WPF控制項通過名稱定為它們需要的元素。所以，元素的名稱變成自定義控制項公有介面的一部分，而且需要恰當的描述性名稱。根據約定，這些名稱以PART_開頭，後跟元素名稱。元素名稱的首字母要大寫，就像數學名稱。對於需要的元素名稱，PART_RedSlider是合適的選擇，而PART_sldRed、PART_redSlider以及RedSlider等名稱都不合適。
例如，下面的標記演示了如何通過刪除三個滾動條的Value數學的綁定表達式，並為三個滑動條添加PART_名稱，從而為通過程式碼設置綁定做好準備。
<Slider Name="PART_RedSlider" Minimum="0" Maximum="255" Margin="{TemplateBinding Padding}" /> <Slider Name="PART_GreemSlider" Grid.Row="1" Minimum="0" Maximum="255" Margin="{TemplateBinding Padding}" /> <Slider Name="PART_BlueSlider" Grid.Row="2" Minimum="0" Maximum="255" Margin="{TemplateBinding Padding}" />
注意，Margin數學仍使用綁定表達式添加內邊距，但這是一個可選的細節，可以很容易地從自定義模板中去掉該細節(可選擇硬編碼內邊距或者使用不同的布局)，
為確保獲得更大的靈活性，這是沒有為Rectangle元素提供名稱，而是為其內部的SolidColorBrush指定了名稱。這樣，可根據模板為顏色預覽功能使用任何形狀或任意元素。
<Rectangle Grid.Column="1" Grid.RowSpan="3" Margin="{TemplateBinding Padding}" Width="50" Stroke="Black" StrokeThickness="1"> <Rectangle.Fill> <SolidColorBrush x:Name="PART_PreviewBrush"></SolidColorBrush> </Rectangle.Fill> </Rectangle>
2、操作模板部件
在初始化控制項後，可連接綁定表達式，但有一種更好的方法。WPF有一個專用的OnApplyTemplate()方法，如果需要在模板中查找元素並關聯事件處理程式或添加數據綁定表達式，應重寫該方法。在該方法中，可以通過GetTemplateChild()方法查找所需的元素。
如果沒有找到希望處理的元素，推薦的模式就不起作用。也可添加程式碼來檢索該元素，如果元素存在，在檢查類型是否正確；如果類型不正確，就引發異常。
下面的程式碼演示了OnApplyTemplate()方法使用：
public override void OnApplyTemplate() { base.OnApplyTemplate(); RangeBase slider = GetTemplateChild("PART_RedSlider") as RangeBase; if (slider != null) { Binding binding = new Binding("Red"); binding.Source = this; binding.Mode = BindingMode.TwoWay; slider.SetBinding(RangeBase.ValueProperty, binding); } slider = GetTemplateChild("PART_GreenSlider") as RangeBase; if (slider != null) { Binding binding = new Binding("Green"); binding.Source = this; binding.Mode = BindingMode.TwoWay; slider.SetBinding(RangeBase.ValueProperty, binding); } slider = GetTemplateChild("PART_BlueSlider") as RangeBase; if (slider != null) { Binding binding = new Binding("Blue"); binding.Source = this; binding.Mode = BindingMode.TwoWay; slider.SetBinding(RangeBase.ValueProperty, binding); } SolidColorBrush brush = GetTemplateChild("PART_PreviewBrush") as SolidColorBrush; if (brush != null) { Binding binding = new Binding("Color"); binding.Source = brush; binding.Mode = BindingMode.OneWayToSource; this.SetBinding(ColorPicker.ColorProperty, binding); } }
注意，上面程式碼使用的是System.Windows.Controls.Primitives.RangeBase類(Slider類繼承自該類)而不是Slider類。因為RangeBase類提供了需要的最小功能——在本例中是中Value屬性。通過儘可能提高程式碼的通用性，控制項使用者可獲得更大自由。例如，現在可提供自定義模板，使用不同的派生自RangeBase類的控制項代替顏色滑動條。
綁定SolidColorBrush畫刷的程式碼稍有區別，因為SolidColorBrush畫刷美譽包含SetBinding()方法（該方法是在FrameworkElement類中定義的）。一個比較容易得變通方法是為ColorPicker.Color屬性創建綁定表達式，使用指向源方向的單向綁定。這樣，當顏色拾取器的顏色改變後，將自動更新畫刷。
為查看這種設計變化的優點，需要創建一個使用顏色拾取器的控制項，並提供一個新的控制項模板。
3、記錄模板部件
對於上面的示例，還有最後一處應予改進。良好的設計指導原則建議為控制項聲明添加TemplatePart特性，以記錄在控制項模板中使用了哪些部件名稱，以及為每個部件使用了什麼類型的控制項。從技術角度看，這一步不是必須的，但該文檔可為其他使用自定義類的用戶提供幫助。
下面是應當為ColorPicker控制項類添加的TemplatePart特性：
[TemplatePart(Name = "PART_RedSlider", Type = typeof(RangeBase))] [TemplatePart(Name = "PART_BlueSlider", Type = typeof(RangeBase))] [TemplatePart(Name = "PART_GreenSlider", Type = typeof(RangeBase))] [TemplatePart(Name = "PART_PreviewBrush", Type = typeof(SolidColorBrush))] public class ColorPicker:System.Windows.Controls.Control { }
本實例源碼：CustomControlsV2.0.zip
