將Ellipse放在同一視圖中的一條線的邊緣

Question

要麼它超級簡單，我只是沒有找到解決方案，否則我很快就會開始瘋狂。

我只是想在Canvas繪製的ItemsControl一個Line和Line應該對兩邊的Ellipse。就像這樣：

我的ItemsControl看起來是這樣的：

 <ItemsControl ItemsSource="{Binding Connections}"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <Canvas/> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.Resources> 
      <DataTemplate DataType="{x:Type systemEnvironmentViewModels:SystemEnvironmentConnectionViewModel}"> 
       <systemEnvironment:ConnectionView/> 
      </DataTemplate> 
      <Style TargetType="ContentPresenter"> <!-- this does only make it worse --> 
       <Setter Property="Canvas.Left" Value="{Binding Connection.FirstElementCoordinate.X}"/> 
       <Setter Property="Canvas.Top" Value="{Binding Connection.FirstElementCoordinate.Y}"/> 
      </Style> 
     </ItemsControl.Resources> 
    </ItemsControl> 

，這是作爲DataTemplate中查看：

<Grid> 
    <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="Auto"/> 
    </Grid.ColumnDefinitions> 
    <Ellipse x:Name="DependencyEllipse" Width="10" Height="10" Fill="Black" Grid.Column="0"/> 
    <Line X1="{Binding Connection.FirstElementCoordinate.X}" X2="{Binding Connection.SecondElementCoordinate.X}" 
      Y1="{Binding Connection.FirstElementCoordinate.Y}" Y2="{Binding Connection.SecondElementCoordinate.Y}" 
      Stroke="Black" StrokeThickness="5" x:Name="ConnectionLine" Grid.Column="1"/> 
    <Ellipse x:Name="SecondDependencyEllipse" Width="10" Height="10" Fill="Black" Grid.Column="2"/> 
</Grid> 

結果看起來一點也不像我想和我知道在列中使用Grid可能不起作用，但它是我能想到的最接近的，可以像我想要的那樣拆分元素。

另外，Style爲ContentPresenter似乎是錯誤的，因爲沒有它，我行被抽像我想要，但Ellipses是錯誤的

我應該去另一個ItemsControl的只是爲橢圓？ 非常感謝幫助。

Answer 1

請勿使用橢圓並且不要將元素放入網格列中。

相反，使用帶有EllipseGeometries的Path元素。以下示例假定FirstElementCoordinate和SecondElementCoordinate屬性的類型爲System.Windows.Point。如果不是這種情況，請使用適當的綁定轉換器。

<Canvas> 
    <Line X1="{Binding Connection.FirstElementCoordinate.X}" 
      Y1="{Binding Connection.FirstElementCoordinate.Y}" 
      X2="{Binding Connection.SecondElementCoordinate.X}" 
      Y2="{Binding Connection.SecondElementCoordinate.Y}" 
      Stroke="Black" StrokeThickness="5"/> 
    <Path Fill="Black"> 
     <Path.Data> 
      <EllipseGeometry Center="{Binding Connection.FirstElementCoordinate}" 
          RadiusX="5" RadiusY="5"/> 
     </Path.Data> 
    </Path> 
    <Path Fill="Black"> 
     <Path.Data> 
      <EllipseGeometry Center="{Binding Connection.SecondElementCoordinate}" 
          RadiusX="5" RadiusY="5"/> 
     </Path.Data> 
    </Path> 
</Canvas>