畫布與線條和點

Question

我正在遷移舊的應用程序，並試圖實現MVVM。舊應用程序具有與in this post所述類似的界面。雖然它稍微簡單一些。我並不是很擔心跟隨MVVM，但我想用它作爲練習的機會。

我有以下類：

public class LineViewModel 
{ 
    public ObservableCollection<LinePoint> Points {get;} 
    public Geometry LineGeometry {get;} 
} 

在我的應用程序視圖模型我行的集合，我想描繪在畫布，但我也想提請，使點每條線。

這是到目前爲止我的XAML：

<ItemsControl ItemsSource="{Binding Lines}"> 
    <ItemsControl.Resources> 
     <DataTemplate DataType="{x:Type local:LineViewModel}"> 
      <Path StrokeThickness="2.0" Stroke="Black" Data="{Binding LineGeometry}" /> 
     </DataTemplate> 

     <DataTemplate DataType="{x:Type local:LinePoint}"> 
      <Ellipse StrokeThickness="1.0" Stroke="Black" Fill="MistyRose" Width="8.0" Height="8.0" /> 
     </DataTemplate> 
    </ItemsControl.Resources> 

    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Canvas /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
</ItemsControl> 

我可以看到正在繪製的線條，這似乎是工作的罰款。正如你可以看到我已經添加了模板的點，但我不知道如何設置XAML來繪製這些。我怎樣才能得出這些觀點？

從行中拉出點並從應用程序視圖模型中暴露這些點看起來非常直觀，因爲它是LineViewModel，用於查看一行中的點 - 而不是應用程序。如果我能幫上忙的話，我寧願不斷離線上的觀點。

感謝

Answer 1

我建議創建與線的點單一屬性視圖模型

class LineViewModel 
{ 
    public PointCollection LinePoints { get; set; } 
} 

class ViewModel 
{ 
    public IEnumerable<LineViewModel> Lines { get; set; } 
} 

然後，你可以在你的「外」的DataTemplate中嵌套的ItemsControl ItemsControl如下所示，它使用Polyline爲圓圈繪製線條和Path元素的集合，EllipseGeometries。

<ItemsControl ItemsSource="{Binding Lines}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Canvas/> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 

    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Canvas> 
       <Polyline Points="{Binding LinePoints}" 
          StrokeThickness="2.0" Stroke="Black"/> 

       <ItemsControl ItemsSource="{Binding LinePoints}"> 
        <ItemsControl.ItemsPanel> 
         <ItemsPanelTemplate> 
          <Canvas/> 
         </ItemsPanelTemplate> 
        </ItemsControl.ItemsPanel> 

        <ItemsControl.ItemTemplate> 
         <DataTemplate> 
          <Path StrokeThickness="1.0" Stroke="Black" Fill="MistyRose"> 
           <Path.Data> 
            <EllipseGeometry Center="{Binding}" 
                RadiusX="4" RadiusY="4"/> 
           </Path.Data> 
          </Path> 
         </DataTemplate> 
        </ItemsControl.ItemTemplate> 
       </ItemsControl> 
      </Canvas> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

---

在你必須原樣使用LineViewModel情況下，你可能會寫的ItemTemplate像圖所示，與你轉換到LinePoint爲Point的EllipseGeometry的Center具有約束力的轉換器。

<ItemsControl.ItemTemplate> 
    <DataTemplate> 
     <Canvas> 
      <Path StrokeThickness="2.0" Stroke="Black" Data="{Binding LineGeometry}" /> 

      <ItemsControl ItemsSource="{Binding Points}"> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <Canvas/> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 

       <ItemsControl.ItemTemplate> 
        <DataTemplate> 
         <Path StrokeThickness="1.0" Stroke="Black" Fill="MistyRose"> 
          <Path.Data> 
           <EllipseGeometry 
            Center="{Binding 
             Converter={StaticResource LinePointConverter}}" 
            RadiusX="4" RadiusY="4"/> 
          </Path.Data> 
         </Path> 
        </DataTemplate> 
       </ItemsControl.ItemTemplate> 
      </ItemsControl> 
     </Canvas> 
    </DataTemplate> 
</ItemsControl.ItemTemplate>