Question

在WPF中，我需要第二个ItemCollection到TreeViewItem中。为此，我想创建一个自定义TreeViewItem（继承常规TreeViewItem）并添加用C＃硬编码的所需属性。这样做的步骤是什么？

我为什么需要这个？我正在尝试为现有的WPF程序（带有现有的FlowChartEditor）制作一个TreeView。

对于我的if元素，我需要一个true和false集合才能绑定。之后应该是这样的：

例如，我制作了一个LoopItem：

public class LoopItem : TreeViewItem
{
    [Bindable(false)]
    [Browsable(false)]
    public bool HasFooter
    {
        get { return (bool)GetValue(HasFooterProperty); }
        private set { SetValue(HasFooterProperty, value); }
    }
    public static readonly DependencyProperty HasFooterProperty =
        DependencyProperty.Register(
            "HasFooter",
            typeof(bool),
            typeof(LoopItem),
            new PropertyMetadata(false
        );

    [Browsable(true)]
    [Bindable(true)]
    public object Footer
    {
        get { return (object)GetValue(FooterProperty); }
        set { SetValue(FooterProperty, value); }
    }
    public static readonly DependencyProperty FooterProperty =
        DependencyProperty.Register(
            "Footer",
            typeof(object),
            typeof(LoopItem),
            new PropertyMetadata(null)
        );
}

现在，我不仅可以绑定页眉，还可以绑定页脚。用XAML编写自己的样式后，我得到的结果如下：

箭头绘制在Canvas上，该箭头用作ItemsPanel上的TreeView。明确地说，这是我想要获得的视图。 唯一的问题是如何针对if做到这一点。

那么像第一个图像一样，我需要if项的哪些属性？有人以前做过吗？

Answer 1

您不需要修改TreeViewItem。它与数据结构的设计有关。您需要对数据模型（或节点）进行分类或专门化，例如：

一个条件节点，必须包含两个代表每个分支的子节点。
一个公共表达式节点，只有一个子节点。
一个结节点（多个父节点的连接），它有一个孩子但有多个父节点（节点）。
具有子节点（主体）和其他属性（如一组循环条件）的循环节点
一个迭代节点，它可能也有一个子节点（主体）和属性，例如一组迭代条件

如果您决定继续使用TreeView，我不建议您这样做，那么您可以使用HierachicalDataTemplate设计TreeView的外观。

但是，将TreeView保留为空，而是使用节点控件来绘制整个树会更加灵活。通过遍历树数据模型并将相应的视觉节点对象添加到绘图画布（可以模板化的Control），您可以从树数据模型表示（使用专门的节点模型类）转换为视觉表示（反之亦然）以及样式，以便为他们提供所需的外观）。当您让这些控件扩展Thumb控件时，将拖动添加到可视节点将非常容易。

下面的代码是一个简单（难看）的示例，用于显示如何通过按住 Ctrl-Key 并在它们之间画一条线来连接两个（Node类型的对象）。有两个Node对象已经创建并放置在画布上。以后，应将它们从节点对象池中拖到画布上，或者通过将图形转换为可视对象和已连接的Node对象而自动将其绘制到画布上。由于Node扩展了Thumb，因此您可以在Node上拖动DrawingArea控件：

XAML用法示例

<local:DrawingArea Focusable="True">
    <local:DrawingArea.Resources>
        <Style TargetType="Line">
            <Setter Property="Stroke" Value="Blue"/>
            <Setter Property="StrokeThickness" Value="2"/>
            <Setter Property="IsHitTestVisible" Value="False"/>
        </Style>
    </local:DrawingArea.Resources>
    <local:Node CurrentPosition="0, 0" />
    <local:Node CurrentPosition="150, 150" />      
</local:DrawingArea>

Node图形对象。它扩展了Thumb以使其支持拖动

class Node : Thumb
{
  public static readonly DependencyProperty CurrentPositionProperty = DependencyProperty.Register(
    "CurrentPosition",
    typeof(Point),
    typeof(Node),
    new PropertyMetadata(default(Point), OnCurrentPositionChanged));

  public Point CurrentPosition { get { return (Point) GetValue(Node.CurrentPositionProperty); } set { SetValue(Node.CurrentPositionProperty, value); } }

  public static readonly DependencyProperty ChildNodesProperty = DependencyProperty.Register(
    "ChildNodes",
    typeof(ObservableCollection<Node>),
    typeof(Node),
    new PropertyMetadata(default(ObservableCollection<Node>)));

  public ObservableCollection<Node> ChildNodes { get { return (ObservableCollection<Node>) GetValue(Node.ChildNodesProperty); } set { SetValue(Node.ChildNodesProperty, value); } }

  public static readonly DependencyProperty DrawingAreaProperty = DependencyProperty.Register(
    "DrawingArea",
    typeof(DrawingArea),
    typeof(Node),
    new PropertyMetadata(default(DrawingArea)));

  public DrawingArea DrawingArea { get { return (DrawingArea) GetValue(Node.DrawingAreaProperty); } set { SetValue(Node.DrawingAreaProperty, value); } }

  static Node()
  {
    DefaultStyleKeyProperty.OverrideMetadata(typeof(Node), new FrameworkPropertyMetadata(typeof(Node)));
  }

  public Node()
  {
    this.DragDelta += MoveOnDragStarted;
    Canvas.SetLeft(this, this.CurrentPosition.X);
    Canvas.SetTop(this, this.CurrentPosition.Y);
  }

  private static void OnCurrentPositionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  {
    var _this = d as Node;
    Canvas.SetLeft(_this, _this.CurrentPosition.X);
    Canvas.SetTop(_this, _this.CurrentPosition.Y);
  }

  private void MoveOnDragStarted(object sender, DragDeltaEventArgs dragDeltaEventArgs)
  {
    if (this.DrawingArea.IsDrawing)
    {
      return;
    }

    this.CurrentPosition = new Point(Canvas.GetLeft(this) + dragDeltaEventArgs.HorizontalChange, Canvas.GetTop(this) + dragDeltaEventArgs.VerticalChange);
  }
}

Node样式。将此添加到 Generic.xaml 文件的ResourceDictionary

<Style TargetType="local:Node">
  <Setter Property="Height" Value="100"/>
  <Setter Property="Width" Value="100"/>
  <Setter Property="IsHitTestVisible" Value="True"/>
  <Setter Property="DrawingArea" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Canvas}}"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="local:Node">
        <Border Background="Red"></Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

DrawingArea是Canvas的扩展，用于绘制线条（显示编辑器功能）

class DrawingArea : Canvas
{
  static DrawingArea()
  {
    DefaultStyleKeyProperty.OverrideMetadata(typeof(DrawingArea), new FrameworkPropertyMetadata(typeof(DrawingArea)));
  }

  public DrawingArea()
  {
    this.TemporaryDrawingLine = new Line();
  }

  #region Overrides of UIElement

  /// <inheritdoc />
  protected override void OnPreviewKeyDown(KeyEventArgs e)
  {
    base.OnKeyDown(e);
    if (e.Key.HasFlag(Key.LeftCtrl) || e.Key.HasFlag(Key.RightCtrl))
    {
      this.IsDrawing = true;
    }
  }

  /// <inheritdoc />
  protected override void OnPreviewKeyUp(KeyEventArgs e)
  {
    base.OnKeyDown(e);
    if (e.Key.HasFlag(Key.LeftCtrl) || e.Key.HasFlag(Key.RightCtrl))
    {
      this.IsDrawing = false;
      this.Children.Remove(this.TemporaryDrawingLine);
    }
  }

  /// <inheritdoc />
  protected override void OnPreviewMouseLeftButtonDown(MouseButtonEventArgs e)
  {
    base.OnMouseLeftButtonDown(e);
    if (!this.IsDrawing)
    {
      return;
    }

    if (!(e.Source is Node linkedItem))
    {
      return;
    }

    this.StartObject = linkedItem;
    this.TemporaryDrawingLine = new Line()
    {
      X1 = this.StartObject.CurrentPosition.X, Y1 = this.StartObject.CurrentPosition.Y,
      X2 = e.GetPosition(this).X, Y2 = e.GetPosition(this).Y,
      StrokeDashArray = new DoubleCollection() { 5, 1, 1, 1}
    };
    this.Children.Add(this.TemporaryDrawingLine);
  }


  /// <inheritdoc />
  protected override void OnPreviewMouseMove(MouseEventArgs e)
  {
    Focus();
    if (!this.IsDrawing)
    {
      return;
    }

    this.TemporaryDrawingLine.X2 = e.GetPosition(this).X;
    this.TemporaryDrawingLine.Y2 = e.GetPosition(this).Y ;
  }

  /// <inheritdoc />
  protected override void OnPreviewMouseLeftButtonUp(MouseButtonEventArgs e)
  {
    base.OnPreviewMouseLeftButtonUp(e);
    if (!this.IsDrawing)
    {
      return;
    }

    if (!(e.Source is Node linkedItem))
    {
      this.Children.Remove(this.TemporaryDrawingLine);
      this.IsDrawing = false;
      return;
    }

    e.Handled = true;
    this.Children.Remove(this.TemporaryDrawingLine);
    var line = new Line();
    var x1Binding = new Binding("CurrentPosition.X") {Source = this.StartObject};
    var y1Binding = new Binding("CurrentPosition.Y") { Source = this.StartObject };
    line.SetBinding(Line.X1Property, x1Binding);
    line.SetBinding(Line.Y1Property, y1Binding);

    this.EndObject = linkedItem;
    var x2Binding = new Binding("CurrentPosition.X") { Source = this.EndObject };
    var y2Binding = new Binding("CurrentPosition.Y") { Source = this.EndObject };
    line.SetBinding(Line.X2Property, x2Binding);
    line.SetBinding(Line.Y2Property, y2Binding);
    this.Children.Add(line);
    this.IsDrawing = false;
  }

  public bool IsDrawing { get; set; }

  private Node EndObject { get; set; }  
  private Node StartObject { get; set; }  
  private Line TemporaryDrawingLine { get; set; }    

  #endregion
}

如何将第二个ItemCollection（可绑定）添加到TreeViewItem？

1 个答案: