Silverlight自定义控件系列 – TreeView (4) 缩进

 

接下来是缩进，没有缩进的Tree怎么看都不顺眼。

首先，定义节点深度Depth(注：回叫方法暂没有代码，以后要用到)：

 1: /// <summary> 

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

 3: /// </summary> 

 4: public static readonly DependencyProperty DepthProperty =

 5:  DependencyProperty.Register("Depth", typeof(int), typeof(FancyTreeViewItem),

 6:  new PropertyMetadata(0, new PropertyChangedCallback(FancyTreeViewItem.OnDepthPropertyChanged))

 7: );

 8: 

 1: /// <summary> 

 2: /// Gets or sets the node depth level in tree 

 3: /// </summary> 

 4: public int Depth

 5: {

 6:  get { return (int)GetValue(DepthProperty); }

 7:  set { SetValue(DepthProperty, value); }

 8: }

 9:  

 1: /// <summary> 

 2: /// Call back when Depth 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 OnDepthPropertyChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)

 7: {

 8:  

 9: }

 10:  

接下来就是写出计算节点在树中深度值的方法：

 1: /// <summary> 

 2: /// For getting the item depth level 

 3: /// </summary> 

 4: /// <returns>The result depth level</returns> 

 5: private int GetDepthLevel()

 6: {

 7:  int depthLevel = 0;

 8:  FrameworkElement element = this;

 9:  

 10:  while (element.Parent != null)

 11: {

 12:  var parent = element.Parent as FancyTreeViewItem;

 13:  

 14:  if (parent != null)

 15: {

 16: depthLevel++;

 17:  ////depthLevel = parent.GetDepthLevel() + 1; 

 18: }

 19:  

 20: element = element.Parent as FrameworkElement;

 21: }

 22:  

 23:  return depthLevel;

 24: }

 25:  

绑定样式的时候把缩进量放进去，在public override void OnApplyTemplate()中添加：

 1: if (this.Indent != null)

 2: {

 3:  this.Indent.Width = this.GetDepthLevel() * 20;

 4: }

 5:  

最后把Boder的边框颜色去掉，运行看效果：

图4.1 带缩进的效果图