如何绘制动态矩形分层？ (MVVM-WPF)

Question

标题解释了我猜的我的问题。我有一个根矩形，它有子矩形，也可以有子矩形。在画布上动态绘制它们的最佳方式是什么？

我的矩形视图模型：

    public class SketchRectangleViewModel:ViewModelBase
    {

        public SketchRectangleViewModel(SketchRectangle sr)
        {
            _id = sr.Id;
            _x = sr.x;
            _y = sr.y;
            _height = sr.Height;
            _width = sr.Width;
            _name = sr.Name;
            _parentId = sr.ParentId;
        }

        private Guid _id;
        private int _x;
        private int _y;
        private int _height;
        private int _width;
        private Guid _parentId;
        private string _name;
        private ObservableCollection<SketchRectangleViewModel> _children = new ObservableCollection<SketchRectangleViewModel>();
        private bool _isSelected;
    }

Answer 1

你可以在你的视图模型中创建一个所有 SketchRectangleViewModel 对象的平面集合：

How to flatten tree via LINQ?

...并将所有SketchRectangleViewModel 对象的集合绑定到ItemsControl：

<ItemsControl ItemsSource="{Binding YourCollection}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas Width="100" Height="100" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding X}"/>
            <Setter Property="Canvas.Top" Value="{Binding Y}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Green" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

注意你只能绑定到SketchRectangleViewModel类的公共属性，所以你需要把你的字段变成属性：

public double X { get; set; }