CODEWITHSUNDEEP
listviewwpf-controlsstackpanelexpanderapp.xaml
Roland
Roland

Reputation: 5234

What is the difference between a ListView and a StackPanel in WPF XAML?

I am stuck in a problem with showing a number of child elements, with horizontal problems when using a ListView, or vertical problems when using a StackPanel. Perhaps I should use another collection control?

The stuff to show is a set of items, each of which has an Expander and a DataGrid. The Expander shows the category name of the data in the DataGrid, and has a button to hide or show the DataGrid. Normally, we show all DataGrids in full, but the user may hide some DataGrids if (s)he finds that convenient.

In the below screenshot we see the StackPanel with two such items: Beverages and Vegetables, and below that, the same items in a ListView.

The StackPanel works fine horizontally: the DataGrid columns adjust nicely to the screen width using asterisk for column width. However, vertically, if we expand the upper Expander, then it expands over the next item, covering the Vegetables, and making them invisible.

The ListView results in the opposite: horizontally it has the problem that the asterisk is not honored, a new, empty third column appears, taking so much width that the two real columns are way to narrow. And we need that asterisk, because giving the columns a fixed width is not an option because the screen can be resized smaller and bigger. And vertically, it works just the way it should, and better than the StackPanel.

screenshot

Here is the essential part of the code for the UserControl for use inside the StackPanel or ListView:

<UserControl x:Class="Project1.Views.ExpanderDatagrid" ... >
    <Expander Name="MyExpander" 
        IsExpanded="True" 
        Expanded="MyExpander_Expanded" 
        Collapsed="MyExpander_Collapsed">
        <StackPanel Name="MyPanel">
            <DataGrid Name="MyDataGrid"
                    HorizontalAlignment="Stretch"
                    AutoGenerateColumns="False"
                    ColumnWidth="*"
                    Height="300">
                <DataGrid.Columns>
                    <DataGridTextColumn x:Name="MyColumnLeft" Header="Name" Binding="..." />
                    <DataGridTextColumn x:Name="MyColumnRight" Header="Value" Binding="..." />
                </DataGrid.Columns>
            </DataGrid>
        </StackPanel>
    </Expander>
</UserControl>

The above UserControl is connected in code-behind to both the StackPanel and ListView in this XAML:

<StackPanel Name="MyPanelForListOfDatagrids" 
    Height="200" 
    HorizontalAlignment="Stretch" 
    Background="Green">
</StackPanel>
<ListView Name="TheListView">
</ListView>

Yes, I did fiddle with setting MyExpander.Height in the Expanded and Collapsed events of the Expander, but this did not push the next control down to prevent the overlap.

So my question is about the real difference between ListView and StackPanel, as both can show a set of items, but each with different problems, and how to combine the correct horizontal behaviour of the StackPanel with the correct vertical behaviour of the ListView. Or is there another control that I should try?

Upvotes: 0

Views: 41

Answers (1)

Roland
Roland

Reputation: 5234

Part of my problem was setting the Height of the StackPanel. After removing that, the StackPanel worked just as expected: the Expander when expanded did not cover other content anymore.

This is no fix for the ListView problem with the extra column in its DataGrid content, but now I can work on replacing the ListView in my project by a StackPanel.

Upvotes: 0

Related Questions