Silverlight自定义控件系列 – TreeView (1)

 

很多人都对MS自带的控件不太满意(虽然MS走的是简约风格)，都会试图去修改或创建让自己满意的控件，当然我也不例外。

同时， 这个系列只是为了记录我学习Silverlight的过程。

 

新建一个Class，命名为FancyTreeView，让它继承自ItemsControl，并实现构造函数如下：

 

 1: public FancyTreeView()

 2: {

 3:  this.DefaultStyleKey = typeof(FancyTreeView);

 4: }

 5:  

this.DefaultStyleKey = typeof(FancyTreeView); 这一句的作用是让控件跟样式对应上，如果没有，那么无论你再怎么修改样式，效果都是一片空白。

TreeView的工作暂时到此结束，因为今天的重点不在于TreeView，而是它的子控件TreeViewItem。 

新建一个Class，命名为FancyTreeViewItem，让它继承自HeaderedItemsControl，同样的实现构造函数: 

 1: /// <summary> 

 2: /// Initializes a new instance of the FancyTreeViewItem class 

 3: /// </summary> 

 4: public FancyTreeViewItem()

 5: {

 6:  this.DefaultStyleKey = typeof(FancyTreeViewItem);

 7: }

 8:  

这时候把控件拖到页面上，效果一片空白，当然，因为还没有设定样式。

控件在页面上:

 1: <Grid x:Name="LayoutRoot" Background="White"> 

 2: <my:FancyTreeView Height="235" HorizontalAlignment="Left" Margin="74,22,0,0" Name="fancyTreeView1" VerticalAlignment="Top" Width="165"> 

 3: <my:FancyTreeViewItem Header="1"/> 

 4: </my:FancyTreeView> 

 5: </Grid> 

 6:  

 

图1.1 没有样式的控件效果

现在给控件添加样式。添加文件夹，命名为Themes，新建Silverlight Resource Dictionary，命名为FancyTreeViewItemStyle。同时，为了让控件邦定样式，必须新建Generic.xaml(大小写无关)，并把刚才的资源文件作为资源嵌入引用。把这两个文件放到Themes里面

图1.2 新建资源文件作为样式模板存放文件

Generic.xaml引用资源文件:

 1: <ResourceDictionary 

 2:  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

 3:  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 

 4: <ResourceDictionary.MergedDictionaries> 

 5: <ResourceDictionary Source="/MySilverlightControls;component/Themes/FancyTreeViewItemStyle.xaml"/> 

 6: </ResourceDictionary.MergedDictionaries> 

 7: </ResourceDictionary> 

 8:  

注意，此文件必须以”/命名空间；component/文件路径”格式来写，路径为文件在工程中的位置。这样，只要编辑FancyTreeViewItemStyle.xaml文件就可以变更控件的外观。

接着先把TreeViewItem的Header显示出来(这里我用Blend 4来做样式)。在ControlTemplate上添加一个Grid名为Root，在Grid里面放一个ContentPresenter名为Header，用来显示TreeViewItem的Header，点击Content属性右边的小正方形，出来菜单后选择Template Binding->Header。把Style的Template属性设定为”FancyTreeViewItemDefaultTemplate”。

图1.3 模板结构图

图1.4 设置Header的Content属性

FancyTreeViewItemStyle.xaml:

 1: <ResourceDictionary 

 2:  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  

 3:  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

 4:  xmlns:FancyControls="clr-namespace:MySilverlightControls;assembly=MySilverlightControls" 

 5: > 

 6:  <!-- FancyTreeViewItemDefaultTemplate --> 

 7:  <ControlTemplate TargetType="FancyControls:FancyTreeViewItem" x:Key="FancyTreeViewItemDefaultTemplate"> 

 8: <Grid x:Name="Root"> 

 9: <ContentPresenter x:Name="Header" Content="{TemplateBinding Header}"/> 

 10: </Grid> 

 11:   

 12: </ControlTemplate> 

 13:   

 14:  <!-- FancyTreeViewItem --> 

 15:  <Style TargetType="FancyControls:FancyTreeViewItem"> 

 16: <Setter Property="Template" Value="{StaticResource FancyTreeViewItemDefaultTemplate}"/> 

 17: </Style> 

 18: </ResourceDictionary> 

 19:  

再来看下刚才的效果是否有变化：

图1.5 绑定样式模板后的TreeViewItem效果