How to make a ListView inside a grid in WPF fill the whole screen, even when resized

Question

I have a control which is a grid where the first row contains some buttons, with fixed height, and the second (and last) row contains a ListView. Then I have a main screen which contains only a menu and this user control above. I would like to have the size of the ListView as the maximum for the window, which means that if the window is maximized the ListView will be large, in case the window is smaller, so is the ListView (with vertical scroll to help navigating through items).

This is how I am doing it: Window:

<Window x:Class="TestUI.MainView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Width="auto" Height="auto"
    MinHeight="300" MinWidth="300"
    Title="Test"
    DataContext="{Binding MainViewModel, Source={StaticResource Locator}}" >

<StackPanel Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
    <DockPanel>
        <Menu DockPanel.Dock="Top" >
            <MenuItem Header="Item 1" Command="{Binding Command1}"/>
            <MenuItem Header="Item 2" Command="{Binding Command2}"/>
            <MenuItem Header="Item 3" Command="{Binding Command3}"/>
        </Menu>
    </DockPanel>
    <DockPanel LastChildFill="True">
        <ScrollViewer Content="{Binding Content}" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled" DockPanel.Dock="Bottom" />
    </DockPanel>
</StackPanel>
</Window>

User Control:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="35" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Margin="5, 5, 5, 5" Orientation="Horizontal">
        <Button Content="New" Width="60" Command="{Binding NewCommand}"/>
        <Button Content="Remove" Width="60" Margin="10, 0, 0, 0" Command="{Binding RemoveCommand}" />
    </StackPanel>
    <DockPanel Grid.Row="1" Margin="5,5,5,5" LastChildFill="True" HorizontalAlignment="Stretch">
        <ListView x:Name="ListView" SelectionMode="Single" DockPanel.Dock="Top" ItemsSource="{Binding Entities}" SelectedItem="{Binding SelectedEntity}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" VerticalAlignment="Stretch">
            <ListView.View>
                <GridView>
                    <GridViewColumn Width="auto" Header="Product" DisplayMemberBinding="{Binding Description}"/>
                </GridView>
            </ListView.View>
        </ListView>
    </DockPanel>
</Grid>

Could you please help me?

Thank you!

Answer 1

I've just inspected your User Control and the Listview docking is working just fine. You can verify layout in the designer by using background colours. Setting the listview's background to blue shows it is using the available space.

I believe the problem is with the layout in your main form, specifically the Stackpanel. These are notorious for layout issues, and from what I can tell you don't need it. use the DockPanel as the high-level container rather than multiple dock panels. (This is what they're for)

<DockPanel>
    <Menu DockPanel.Dock="Top" >
        <MenuItem Header="Item 1" Command="{Binding Command1}"/>
        <MenuItem Header="Item 2" Command="{Binding Command2}"/>
        <MenuItem Header="Item 3" Command="{Binding Command3}"/>
    </Menu>
    <ScrollViewer Content="{Binding Content}" VerticalScrollBarVisibility="Disabled"
         HorizontalScrollBarVisibility="Disabled" DockPanel.Dock="Fill" />
</DockPanel>

This will put your menu at the top of the panel, and let your scroll viewer containing the user control (assumed) use up the remaining available space.

Stack-panels are only good for arranging items within an area. If you want to use layout to allocate available space, use DockPanels or Grids.

Answer 2

Hi remove Width="Auto" from GridviewColumn. I hope this will help