同じ図の行の辺に楕円をつけてください

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の列を使ってもおそらく動作しませんが、私が思うように、私が思うように要素を分割することができると思います。私はちょうど楕円のために別のItemsControlのために行く必要があります

またContentPresenterためStyleはそれなしに私が望むように私のラインが引かれますが、Ellipsesが

間違っているので、間違っているようですか？ ヘルプは大歓迎です。

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>