WPF上的彼此

Question

我有一个树结构，该结构在我一个TreeView使用这样

根处于ObservableCollection<Component>对象顶部画出与rectanges树结构。 A Component具有x，y，宽度，高度，儿童和名称属性。我想使用相同的树形结构绘制每个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。 也尝试过使用树形视图，但无法让它停止绘制我的Component对象，如堆叠面板。

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

PS。故意在图中没有包含'解决方案'元素。

Answer 1

如果你能接受定义X，Y，在你的模型，你可以用小病急乱投医的TreeView做到这一点：

这里是XAML中：

<TreeView ItemsSource="{Binding ComponentsToDraw}"> 
    <TreeView.Resources> 
     <HierarchicalDataTemplate DataType="{x:Type local:Component}" ItemsSource="{Binding ComponentsToDraw}"> 
      <Grid Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}" Width="{Binding Width}" Height="{Binding Height}" Background="{Binding Color}"> 
       <TextBlock Margin="8,5,0,0" FontWeight="Bold" Text="{Binding Name}" /> 
      </Grid> 
     </HierarchicalDataTemplate> 
     <Style TargetType="{x:Type TreeViewItem}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type TreeViewItem}"> 
         <Canvas> 
          <ContentPresenter x:Name="PART_Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header"> 
            <ContentPresenter.Style> 
             <Style TargetType="ContentPresenter"> 
              <Setter Property="Canvas.Left" Value="{Binding Path=X}" /> 
              <Setter Property="Canvas.Top" Value="{Binding Path=Y}" /> 
             </Style> 
            </ContentPresenter.Style> 
           </ContentPresenter>  
          <ItemsPresenter/> 
         </Canvas> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </TreeView.Resources>   
</TreeView> 

你这里的ItemTemplate风格，makde ContentPresenter作为Canvas和HierarichalDataTemplate，使您的dataTemplate看起来像带有一些文本的Rectangle。

这里是模型我用：

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; } 
} 

而且，在视图模型，也使你的控制，找你写的东西，如：

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); 

对于每个项目在Drawing Component，你宣告X和Y，这是相对于它的父母。 下面是它的外观：

我知道，我写了一些领域与PascalCase，它惋惜：d