13

I'm attempting to stretch the height of a ListBox 100% of the height of the parent grid (i.e. 90% of the height of the parent view); even if the listboxes are empty. I should note that VerticalAlignment="Stretch" doesn't seem to work, so I've removed it from the ListBox and StackPanel elements. As of now, the ListBox only stretches as far as it needs to in order to accommodate the number of items it contains. I understand that the row definitions should work but if both lists are empty, they both shrink to a few pixels tall (along with the grid rows). Could something cause these rows to shrink despite the explicit height declaration?

<Grid.ColumnDefinitions>
        <ColumnDefinition Width=".24*"/>
        <ColumnDefinition Width=".73*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height=".9*"/>
        <RowDefinition Height=".1*"/>
    </Grid.RowDefinitions>
    <ListBox Grid.Column="0" Grid.Row="0" Name="Subdivisions" SelectedItem="{Binding SelectedSubdivisionViewModel}" ItemsSource="{Binding Path=Subdivisions}" Grid.IsSharedSizeScope="True">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <Border BorderBrush="#FF4788c8" BorderThickness="1,1,1,1" CornerRadius="8,8,8,8">
                        <Expander IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}">
                            <Expander.Header>
                                <StackPanel>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" SharedSizeGroup="col1" />
                                            <ColumnDefinition Width=".1*" SharedSizeGroup="col2" />
                                            <ColumnDefinition Width="*" SharedSizeGroup="col3" />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition/>
                                            <RowDefinition/>
                                        </Grid.RowDefinitions>
                                        <TextBlock Grid.Column="0" Grid.Row="0">
                                            <TextBlock.Text>
                                                <MultiBinding StringFormat="Name: {0}">
                                                  <Binding Path="SubdivisionName" />
                                                  <Binding Path="SubdivisionID" />
                                                </MultiBinding>
                                            </TextBlock.Text>
                                        </TextBlock>
                                        <TextBlock Grid.Column="2" Grid.Row="0">
                                            <TextBlock.Text>
                                                <MultiBinding StringFormat="ID: {0}">
                                                  <Binding Path="SubdivisionName" />
                                                  <Binding Path="SubdivisionID" />
                                                </MultiBinding>
                                            </TextBlock.Text>
                                        </TextBlock>
                                        <TextBlock Grid.Column="2" Grid.Row="1">
                                            <TextBlock.Text>
                                                <MultiBinding StringFormat="ID: {0}">
                                                  <Binding Path="SubdivisionName" />
                                                  <Binding Path="SubdivisionID" />
                                                </MultiBinding>
                                            </TextBlock.Text>
                                        </TextBlock>
                                    </Grid>
                                </StackPanel>
                            </Expander.Header>
                            <StackPanel>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition/>
                                        <ColumnDefinition/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition />
                                        <RowDefinition />
                                    </Grid.RowDefinitions>
                                    <TextBlock Text="{Binding ElementName=SubdivisionID}" />
                                    <TextBlock Text="{Binding Path=SubdivisionID}" />
                                </Grid>
                            </StackPanel>
                        </Expander>
                    </Border>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
3
  • What are you seeing instead? When I display this, the ListBox is 90% of the window height, which is what I expect to see in a row with <RowDefinition Height=".9*"/>.
    – Kimberly
    Mar 20, 2011 at 4:54
  • It would appear the first row is not honoring the 90% height definition.
    – alan
    Mar 20, 2011 at 15:59
  • In my case there was a style on the GroupBox in a resource-dictionary referenced by App.xaml. The VerticalAlignment was set to Top. I set the property locally to Stretch. This doesn't answer the question, but may help someone with a similar problem.
    – AMissico
    Oct 12, 2015 at 23:21

3 Answers 3

35

I was able to achieve the desired height by binding the ListBox height property to the ActualHeight of the LayoutRoot Grid via the XAML below:

<Grid x:Name="LayoutRoot" Background="LightGray">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width=".24*"/>
        <ColumnDefinition Width=".73*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height=".9*"/>
        <RowDefinition Height=".1*"/>
    </Grid.RowDefinitions>
    <ListBox Name="Subdivisions" SelectedItem="{Binding SelectedSubdivisionViewModel}" ItemsSource="{Binding Path=Subdivisions}" Grid.IsSharedSizeScope="True" Height="{Binding ElementName=LayoutRoot, Path=ActualHeight}" >

The important bit being:

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

Also achievable via ancestor type:

Height="{Binding Path=ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}"
1
  • If you want the height of the height of the ListBox to the same as the row, name the row something. Then, in the Binding, change ElementName to your name.
    – CAG2
    Nov 20, 2018 at 4:03
13

The stackpanels make it compress. Remove it and it'll fill the full height

2

The code you've posted does exactly what the parent grid's row height definition has declared: take up 90% of the available height.

*.1 = 10% of height
*.9 = 90% of the height

Often times its useful to remove the clutter from the xaml and start with something simple to help with the layout. Here's a sample with your code's Grid column/row definition's, but with less clutter and some background color to show the entire ListBox.

  • The first ListBox has several items, while the 2nd ListBox only has a few items.
  • Both ListBoxes are in the first row and fill 90% of the available space.
  • The 2nd Row contains a grid that fills the rest of the space; you can see that it takes up 10% of the available space.

Note that the first ListBox doesn't declare a Column or Row index; when no index is used, it is assumed to be 0, i.e., Grid.Row="0" Grid.Column=0.

<Grid Background="Red">

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width=".24*"/>
        <ColumnDefinition Width=".73*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height=".9*"/>
        <RowDefinition Height=".1*"/>
    </Grid.RowDefinitions>

    <ListBox Background="LightGray"
             ItemsSource="{x:Static Fonts.SystemFontFamilies}"/>

    <ListBox Grid.Column="1" Grid.Row="0" Background="LightSlateGray">
        <ListBoxItem>John</ListBoxItem>
        <ListBoxItem>Jane</ListBoxItem>
        <ListBoxItem>Fido</ListBoxItem>
    </ListBox>

    <Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Background="Tomato" />

</Grid>
3
  • I appreciate the attempt, but the reason it appears correct to you is because you've filled the left list with enough items to max out the declared 90% grid row height. I need it to stretch the entire height of the grid by 'even if the lists are empty'.
    – alan
    Mar 20, 2011 at 15:44
  • @alan - not at all. Take the first ListBox out and the 2nd ListBox will still fill the entire vertical space. Not sure why this is being down-voted. Mar 20, 2011 at 16:24
  • @alan - take my example, run it. Both ListBoxes expand to fill the entire height. Then take the first ListBox out of the XAML (the one bound to the fonts), run the example and the 2nd ListBox still fills the entire height. Mar 20, 2011 at 18:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.