Can't get WPF Listview to collapse when expanders in the listview collapse

Question

I have a wpf ListView with two Expanders in it. When the expanders expand the listview makes room for the content. When they collapse the listview does not "take back" that extra space. I have set HorizontalAlignment and VerticalAlignment to Stretch everywhere. Is there a way to do this? The Details and Chart columns contain the expanders. See code below. Thanks.

Here at

<Window.Resources>
    
    <DataTemplate x:Key="StockPriceChangeCell">
        <StackPanel Orientation="Horizontal">
            <Label Name="stockPriceChangeValue" Foreground="{Binding StockPriceChangeColor}" Content="{Binding StockPriceChange}" Width="Auto"></Label>
        </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="DetailsCell">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Expander Header="Details..." BorderBrush="DarkBlue" Width="200" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Grid Name="stockDetailGrid" Background="Beige" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="False">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="96*" />
                        <RowDefinition Height="6*" />
                        <RowDefinition Height="96*" />
                        <RowDefinition Height="6*" />
                        <RowDefinition Height="96*" />
                        <RowDefinition Height="6*" />
                        <RowDefinition Height="96*" />
                        <RowDefinition Height="6*" />
                        <RowDefinition Height="96*" />
                        <RowDefinition Height="96*" />
                        <RowDefinition Height="96*" />
                        <RowDefinition Height="6*" />
                        <RowDefinition Height="96*" />
                        <RowDefinition Height="6*" />
                        <RowDefinition Height="96*" />
                        <RowDefinition Height="6*" />
                        <RowDefinition Height="96*" />
                        <RowDefinition Height="6*" />
                        <RowDefinition Height="96*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Row="0" Grid.Column="0" Name="previousClosePrompt" FontWeight="Bold" FontSize="12" Height="28" Width="Auto">Prev Close:</Label>
                    <Label Grid.Row="0" Grid.Column="1" Name="previousCloseValue" FontWeight="Bold" FontSize="12" Height="28" Width="Auto" Content="{Binding StockDetails.PreviousClose}"></Label>
                    <Separator Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Name="stockSeparator3" Margin="0,2" />
                    <Label Grid.Row="2" Grid.Column="0" Name="openPricePrompt" FontWeight="Bold" FontSize="12" Height="28">Open:</Label>
                    <Label Grid.Row="2" Grid.Column="1" Name="openPriceValue" FontWeight="Bold" FontSize="12" Height="28" Content="{Binding StockDetails.OpeningPrice}"></Label>
                    <Separator Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Name="stockSeparator5" Margin="0,2" />
                    <Label Grid.Row="4" Grid.Column="0" Name="yearlyTargetEstimatePrompt" FontWeight="Bold" FontSize="12" Height="28">1y Target Est:</Label>
                    <Label Grid.Row="4" Grid.Column="1" Name="yearlyTargetEstimateValue" FontWeight="Bold" FontSize="12" Height="28" Content="{Binding StockDetails.YearTargetEstimate}"></Label>
                    <Separator Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" Name="stockSeparator6" Margin="0,2" />
                    <Label Grid.Row="6" Grid.Column="0" Name="stockDaysRangePrompt" FontWeight="Bold" FontSize="12" Height="28">Day's Range:</Label>
                    <Label Grid.Row="6" Grid.Column="1" Name="stockDaysRangeValue" FontWeight="Bold" FontSize="12" Height="28" Content="{Binding StockDetails.DaysRange}"></Label>
                    <Separator Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="2" Name="stockSeparator7" Margin="0,2" />
                    <Label Grid.Row="8" Grid.Column="0" Name="stockYearsRangePrompt" FontWeight="Bold" FontSize="12" Height="28">52wk Range:</Label>
                    <Label Grid.Row="8" Grid.Column="1" Name="stockYearsRangeValue" FontWeight="Bold" FontSize="12" Height="28" Content="{Binding StockDetails.YearsRange}"></Label>
                    <Separator Grid.Row="9" Grid.Column="0" Grid.ColumnSpan="2" Name="stockSeparator8" Margin="0,2" />

                    <Label Grid.Row="10" Grid.Column="0" Name="averageVolumePrompt" FontWeight="Bold" FontSize="12" Height="28">Avg Vol (3m):</Label>
                    <Label Grid.Row="10" Grid.Column="1" Name="averageVolumeValue" FontWeight="Bold" FontSize="12" Height="28" Content="{Binding StockDetails.AverageVolume}"></Label>
                    <Separator Grid.Row="11" Grid.Column="0" Grid.ColumnSpan="2" Name="stockSeparator9" Margin="0,2" />
                    <Label Grid.Row="12" Grid.Column="0" Name="marketCapPrompt" FontWeight="Bold" FontSize="12" Height="28">Market Cap:</Label>
                    <Label Grid.Row="12" Grid.Column="1" Name="marketCapValue" FontWeight="Bold" FontSize="12" Height="28" Content="{Binding StockDetails.MarketCap}"></Label>
                    <Separator Grid.Row="13" Grid.Column="0" Grid.ColumnSpan="2" Name="stockSeparator10" Margin="0,2" />
                    <Label Grid.Row="14" Grid.Column="0" Name="priceEarningRatioPrompt" FontWeight="Bold" FontSize="12" Height="28">P/E (ttm):</Label>
                    <Label Grid.Row="14" Grid.Column="1" Name="priceEarningRatioValue" FontWeight="Bold" FontSize="12" Height="28" Content="{Binding StockDetails.PriceEarningsRatio}"></Label>
                    <Separator Grid.Row="15" Grid.Column="0" Grid.ColumnSpan="2" Name="stockSeparator11" Margin="0,2" />
                    <Label Grid.Row="16" Grid.Column="0" Name="earningsPerSharePrompt" FontWeight="Bold" FontSize="12" Height="28">EPS (ttm):</Label>
                    <Label Grid.Row="16" Grid.Column="1" Name="earningsPerShareValue" FontWeight="Bold" FontSize="12" Height="28" Content="{Binding StockDetails.EarningsPerShare}"></Label>
                    <Separator Grid.Row="17" Grid.Column="0" Grid.ColumnSpan="2" Name="stockSeparator12" Margin="0,2" />
                    <Label Grid.Row="18" Grid.Column="0" Name="dividendYieldPrompt" FontWeight="Bold" FontSize="12" Height="28">Div &amp; Yield:</Label>
                    <Label Grid.Row="18" Grid.Column="1" Name="dividendYieldValue" FontWeight="Bold" FontSize="12" Height="28" Content="{Binding StockDetails.DividendYield}"></Label>
                </Grid>
            </Expander>
        </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="ChartCell">
        <StackPanel>
            <Expander Header="Chart..." BorderBrush="DarkBlue" Width="200" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Image Name="stockGraph" Stretch="None" Source="{Binding StockChart}"/>
            </Expander>
        </StackPanel>
    </DataTemplate>
</Window.Resources>

Here is the listview:

<TabItem Name="myStocksTab" Header="My Stocks" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <StackPanel Name="myStocksTabContainerPanel" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Label Name="myStocksPrompt" Foreground="GhostWhite" Background="DarkBlue" FontSize="16" FontWeight="Bold">My Stocks</Label>
        <ListView Name="stocksUIList" ItemsSource="{Binding}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Action" CellTemplate="{StaticResource ButtonsCell}" Width="Auto"/>
                    <GridViewColumn Header="Company/Stock Symbol" Width="Auto" DisplayMemberBinding="{Binding CompanyName}"/>
                    <GridViewColumn Header="Last Trade" Width="Auto" DisplayMemberBinding="{Binding LastTrade}"/>
                    <GridViewColumn Header="Trade Time" Width="Auto" DisplayMemberBinding="{Binding StockDetails.TradeTime}"/>
                    <GridViewColumn Header="Change" CellTemplate="{StaticResource StockPriceChangeCell}"/>
                    <GridViewColumn Header="Volume" Width="Auto" DisplayMemberBinding="{Binding TradingVolume}"/>
                    <GridViewColumn Header="Details" CellTemplate="{StaticResource DetailsCell}" Width="215"/>
                    <GridViewColumn Header="Chart" CellTemplate="{StaticResource ChartCell}" Width="215"/>
                </GridView>
            </ListView.View>
        </ListView>
        <Button Name="addStock" FontSize="14" FontWeight="Bold" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Click="AddCompanyStock">Add Stock...</Button>
    </StackPanel>

Caracal

Answer 1

I know this is an older post, but I was looking for a solution to this problem and wanted to update it with my solution.

After some searching I was able to fix it by using the solution found here: ListView with nested Expander not collapsing

Basically I was using a ListView with Expanders in the Item Template. When collapsing the expander would not resize properly. Also when the expander content was larger than the ListView, the scroll would not work properly.

The fix was simply replacing ListView with ItemsControl and putting the ItemsControl inside a ScrollViewer.

Palaestra

Answer 2

It sounds like there may be a layout bug of sorts in the ListView. Have you tried calling InvalidateVisual() on the ListView in the Collapsed event of either of the expanders? That may do the trick.

Silden

Same problem, but InvalidateVisual() didn't seem to have an effect. – Slaphappy