Question

I have a dockpanel that I dynamically fill using an ItemsControl to populate the panel. The dockpanel needs the last child from the itemscontrol list to fill the rest of the panel, but it doesn’t seem to happen if I populate it in this fashion… what can I do to get that last item to expand?

snippet of how I have it set up: (note I set the dockpanel background to blue so I could distinguish the populated user controls from the background of the panel)

        <DockPanel Background="Blue" LastChildFill="True" Margin="0">
        <ItemsControl ItemsSource="{Binding Requirements}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <local:TMGrid2View Baseline="{Binding}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </DockPanel>

---

My current hypothesis as to what is happening is the child-fill is being applied to the itemscontrol instead of the children populated within the itemscontrol. I’ve used setters in the past to specify the child should dock to a side of the panel for instance… but there doesn’t seem to be a child setter option to get it to expand…

Answer 1

What is happening is that your DockPanel is filled with the ItemsControl. So far so good. However, the ItemsControl internally uses a StackPanel which cannot fill vertically (horizontally if set to Orientation=”Horizontal”.

EDIT: To explain the background is blue… the ItemsControl’s background is default set to null.

Do you know how many items is in the collection?

EDIT2: What you need to do when it’s dynamic collection is add the following:

<ItemsControl ...>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="1"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!-- rest of ItemsControl properties -->
</ItemsControl>

The Uniform Grid assigns an equal amount of space to each cell both horizontally and vertically and the ItemsPanel exchanges the standard StackPanel for positioning.

EDIT3: Working with items of non-equal height… a custom panel:

public class CustomPanel : StackPanel
{
    protected override Size ArrangeOverride(Size finalSize)
    {
        var childUIElements = Children.OfType<UIElement>().ToList();
        foreach (var child in childUIElements)
        {
            child.Measure(finalSize);
        }
        double remainingHeight = finalSize.Height - childUIElements.Sum(c => c.DesiredSize.Height);
        if(remainingHeight <= 0)
            return base.ArrangeOverride(finalSize);

        double yOffset = 0;
        foreach (var child in childUIElements)
        {
            double height = child.DesiredSize.Height + remainingHeight/childUIElements.Count;
            child.Arrange(new Rect(0,yOffset,finalSize.Width,height));
            yOffset += height;
        }
        return finalSize;
    }
}

If I haven’t made too many f..-ups that should do a crude version at least. If the items are to large to be contained, it works like a normal stackpanel – if not, it arranges the children to split the remaining space evenly between them. You can adjust it to assign it by ratio if you need it (ie. the larger blocks get more of the remaining space).

LAST EDIT (I think :-)) You need to put this custom panel inside the ItemsPanelTemplate instead of the UniformGrid I suggested earlier.