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>
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}}}"