如何在垂直重复的ItemsControl中绘制带有矩形和边距的项目

本文关键字：项目 垂直 ItemsControl 绘制 | 更新日期: 2023-09-27 18:00:36

我正在尝试可视化List<MyCustomClass>
每个项目都应该是一个矩形（有圆角，但那是另一个matter），垂直重复，项目之间留有空白。

我试过了，但项目重叠：

<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>

我该怎么解决这个问题？我想矩形对象本身是错误的方法。事实上，我认为画布本身可以绘制背景色。

如何在垂直重复的ItemsControl中绘制带有矩形和边距的项目

Canvas不会根据其包含的内容自动调整大小。为此，可以使用其他布局元素，例如Grid。但是Canvas可以方便地布置孩子的位置，正如您所做的那样。现在，您的Canvas的尺寸为0,0，这就是为什么ItemsControl面板将它们堆叠在一起的原因。

如果你想继续使用Canvas，那么只需自己指定大小，例如：

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

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

如果切换到Grid，则可以使用Margin属性指定子对象的位置。请注意，默认情况下，没有行或列的Grid会将元素堆叠在一起，因此在这方面与Canvas非常相似。只需使用Margin移动它们。

您是否尝试设置ItemsPanel模板：

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