WPF 拉伸列表框高度为 Grid.Row 的 100%？

WPF Stretch ListBox Height 100% of Grid.Row?

提问by alan

I'm attempting to stretch the height of a ListBox100% of the height of the parent grid (i.e. 90% of the height of the parent view); even if the listboxesare empty. I should note that VerticalAlignment="Stretch"doesn't seem to work, so I've removed it from the ListBoxand StackPanelelements. As of now, the ListBoxonly 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?

我试图拉伸ListBox父网格高度的100%（即父视图高度的 90%）；即使listboxes是空的。我应该注意到这VerticalAlignment="Stretch"似乎不起作用，因此我已将其从ListBox和StackPanel元素中删除。截至目前，ListBox唯一的延伸范围是为了容纳它包含的项目数量。我知道行定义应该有效，但如果两个列表都是空的，它们都会缩小到几个像素高（以及网格行）。尽管有明确的高度声明，是否会导致这些行缩小？

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

回答by alan

I was able to achieve the desired height by binding the ListBoxheight property to the ActualHeightof the LayoutRoot Gridvia the XAML below:

通过下面的 XAML将ListBoxheight 属性绑定到ActualHeightLayoutRoot的，我能够实现所需的高度Grid：

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

回答by Tjeerd Mulder

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

堆栈面板使其压缩。删除它，它会填满整个高度

回答by Metro Smurf

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

您发布的代码完全符合父网格的行高定义所声明的内容：占用可用高度的 90%。

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

*.1 = 高度的 10%
*.9 =高度的90%

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.

很多时候，从 xaml 中消除混乱并从一些简单的东西开始有助于布局是很有用的。这是一个示例，其中包含您的代码的 Grid 列/行定义，但不那么混乱，并且使用一些背景颜色来显示整个 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.

• 第一个 ListBox 有几个项目，而第二个 ListBox 只有几个项目。
• 两个列表框都在第一行并填充了 90% 的可用空间。
• 第二行包含一个填充其余空间的网格；您可以看到它占用了可用空间的 10%。

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.

请注意，第一个 ListBox 没有声明 Column 或 Row 索引；当不使用索引时，假定为 0，即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>