使用ItemsControl在wpf中绘制多个圆

本文关键字：绘制 ItemsControl wpf 使用 | 更新日期: 2023-09-27 18:18:53

我必须在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;

circle class:

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

如果我什么都不添加到列表中，我就不会得到任何东西。如果我加一个圆，我看到它了，但是在X0/Y0。如果我加上第二个，我仍然只看到一个圆。可能是因为它们在同一个位置。

我做错了什么?

使用ItemsControl在wpf中绘制多个圆

您必须将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>
相关文章：