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> 

如果你能告訴我你實際想要達到的目標，我相信我能以更好的方式幫助你。