C# 如何在垂直重复项控件中绘制带有矩形和边距的项？

我正在尝试可视化一个

列表

每个项目应在一个矩形（圆角，但这是另一个床垫），重复垂直与项目之间的空白

我已经试过了，但项目重叠：

<ItemsControl Name="ItemsControl1">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
                <Canvas Margin="10,10,10,10" Background="CornflowerBlue" >

                    <Rectangle Fill="Blue" Stroke="Blue" Width="350" Height="100">

                    </Rectangle>
                    <TextBlock Text="{Binding Headline}" Canvas.Left="25" Canvas.Top="10" />
                    <TextBlock Text="{Binding MyDate}" Canvas.Left="55" Canvas.Top="40"/>
                    <Button Content="Click me" Click="Button_Click" Width="80" Height="25" Canvas.Left="200" Canvas.Top="20" />
                </Canvas>                            
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

我怎样才能解决这个问题？

---

我猜矩形对象本身是错误的方法。实际上，我认为画布本身可以绘制背景色。

您是否尝试过设置

ItemsPanel

模板：

<ItemsControl ItemsSource="{Binding FeedItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            ... etc ...
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>   

... 等

A

Canvas

不会自动根据其包含的内容调整大小。为此，您可以使用另一个布局元素，例如

网格

。但是

画布

可以像您所做的那样方便地布置孩子们的位置。现在，您的

Canvas

的大小为

0,0

，这就是

ItemsControl

面板将它们堆叠在一起的原因

如果要继续使用

画布

，只需自己指定大小即可，例如：

<Canvas Width="300" Height="100" ...>

或者任何对正确外观有意义的值

如果切换到

网格

，则可以使用

边距

属性指定子对象的位置。请注意，默认情况下没有行或列的

网格将元素堆叠在彼此的顶部，因此在这方面与
画布
非常相似。只需使用
边距
移动它们即可