Как нарисовать элементы с прямоугольниками и полями в вертикально повторяющихся элементах ItemsControl?

Question

Я пытаюсь визуализировать List<MyCustomClass>,
Каждый элемент должен быть в прямоугольнике (со скругленными углами, но это еще один вопрос), повторяться по вертикали с полем между элементами.

Я пробовал это, но элементы перекрываются:

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

Как я могу это исправить? Я предполагаю, что сам объект прямоугольника - неправильный подход. На самом деле я думал, что сам холст сможет нарисовать цвет фона.

Answer 1

Canvas автоматически не изменяет размер содержимого, которое он содержит. Для этого вы можете использовать другой элемент макета, такой как Grid, Но Canvas удобно выкладывать положение детей, как вы уже сделали. Как сейчас Canvas имеет размер 0,0 и именно поэтому ItemsControl Панель укладывает их друг на друга.

Если вы хотите продолжать использовать Canvas, а затем просто укажите размер самостоятельно, например:

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

или какие-либо значения имеют смысл для правильного взгляда.

Если вы переключитесь на Grid затем вы можете указать положение детей, используя Margin имущество. Обратите внимание, что Grid без строк или столбцов по умолчанию элементы накладываются друг на друга, поэтому это очень похоже на Canvas в этом отношении. Просто сдвиньте их, используя Margin,

Answer 2

Вы пытались установить ItemsPanel шаблон:

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