使用滚动视图将堆栈面板自动调整为父高度，其中包含列表视图答案

【问题标题】：Auto size stackpanel to parent height with List views inside with scrollview使用滚动视图将堆栈面板自动调整为父高度，其中包含列表视图
【发布时间】：2015-04-06 17:22:54
【问题描述】：

我是 wpf 的新手，我正在尝试创建两个扩展器，每个扩展器上都包含列表视图，在标题中我创建了一个搜索文本框并且工作正常。问题是我无法为两个扩展器创建滚动视图并将堆栈面板高度适合父控件。如何在没有文本框的情况下为列表视图创建滚动视图？

代码：

  <StackPanel Orientation="Vertical">
    <TextBox Margin="3,3,3,3" FontSize="16" Height="25" Name="searchTextBox" TextChanged="SearchTextBox_OnTextChanged" Grid.Row="0"></TextBox>
    <Border CornerRadius="6" BorderBrush="Gray" BorderThickness="1" DockPanel.Dock="Top" Grid.Row="1">
        <StackPanel Orientation="Vertical">
            <Expander IsExpanded="True" Background="LightGray" Grid.Row="0" >
                <Expander.Header>
                        <TextBlock Text="A" FontWeight="Bold" Foreground="Gray" FontSize="22" VerticalAlignment="Bottom" />
                </Expander.Header>
                <Expander.Content>
                    <ListView Name="RecentEngines" BorderThickness="0" >
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Expander.Content>
            </Expander>

            <Expander IsExpanded="True" Background="LightGray" Grid.Row="1">
                <Expander.Header>
                    <TextBlock Text="B" FontWeight="Bold" Foreground="Gray" FontSize="22" VerticalAlignment="Bottom" />
                </Expander.Header>
                <Expander.Content>

                    <ListView Name="Engines" BorderThickness="0" MaxHeight="300">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>

                </Expander.Content>
            </Expander>

        </StackPanel>
    </Border>

</StackPanel>

【问题讨论】：

StackPanel 出于布局目的而倾向于有点邪恶。一般来说，从长远来看，使用 Grid 会更容易。这在您的第一个 StackPanel 的父结构中是否可行？
你的意思是用网格包裹外部堆栈面板？
抱歉，措辞不当。完全移除堆栈面板并用单列网格替换它们，每个项目包含在自己的行中。然后你有更好的选择来设置单独的高度和宽度，而不是让堆栈面板做他们想做的任何事情。

标签： wpf xaml listview scrollview expander

【解决方案1】：

对于这个问题，使用 Grids 而不是 StackPanels 可能更容易完成。

<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBox Name="searchTextBox"
            Grid.Row="0"
            Height="25"
            Margin="3,3,3,3"
            FontSize="16" />
    <Border Grid.Row="1"
        BorderBrush="Gray"
        BorderThickness="1"
        CornerRadius="6">
        <ScrollViewer Height="300">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Expander Grid.Row="0"
                        Background="LightGray"
                        IsExpanded="True">
                    <Expander.Header>
                        <TextBlock VerticalAlignment="Bottom"
                                FontSize="22"
                                FontWeight="Bold"
                                Foreground="Gray"
                                Text="A" />
                    </Expander.Header>
                    <Expander.Content>
                        <ListView Name="RecentEngines" BorderThickness="0">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock FontWeight="Bold" Text="{Binding Name}" />
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </Expander.Content>
                </Expander>

                <Expander Grid.Row="1"
                        Background="LightGray"
                        IsExpanded="True">
                    <Expander.Header>
                        <TextBlock VerticalAlignment="Bottom"
                                FontSize="22"
                                FontWeight="Bold"
                                Foreground="Gray"
                                Text="B" />
                    </Expander.Header>
                    <Expander.Content>
                        <ListView Name="Engines"
                                MaxHeight="300"
                                BorderThickness="0">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock FontWeight="Bold" Text="{Binding Name}" />
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>

                    </Expander.Content>
                </Expander>

            </Grid>
        </ScrollViewer>
    </Border>
</Grid>

我还提取了一些多余的标记元素。你想尽可能地避免这种情况，因为它可能会对深度嵌套的元素造成严重破坏。这里的 'Grid.Row' 元素是多余的，因为它位于 StackPanel 中：

<Expander IsExpanded="True" Background="LightGray" Grid.Row="0" >

【讨论】：