Question

我有一个树形结构，我在像这样的树视图中使用

根位于ObservableCollection<Component>对象中。 Component具有x，y，width，height，children和name属性。我想使用相同的树结构来绘制每个Component和Rectancle，并在顶部绘制子对象。像这样的东西

我已尝试过像这样的ListBox

<!-- in Resources -->
<DataTemplate DataType="{x:Type m:Component}">
        <Border BorderBrush="LightBlue" BorderThickness="1">
            <Grid Width="{Binding Width}" Height="{Binding Height}">
                <Rectangle Cursor="Hand" Fill="AliceBlue"/>
                <Label Content="{Binding Name}" Margin="5"/>
            </Grid>
        </Border>
    </DataTemplate>



<ListBox ItemsSource="{Binding ComponentsToDraw}"
         x:Name="listBox"
         SelectionMode="Extended"
         SelectionChanged="listBox_SelectionChanged">

    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas Background="Transparent"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Canvas.Left" Value="{Binding X}"/>
            <Setter Property="Canvas.Top" Value="{Binding Y}"/>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

但除了我树上的第一个levet之外，它无法画出任何东西。还尝试使用Treeview但不能让它停止像堆栈面板一样绘制我的Component对象。

希望任何人都有解决方案或更好的方法。

PS。我没有包含＆＃39;解决方案＆＃39;图中的元素是故意的。

Answer 1

如果您可以接受在模型中定义X，Y，则可以使用小样式树查看：

这是Xaml：

public class Component
{
    public Component() { }
    public ObservableCollection<Component> ComponentsToDraw { set; get; } = new ObservableCollection<Component>();
    public double X { set; get; }
    public double Y { set; get; }
    public double Width { set; get; }
    public double Height { set; get; }
    public Brush Color { set; get; }
    public string Name { set; get; }
}

这里有ItemTemplate的样式，将ContentPresenter作为Canvas和HierarichalDataTemplate，使你的dataTemplate看起来像带有一些文本的Rectangle。

以下是我使用过的模型：

var Solution = new Component() { X = 0, Y = 0, Height = 300, Width = 500, Name = "Solution", Color = new SolidColorBrush(Colors.White)};
var PC = new Component() { X = 0, Y = 0, Height = 300, Width = 245, Name = "PC", Color = new SolidColorBrush(Colors.LightBlue) };
var PC2 = new Component() { X = 255, Y = 0, Height = 195, Width = 245, Name = "PC2", Color = new SolidColorBrush(Colors.LightBlue) };
var SubDrawingComponent = new Component() { X = 50, Y = 50, Height = 200, Width = 150, Name = "Drawing Component", Color = new SolidColorBrush(Colors.GreenYellow) };
var DrawingComponent = new Component() { X = 255, Y = 205, Height = 42.5, Width = 245, Name = "Drawing Component", Color = new SolidColorBrush(Colors.GreenYellow) };
var DrawingComponent2 = new Component() { X = 255, Y = 257.5, Height = 42.5, Width = 200, Name = "Drawing Component2", Color = new SolidColorBrush(Colors.GreenYellow) };
Solution.ComponentsToDraw.Add(PC);
Solution.ComponentsToDraw.Add(PC2);
Solution.ComponentsToDraw.Add(DrawingComponent);
Solution.ComponentsToDraw.Add(DrawingComponent2);
PC.ComponentsToDraw.Add(SubDrawingComponent);
ComponentsToDraw.Add(Solution);

而且，在ViewModel中，也制作了你的控件，你写了类似的东西：

Drawing Component

对于Execution role中的每个项目，您声明X和Y，它们是相对于它的父级。以下是它的外观：

我知道，我用PascalCase写了一些字段，抱歉：D

WPF绘制树结构，矩形在彼此的顶部

1 个答案: