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

Question

我试图将 ListBox 的高度拉伸为父网格高度的 100%（即父视图高度的 90%）；即使列表框为空。我应该注意到，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>

Answer 1

我能够通过下面的 XAML 将 ListBox height 属性绑定到 LayoutRoot Grid 的 ActualHeight 来实现所需的高度

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

：存在：

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

也可以通过祖先类型实现：

Height="{Binding Path=ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}"

Answer 2

堆栈面板使其压缩。去掉它，它就会填满整个高度

Answer 3

您发布的代码完全执行父网格的行高定义所声明的操作：占据可用高度的 90%。

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

通常，从 xaml 中消除混乱并从简单的内容开始有助于布局很有用。下面是一个示例，其中包含代码的网格列/行定义，但更简洁，并使用一些背景颜色来显示整个列表框。

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

请注意，第一个列表框没有声明列或行索引；当不使用索引时，假定为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>