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

 

原文路径:http://blog.csdn.net/wlanye/article/details/7265457

 

很多人都对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:  

 image

图1.1 没有样式的控件效果

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

image

图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”。

image

图1.3 模板结构图

image

图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:  

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

image 
图1.5 绑定样式模板后的TreeViewItem效果
原文地址:https://www.cnblogs.com/changbaishan/p/3299316.html