Рисование нескольких кругов в wpf с помощью ItemsControl

Question

Мне нужно написать несколько кругов на холсте в wpf. У меня есть этот учебник в качестве основы, но это не будет работать как-то: http://www.wpf-tutorial.com/list-controls/itemscontrol/

мой XAML

<ItemsControl Name="icCircles"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Canvas Background="Transparent" Width="300" Height="500"/> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Ellipse Canvas.Top="{Binding X}" Canvas.Left="{Binding Y}" Fill="Black" Height="5" Width="5" Stroke="Black" /> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

код позади:

List<Circle> circles = new List<Circle>(); 

circles.Add(new Circle() { X = 50, Y = 50 }); 
circles.Add(new Circle() { X = 100, Y = 50 }); 

icCircles.ItemsSource = circles; 

класс круг:

public class Circle 
{ 
    public int X { get; set; } 
    public int Y { get; set; } 
} 

Если я ничего не добавлю к списку, я ничего не получу. если я добавлю один круг, я вижу его, но в X0/Y0. если я добавлю второй, я все еще вижу только один круг. возможно потому, что они находятся в одном месте.

что я делаю неправильно?

Answer 1

Вы должны связать Canvas.Left и Canvas.Top свойствами в стиле для ContentPresenter, который служит контейнером для предметов. Стиль применяется в ItemContainerStyle собственности:

<ItemsControl Name="icCircles"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Canvas Background="Transparent"/> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemContainerStyle> 
     <Style TargetType="ContentPresenter"> 
      <Setter Property="Canvas.Left" Value="{Binding X}"/> 
      <Setter Property="Canvas.Top" Value="{Binding Y}"/> 
     </Style> 
    </ItemsControl.ItemContainerStyle> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Path Fill="Black"> 
       <Path.Data> 
        <EllipseGeometry RadiusX="2.5" RadiusY="2.5"/> 
       </Path.Data> 
      </Path> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

Заметим, однако, что эти небольшие эллипсы выровнены в их верхнем левом углу, так что это не их центр указатель, на котором они нарисованы. Таким образом, вы можете заменить их Путей с EllipseGeometries:

<ItemsControl.ItemTemplate> 
    <DataTemplate> 
     <Path Fill="Black"> 
      <Path.Data> 
       <EllipseGeometry RadiusX="2.5" RadiusY="2.5"/> 
      </Path.Data> 
     </Path> 
    </DataTemplate> 
</ItemsControl.ItemTemplate>