Auto size stackpanel to parent height with List views inside with scrollview

Question

i'm a newbie in wpf and i'm trying to create two expanders that contains listview on each expander, in the header i created a searchtext box and works ok. The problem is that i cant create scrollview to the two expanders and fit the stackpanel height to the parent control. How can i create scrollview to the list views without the textbox?

Code:

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

StackPanels have a tendency to be a bit evil for layout purposes. Generally speaking it's easier in the long run just to use a Grid. Would that be possible within the parent structure of your first StackPanel? — goobering
Sorry, that was poorly worded. Remove the stackpanels altogether and replace them with single column grids, each item contained in its own row. Then you have much better options for setting individual heights and widths, rather than letting the stackpanels do whatever the hell they want. — goobering

goobering goobering · Accepted Answer · 2015-04-06T19:36:38

Per comments on the question this is probably a little easier done with Grids rather than 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>

There were also a few redundant markup elements I've pulled. You want to try and avoid that as much as possible as it can play havoc with deeply nested elements. The 'Grid.Row' element here is redundant as it's inside a StackPanel:

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

Auto size stackpanel to parent height with List views inside with scrollview

1 Answers