fbueckle fbueckle -3 years ago 70
C# Question

Put Ellipse on the edge of a line in the same view

Either it is super simple and I just didn't find the solution yet or I'll start to go insane soon.

I just want to draw a

Line
in an
ItemsControl
on a
Canvas
and that
Line
should have an
Ellipse
on both edges. Like this:

enter image description here

My ItemsControl looks like this:

<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>


And the View that is used as 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>


The Result does look nothing like I want and I know that using a
Grid
with columns probably doesn't work but it's the closest I can think of that allows to split the elements like I want.

Also the
Style
for the
ContentPresenter
seems to be wrong, because without it my Line gets drawn like I want but the
Ellipses
are wrong

Should I go for another ItemsControl just for the Ellipse?
Help is much appreciated.

Answer Source

Do not use an Ellipse and don't put elements in Grid columns.

Instead, use Path elements with EllipseGeometries. The following example assumes that the FirstElementCoordinate and SecondElementCoordinate properties are of type System.Windows.Point. If that is not the case, use an appropriate Binding Converter.

<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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download