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

score 10 · Answer 1 · answered Oct 04 '10 at 19:32

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>

This absolutely rocks! :) – AwkwardCoder Feb 03 '17 at 15:01 — AwkwardCoder, Feb 03 '17 at 15:01

score 3 · Accepted Answer · edited Feb 03 '17 at 14:58

3

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.

edited Feb 03 '17 at 14:58

AwkwardCoder

24,893
27
82
152

answered Oct 04 '10 at 17:43

Goblin

7,970
3
36
40

so its dynamic... the collection gets added to or subtracted from by the user – tbischel Oct 04 '10 at 17:43
so I don't show it, but each of the items isn't uniformly sized... each of the controls contains a wrapped textblock that changes based on text the user inputs. Will this still be ok using a "uniformgrid" as the template? (See here for a snapshot of what the control is supposed to look like: http://stackoverflow.com/questions/3808663/inter-related-stack-panel-sizing) – tbischel Oct 04 '10 at 17:55
Ahh, this complicates matters... You need to implement a custom panel. I'll update again :-). – Goblin Oct 04 '10 at 17:58
ok, looks promising. So instead of using an itemcontrol and the dockpanel, I bind directly to the panel's itemssource and give it a template like before. I'll give it a shot! – tbischel Oct 04 '10 at 18:19
Erh no. Just put the above panel inside the ItemsControl's ItemsPanel. – Goblin Oct 04 '10 at 18:21
so tantalizingly close (99% of the way there)! The layout is correct most of the time, but changes to the children's height or width don't trigger an update to the stackpanel. So if the text is edited by the user, its clipped. I'll get back to you if I get it all worked out, thanks for your help! – tbischel Oct 04 '10 at 18:34
Is there something I'm not understanding? If you're going to set the `ItemsPanelTemplate` to something, why not set it to a `DockPanel`, instead of setting it to a `UniformGrid` or writing your own custom implementation of `DockPanel`? – Robert Rossney Oct 04 '10 at 19:36
@Robert haha, yeah that didn't even occur to me even after looking through this solution here... you are right, that is the way to go. – tbischel Oct 04 '10 at 20:43
Frameworks all have this failure mode, but it's especially bad with WPF: it offers an amazing array of functionality plus hooks for extensibility. And if you don't really, really understand the functionality, you think, "I know, I'll just extend it." And then, as jwz put it, you have two problems. – Robert Rossney Oct 04 '10 at 20:58
Digging up an old question here, but I really like the simplicity of your CustomPanel. Quick question though, is there anyway to handle window resizing or restoring from a maximised state? It's current handling for me at least is a little funky :) – CatBusStop Apr 18 '11 at 15:26
Hmm... it should handle resizing as it is - when you say funky... what do you mean? :) (And thanks for the kind words) – Goblin Apr 18 '11 at 15:32
It seems to work fine when its being expanded (window stretched or maximised), but doesn't seem to resize when being shrunk. I've tried it in a TabControl and if you change the selected tab after shrinking the control, then it'll resize correctly. – CatBusStop Apr 19 '11 at 09:32
Ahhh - that is due to an optimization of the StackPanel. Since it does nothing to constrain elements from going off-screen, it will not trigger a new layout-pass from just being shrunk. I'll try and find a solution for that. – Goblin Apr 19 '11 at 15:21
Just override MeasureOverride and return a new Size of double.PositiveInfinity for both width and height. – Goblin Apr 19 '11 at 15:27
I've overridden that method as you suggested and I'm now getting an InvalidOperationException with the following message: "Layout measurement override of element 'DataEntry.UserControls.Elements.CustomPanel' should not return PositiveInfinity as its DesiredSize, even if Infinity is passed in as available size". Tantalisingly close! – CatBusStop Apr 20 '11 at 09:53
Try just returning the size that is passed in - so it will say "I need anything I can get" – Goblin Apr 20 '11 at 16:43

score 0 · Answer 3 · answered Oct 04 '10 at 17:41

0

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

answered Oct 04 '10 at 17:41

Viv

2,515
2
22
26

That is set to Fill on the ItemsControl as it is the only child of the DockPanel. – Goblin Oct 04 '10 at 17:42

score 0 · Answer 4 · answered Oct 04 '10 at 17:58

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.

DockPanel ItemsControl lastchild fill

4 Answers4