WPF/C#: Подключение формы динамически с линиями

Question

Я следующие XAML-код:

<Grid> 
    <ItemsControl ItemsSource="{Binding Items}"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <Canvas></Canvas> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Grid> 
        <Ellipse Width="{Binding Radius}" Height="{Binding Radius}" Fill="{Binding BackColor}" /> 
        <Line Stroke="Black" StrokeThickness="1" x:Name="_Line"/> 
       </Grid> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
     <ItemsControl.ItemContainerStyle> 
      <Style> 
       <Setter Property="Canvas.Left" Value="{Binding X}"/> 
       <Setter Property="Canvas.Top" Value="{Binding Y}"/> 
       <Setter Property="Line.X1" Value="{Binding LineX1}"/> 
       <Setter Property="Line.X2" Value="{Binding LineX2}"/> 
       <Setter Property="Line.Y1" Value="{Binding LineY1}"/> 
       <Setter Property="Line.Y2" Value="{Binding LineY2}"/> 
      </Style> 
     </ItemsControl.ItemContainerStyle> 
    </ItemsControl> 
</Grid> 

Это ItemsControl, чей ItemPanel является Canvas динамически разместить эллипсы из Obervable коллекции я привязана к какому. Размещение эллипсов с значениями Canvas.Top и Canvas.Left отлично работает. Но он не рисует линии для соединения эллипсов.

Позиции для линий рассчитываются правильно в коде позади, я проверил это.

Answer 1

Свойства линии не должны применяться к контейнеру предметов. Вместо этого они должны быть непосредственно установлены на контрольной линии в DataTemplate:

<ItemsControl.ItemTemplate> 
    <DataTemplate> 
     <Grid> 
      <Ellipse Width="{Binding Radius}" Height="{Binding Radius}" 
        Fill="{Binding BackColor}" /> 
      <Line Stroke="Black" StrokeThickness="1" x:Name="_Line" 
        X1="{Binding LineX1}" Y1="{Binding LineY1}" 
        X2="{Binding LineX2}" Y1="{Binding LineY2}"/> 
     </Grid> 
    </DataTemplate> 
</ItemsControl.ItemTemplate> 

Обратите внимание, что значения свойств Линекс и LineY по сравнению с положением пункта.

---

EDIT: Альтернативное решение с абсолютным размещением всех элементов было бы не установить свойства Canvas.Left и Canvas.Top на контейнере элемента (т.е. не имеют ItemContainerStyle вообще).

Вы бы использовать путь с EllipseGeometry вместо эллипса и связать свойство ЦЕНТРЕ EllipseGeometry на вид модели свойство типа Point в качестве замены для X и Y:

<ItemsControl ItemsSource="{Binding Items}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Canvas/> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Canvas> 
       <Path Fill="{Binding Fill}" Panel.ZIndex="1"> 
        <Path.Data> 
         <EllipseGeometry Center="{Binding Center}" 
             RadiusX="{Binding Radius}" 
             RadiusY="{Binding Radius}"/> 
        </Path.Data> 
       </Path> 
       <Line Stroke="Black" 
         X1="{Binding LineX1}" Y1="{Binding LineY1}" 
         X2="{Binding LineX2}" Y2="{Binding LineY2}"/> 
      </Canvas> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl>