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>

使用ItemsControl

1 个答案: