【问题标题】:How to draw binary tree view using WPF?如何使用 WPF 绘制二叉树视图?
【发布时间】:2011-12-12 17:00:50
【问题描述】:

我想把它画成这样的图像:

我可以在控制台上画一棵二叉树。我想使用 WPF 绘制它。这是我为控制台编写的代码。

class Program
{
    static void Main(string[] args)
    {
        List<BinaryTreeData> myBinaryData = new List<BinaryTreeData>();
        myBinaryData.Add(new BinaryTreeData{ownID=1});
        myBinaryData.Add(new BinaryTreeData { parentID=1, ownID = 2 });
        myBinaryData.Add(new BinaryTreeData {  parentID=1,ownID = 3 });

        foreach (var item in myBinaryData)
        {
            Console.WriteLine("{0}------{1}", item.parentID, item.ownID);   
        }
    }
}

class BinaryTreeData : INotifyPropertyChanged
{
    private int _ownID;
    private int _parentID;

    public int ownID
    {
        get { return this._ownID; }
        set { this._ownID = value; this.onChange("ownID"); }
    }

    public int parentID
    {
        get { return this._parentID; }
        set { this._parentID = value;  this.onChange("parentID"); }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void onChange(string propertyName)
    {
        if (PropertyChanged!=null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
} 

我不明白我该怎么做。

【问题讨论】:

  • 我认为问题在于您的数据结构:您的结构不是树状结构。当然,您有 ID 供参考,但您没有隐式对象结构。您可以将 BinaryTreeData 更改为拥有 BinaryTreeData 的集合来引用子项吗?如果您可以通过 HierarchicalDataTemplate 将此绑定更改为树视图,则相当容易。

标签: c# .net wpf data-binding binary-tree


【解决方案1】:

每个树节点都需要有一组子节点。如果您想将其限制为二叉树,则可以将子项的集合限制为最大容量 2 个项目。

我会推荐本教程,因为它还将向您展示如何使用 MVVM 实现这一目标。

http://www.codeproject.com/KB/WPF/TreeViewWithViewModel.aspx

编辑:

由于您更新了您的帖子并且您似乎正在寻找不同的东西,我认为您最好使用 3rd 方解决方案而不是实施您自己的解决方案。

尝试查看这些解决方案 -

http://www.codeproject.com/KB/WPF/LayeredTreeDraw.aspx

http://www.codeproject.com/KB/WPF/CustomTreeViewLayout.aspx

【讨论】:

    【解决方案2】:

    所以,我根据我上面的评论重组了你的代码。 BinaryTreeData 现在有一个 SubItems 列表。 您必须调整 XAML / local:BinaryTreeData 中的命名空间,它应该可以工作.. 干杯!

    BinaryTreeData:

      public class BinaryTreeData : INotifyPropertyChanged
      {
        private int _ownID;
        private int _parentID;
    
        public int ownID
        {
          get { return this._ownID; }
          set
          {
            this._ownID = value;
            this.onChange("ownID");
          }
        }
    
        private List<BinaryTreeData> _subitems = new List<BinaryTreeData>();
    
        public List<BinaryTreeData> Subitems
        {
          get { return _subitems; }
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
    
        private void onChange(string propertyName)
        {
          if (PropertyChanged != null)
          {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
          }
        }
      }
    

    XAML:

    <TreeView x:Name="myTreeView">
      <TreeView.ItemTemplate>
        <HierarchicalDataTemplate DataType="{x:Type local:BinaryTreeData}" ItemsSource="{Binding Subitems}">
          <TextBlock  Text="{Binding Path=ownID}" />
        </HierarchicalDataTemplate>
      </TreeView.ItemTemplate>
    </TreeView>
    

    代码隐藏:

    public MainWindow()
    {
      InitializeComponent();
    
      List<BinaryTreeData> myBinaryData = new List<BinaryTreeData>();
    
      BinaryTreeData parent1 = new BinaryTreeData() { ownID = 1 };
      parent1.Subitems.Add(new BinaryTreeData { ownID = 2 });
      parent1.Subitems.Add(new BinaryTreeData { ownID = 3 });
    
      BinaryTreeData parent2 = new BinaryTreeData() { ownID = 4 };
      parent2.Subitems.Add(new BinaryTreeData { ownID = 5 });
      parent2.Subitems.Add(new BinaryTreeData { ownID = 6 });
    
      myBinaryData.Add(parent1);
      myBinaryData.Add(parent2);
    
      myTreeView.ItemsSource = myBinaryData;
    }
    

    【讨论】:

    • 你的答案是 100% 正确的,但我想让我的 GUI 像这张图片 i.stack.imgur.com/BA93U.gif
    • 更改 HierarchicalDataTemplate 以产生所需外观的练习并不是很简单,但您可以使用由项目和父子节点中连接线的一半组成的网格来实现它。可以使用属性“HasLeftChild”/“HasRightChild”设置线条的可见性...
    猜你喜欢
    • 1970-01-01
    • 2019-05-04
    • 2019-04-09
    • 2017-10-09
    • 2019-08-28
    • 2012-11-22
    • 2014-12-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多