Vertical sizing in WPF trouble

Question

I'm having trouble vertically sizing the CheckListBox control from https://wpftoolkit.codeplex.com/. I'm a week-old newbie in WPF, so this is probably a general issue with (vertical) sizing.

Given my grid, I want the first 5 rows to size whatever size, they need to be, and in my viewport, I want the CheckListBox control in row 6 to simply fill the remaining space vertically.

My problem is, that when I fill the CheckListBox with a lot of elements, the control just expands / overflows the viewport. What I want it to do, is to assume the height of the remaining space vertically, which will make it display an inner scrollbar.

<Grid Grid.Column="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label Grid.Row="0">Some title</Label>
    <RadioButton Grid.Row="1" GroupName="NameSortRadioButtonGroup">Firstname Lastname</RadioButton>
    <RadioButton Grid.Row="2" GroupName="NameSortRadioButtonGroup">Lastname, Firstname</RadioButton>
    <TextBox Grid.Row="3" Margin="0,5" />
    <Label Grid.Row="4" Content="{Binding ElementName=MyCheckListBox, Path=SelectedItems.Count}" />
    <xctk:CheckListBox
        Grid.Row="5"
        Name="MyCheckListBox"
        VerticalAlignment="Stretch"
        VerticalContentAlignment="Stretch"
        Height="Auto"
        />
</Grid>

I have left out some parent elements to simplify. The Grid is in a grid, that's in a canvas, that's in a grid, and this outer grid is direct child of the Window element.

I have tried wrapping the CheckListBox control in a StackPanel with Height="Auto" (to eliminate the possibility of a bug in the CheckListBox) and also here to set the height of the CheckListBox using

Height="{Binding ElementName=CheckListBoxStackPanelWrapper, Path=ActualHeight}"

I also initially tried to do the whole thing with first a StackPanel and later a DockPanel instead of the Grid control.

In all cases, the CheckListBox just flows out of the window/viewport. If I give it an explicit height, it behaves correctly, but I obviously want my window to be resizable.

What shall I do?

is this Grid directly in your Window or it's part of some other control? — dkozl
There is more stuff - it's in a grid that's in a grid that's in a canvas. The size of this canvas is the "content area" and is effectively what I'm referring to as the viewport. — Frederik Struck-Schøning
Canvas is the problem. From MSDN: Child elements of a Canvas are always given the full size that they desire. So your Grid will be given as much space as it requires — dkozl
My good man, you are right! Thanks. Sad thing is, the canvas was only there because I was messing around to learn controls. I have put the canvas-part in the question, so you can "answer" it officially, and I can mark your answer as the answer, and you get the points :) — Frederik Struck-Schøning

dkozl dkozl · Accepted Answer · 2014-05-18T16:11:46

To sum up comments because your outer control is a Canvas which does not restrict its child elements From MSDN:

Child elements of a Canvas are always given the full size that they desire

which means that Grid will be given as much space as it require. One solution is to remove the Canvas part or restrict the size size of Grid or expanding row

Vertical sizing in WPF trouble

1 Answers