ItemsControl中的多个项目在画布上

Question

在下面的XAML中，请填写“WhatGoesHere”节点并向我解释如何不会混淆Canvas上的坐标。

<ItemsControl ItemsSource="{Binding ViewModels}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Canvas/> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <WhatGoesHere?> 
       <Path Stroke="CornflowerBlue" StrokeThickness="2"> 
        <Path.Data> 
         <PathGeometry Figures="{Binding Figures}"/> 
        </Path.Data> 
       </Path> 
       <Path Stroke="Red" StrokeThickness="2"> 
        <Path.Data> 
         <PathGeometry Figures="{Binding Figures2}"/> 
        </Path.Data> 
       </Path> 
      </WhatGoesHere?> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

我的例子在模板中有两个相同类型的对象，但我也有其他几种控件类型。

Answer 1

您在DataTemplate内有多个元素。您必须将两个Path对象放入某种Panel中，例如Grid。问题是计算出的所有画布坐标在哪里，以便您可以将Grid绑定到它？在你的视图模型中？然后，你可以绑定到它，它可能看起来有点像这样：

<ItemsControl ItemsSource="{Binding ViewModels}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Canvas/> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Grid Canvas.Top="{Binding Y}" Canvas.Left="{Binding X}"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto" /> 
        <RowDefinition Height="Auto" /> 
       </Grid.RowDefinitions> 

       <Path Stroke="CornflowerBlue" StrokeThickness="2"> 
        <Path.Data> 
         <PathGeometry Figures="{Binding Figures}"/> 
        </Path.Data> 
       </Path> 
       <Path Stroke="Red" StrokeThickness="2" Grid.Row="1"> 
        <Path.Data> 
         <PathGeometry Figures="{Binding Figures2}"/> 
        </Path.Data> 
       </Path> 
      </Grid> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

如果你没有这些坐标，那么我会建议使用其他值ItemsPanelTemplate像VirtualizedStackPanel。这可能看起来像这样：

<ItemsControl ItemsSource="{Binding ViewModels}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <VirtualizedStackPanel Orientation="Horizontal" /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto" /> 
        <RowDefinition Height="Auto" /> 
       </Grid.RowDefinitions> 
       <Path Stroke="CornflowerBlue" StrokeThickness="2"> 
        <Path.Data> 
         <PathGeometry Figures="{Binding Figures}"/> 
        </Path.Data> 
       </Path> 
       <Path Stroke="Red" StrokeThickness="2" Grid.Row="1"> 
        <Path.Data> 
         <PathGeometry Figures="{Binding Figures2}"/> 
        </Path.Data> 
       </Path> 
      </Grid> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

如果你能告诉我你实际想要达到的目标，我相信我能以更好的方式帮助你。