Silverlight自定义控件系列 – TreeView (2) 基本布局和States

概述  TreeView的树形结构都以缩进方式显示，现在来完成这部分。 首先，要定义出每个节点上都包含什么东西。先看看Win7资源管理器的TreeView： 图2.1 资源管理器 一个通用的TreeView至少有缩进，箭头，Header。但是我们常常会用到勾选功能，也会用到图标来达到更高的友好度，因此这里暂时先按一下的格局来定义： 缩进 箭头 选择框 图标 显示文字        子节点 那么开始了。  

TreeVIEw的树形结构都以缩进方式显示，现在来完成这部分。

首先，要定义出每个节点上都包含什么东西。先看看Win7资源管理器的TreeVIEw：

图2.1 资源管理器

一个通用的TreeVIEw至少有缩进，箭头，header。但是我们常常会用到勾选功能，也会用到图标来达到更高的友好度，因此这里暂时先按一下的格局来定义：

缩进	箭头	选择框	图标	显示文字
子节点

那么开始了。用上次的模板，把Root分成两行，在Root的第一行中添加一个border，用来放置节点的所有物件；在第二行中添加一个ItemsPresenter，名为ItemsHost，用来表示子节点集合。

接着在border中再添加一个GrID用来布局，GrID分5列(原因看上表格)，第一列添加一个GrID名为Indention，缩进用；第二列添加一个Togglebutton名为Expander作箭头按钮(非常好用)；第三列放CheckBox；第四列放一个Image；把header拖到第五列上。这样，简单的基础布局做好了。

图2.2.1 基础布局(1)

图2.2.2 基础布局(2)

图2.3 基础布局效果图

现在我们开始实现通过点击Expander来显示和隐藏子节点。首先增加展开和收起的模板状态：

 1: [TemplateVisualState(name = "Expanded",Groupname = "ExpandedStates")]

 2: [TemplateVisualState(name = "Collapsed",Groupname = "ExpandedStates")]

 3: public class FancyTreeVIEwItem : headeredItemsControl 

 4:  

编译之后，在Blend 4的States界面上会看到：

图2.4 States中的新状态

现在我们在Base下把ItemsHost的Visibility设为Collapsed，然后点选Expanded，当左边圆点变红后，把ItemsHost的Visibility设为Visible。

图2.5 录制不同的States

States已经录制好了，但是现在点击Expander还不能转到相应的State，所以要添加一个状态变量用来记录目前是被展开还是收起状态，当状态改变的时候转到相应的State。

记录状态的IsExpanded以及回叫方法OnIsExpandedPropertyChanged：

 1: /// <summary> 

 2: /// Using a DependencyProperty as the backing store for IsExpanded. This enables animation,styling,binding,etc... 

 3: /// </summary> 

 4: public static Readonly DependencyProperty IsExpandedProperty =

 5:  DependencyProperty.Register("IsExpanded",typeof(bool),typeof(FancyTreeVIEwItem),

 6:  new PropertyMetadata(false,new PropertyChangedCallback(FancyTreeVIEwItem.OnIsExpandedPropertyChanged))

 7: );

 8:  

 

 1: /// <summary> 

 2: /// Call back when IsExpanded property has been changed 

 3: /// </summary> 

 4: /// <param name="o">The target object</param> 

 5: /// <param name="e">The property changed event arrguments</param> 

 6: private static voID OnIsExpandedPropertyChanged(DependencyObject o,DependencyPropertyChangedEventArgs e)

 7: {

 8:  

 9: }

 10:  

 

 1: #region PropertIEs

 2:  

 3: /// <summary> 

 4: /// Gets or sets a value indicating whether the items have been expanded 

 5: /// </summary> 

 6: public bool IsExpanded

 7: {

 8:  get { return (bool)GetValue(IsExpandedProperty); }

 9:  set { SetValue(IsExpandedProperty,value); }

 10: }

 11:  

 12: #endregion 

 13:  

转向状态的方法和事件的触发：

 1: /// <summary> 

 2: /// To raise the event handler 

 3: /// </summary> 

 4: /// <param name="handler">The target event handler</param> 

 5: /// <param name="e">The routed event arrguments</param> 

 6: private voID RaiseEvent(RoutedEventHandler handler,RoutedEventArgs e)

 7: {

 8:  if (handler != null)

 9: {

 10: handler(this,e);

 11: }

 12: }

 13:  

 14: /// <summary> 

 15: /// To update the control's visual state 

 16: /// </summary> 

 17: /// <param name="userTransitions">The flag that whether allow to update</param> 

 18: internal virtual voID UpdateVisualState(bool userTransitions)

 19: {

 20:  if (this.IsExpanded)

 21: {

 22:  visualstatemanager.GoToState(this,"Expanded",userTransitions);

 23: }

 24:  else 

 25:  {

 26:  visualstatemanager.GoToState(this,"Collapsed",userTransitions);

 27: }

 28: }

 29:  

分享

分享到新浪Qing

0

顶

总结

以上是内存溢出为你收集整理的Silverlight自定义控件系列 – TreeView (2) 基本布局和States全部内容，希望文章能够帮你解决Silverlight自定义控件系列 – TreeView (2) 基本布局和States所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。