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

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

1 голос
/ 26 июня 2011

Я пытаюсь визуализировать 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>

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

Ответы [ 2 ]

3 голосов
/ 26 июня 2011

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

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

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

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

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

0 голосов
/ 26 июня 2011

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

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