Question

I have an ItemsControl and want to display some Strings from my CustomObject.

It’s like

String A
String B
String C

where String A and B can be multiple lines long, but C can’t. I was thinking of Height="Auto" and a DockPanel. The height of String A should be however it needs to be. With String B as well.

This is what I came up with so far:

<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" Background="Black">
    <ItemsControl Name="ItemsControl1">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="#FF126eb1" BorderThickness="1.5" CornerRadius="8,8,8,8" Background="#FF074e84" Width="350" Height="Auto">
                    <DockPanel Width="350" Margin="0,10,0,0" Height="Auto" Background="Transparent">
                        <Canvas DockPanel.Dock="Top" Height="Auto" Width="350" Margin="0,10,0,0">
                            <TextBlock Text="{Binding Headline}" Canvas.Left="5" Canvas.Top="5" Foreground="White" FontSize="15" FontWeight="Bold" MaxWidth="340" TextWrapping="Wrap" Height="Auto"/>
                        </Canvas>
                        <Canvas DockPanel.Dock="Top" Height="Auto" Width="350" Margin="0,10,0,0">
                            <TextBlock Text="{Binding Description}" Canvas.Left="5" Canvas.Top="20" Foreground="White" FontSize="13" MaxWidth="340" TextWrapping="Wrap" Height="Auto" />
                        </Canvas>
                        <Canvas DockPanel.Dock="Top" Width="350" Height="40" Margin="0,10,0,0" Background="Transparent">
                            <TextBlock Text="{Binding DeadlineOn, StringFormat='Deadline: {0}'}" Canvas.Left="5" Canvas.Top="5" Foreground="White"/>
                             <!-- and other controls -->
                        </Canvas>
                    </DockPanel>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>

Unfortunately only the margin property is making height for String A and B.

How can I do this, if the height of each item is unknown?

Answer 1

There are a lot of layout elements and while this gives you a lot of choices, it can be hard to decide which layout element is the right one to use in any given situation.

In general, a Canvas is useful for its convenient fixed positioning capabilities. It allows anything to be placed anywhere using the Canvas.Left and Canvas.Top attached properties. But because the size of a Canvas is fixed and doesn’t depend on its children, it’s difficult to use for variable-sized content. The parent of the Canvas is “insulated” from the size of the children of the Canvas, and this is actually useful in some situations.

By contrast, a Grid is by far the flexible layout element and is useful for layout out grids with rows and columns, with or without spanning, etc. This is why its the default when you create a new Window or UserControl. But unlike a Canvas, the size of Grid, when unspecified and not stretched to the available space, is the union of the sizes of all its children.

A Grid also has the property that if it has several children and they aren’t placed into rows or columns, then they are overlayed on top of each other, with later children being higher in the Z-order. This is just like a Canvas but without Canvas.Left and Canvas.Top, how can we finely control the position of the children?

Let’s look at an example. Here is a Canvas with two rectangles placed side-by-side with a little space, and a Grid doing the same thing:

<Grid>
    <StackPanel>
        <Canvas Height="120">
            <Rectangle Canvas.Left="10" Canvas.Top="10" Height="100" Width="100" Fill="Red"/>
            <Rectangle Canvas.Left="120" Canvas.Top="10" Height="100" Width="100" Fill="Green"/>
        </Canvas>
        <Grid HorizontalAlignment="Left">
            <Rectangle Margin="10,10,10,10" Height="100" Width="100" Fill="Red" HorizontalAlignment="Left"/>
            <Rectangle Margin="120,10,10,10" Height="100" Width="100" Fill="Green" HorizontalAlignment="Left"/>
        </Grid>
    </StackPanel>
</Grid>

In the first case we had to specific the height of the Canvas because it doesn’t auto-size. In the second case, we used Margin to simulate absolute positioning and the Grid size adapts to the size of its content.