天天看點

[UWP]了解模闆化控件(3):實作HeaderedContentControl

來看看這段XMAL:

[UWP]了解模闆化控件(3):實作HeaderedContentControl

是不是覺得它們中出了一個叛徒?這個示例中除了ListBox控件其它都自帶Header,但是ListBox沒有Header屬性,隻好用一個TextBlock模仿它的Header。這樣就帶來一個問題:隻有ListBox的Header高度和其它控件不一緻。

既然現在讨論的是自定義控件,這裡就用自定義控件的方式解決這個問題。首先想到最簡單的方法,就是自定義一個HeaderedContentControl,如名字所示,這個控件繼承自ContentControl并擁有Header屬性,用起來大概是這樣:

這樣,隻要在HeaderedContentControl的樣式中模仿其它含Header屬性的控件,就能統一Header的外觀。

WPF中本來就有這個控件,它是Expander、GroupBox、TabItem等諸多擁有Header屬性的控件的基類,十分友善好用。UWP中模仿這個控件很簡單,而且很适合用來學習自定義控件的進階知識。

比起WPF,借鑒Silverlight的HeaderedContentControl比較好,因為Silverlight的比較簡單。HeaderedContentControl隻需要在繼承ContentControl後添加兩個屬性:Header和HeaderTemplate。

在C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.14393.0\Generic\generic.xaml中找到ContentControl的樣式。

[UWP]了解模闆化控件(3):實作HeaderedContentControl

再從TextBox的Style中找到HeaderContentPresenter

[UWP]了解模闆化控件(3):實作HeaderedContentControl
提示: 随便找個有ThemeResource的XAML,譬如<code>Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"</code>,在資源名稱(ApplicationPageBackgroundThemeBrush)上按"F12",即可導航到存放ThemeResource的generic.xaml。

組合起來,HeaderedContentControl的預設樣式就完成了。

[UWP]了解模闆化控件(3):實作HeaderedContentControl

調用代碼及效果。這樣外觀就統一了。

注意: 我移除了 x:DeferLoadStrategy="Lazy"這句,這個知識點比較适合放在有關性能的主題裡讨論。

繼續閱讀