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

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