DockPanel ItemsControl lastchild fill

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.

Answer 2

Don't put the ItemsControl in the DockPanel; put the DockPanel in the ItemsControl. Use the ItemsPanelTemplate to make the ItemsControl lay its items out in a DockPanel.

Use the ItemContainerStyle to set the DockPanel.Dock property on the item containers (which, for an ItemsControl, will be ContentPresenters).

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:sys="clr-namespace:System;assembly=mscorlib">
  <ItemsControl Margin="5">
    <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
        <DockPanel LastChildFill="True"/>
      </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
      <Style TargetType="ContentPresenter">
        <Setter Property="DockPanel.Dock" Value="Top"/>
      </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
      <DataTemplate>
        <TextBlock Background="Lavender" Margin="1" Padding="5" Text="{Binding}"/>
      </DataTemplate>
    </ItemsControl.ItemTemplate>
    <sys:String>Athos</sys:String>
    <sys:String>Porthos</sys:String>
    <sys:String>Aramis</sys:String>
    <sys:String>D'Artagnan</sys:String>
  </ItemsControl>
</Page>

Answer 3

Did you set the DockPanel.Dock property to the value you wanted?

Answer 4

I'll throw out an inelegant solution:

in the modelview, Chop the list binding into a list containing all but the last element, and then the last element separately. Then use the items control for the list, and manually add an extra entry linking to the last element. I'd hate to do this, so hopefully there is a better way.