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 带缩进的效果图

巴特西