使用 ItemsControl 在 wpf 中绘制多个圆圈

Question

我必须在 wpf 中写一些圆圈到 canvas。我有这个教程作为基础，但它不会以某种方式工作： 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;

圆class:

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

如果我不向列表中添加任何内容，我将一无所获。如果我添加一个圆圈，我会看到它，但是在 X0/Y0。如果我添加第二个，我仍然只能看到一个圆圈。可能是因为他们在同一个地方。

我做错了什么？

Answer 1

您必须在用作项目容器的 ContentPresenter 的样式中绑定 Canvas.Left 和 Canvas.Top 属性。样式由 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>

但是请注意，这些小椭圆在左上角对齐，因此绘制它们的位置不是它们的中心指针。因此，您可以将它们替换为 Paths with EllipseGeometries:

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

使用 ItemsControl 在 wpf 中绘制多个圆圈

Drawing multiple circles in wpf using ItemsControl

c#

wpf

geometry

xaml

itemscontrol