Need UI alignment help with WPF

Question

In my WPF application (XAML posted below), I have a List View and below that I have some labels and text boxes. Everything below the ListView should anchor to the bottom of the window. Everything above the ListView needs to anchor to the top of the window. The ListView itself needs to expand vertically to fill in the space between. When I resize my window vertically, the only thing that should be changing size is the list view.

I keep everything in a stack panel at the root, but it doesn't size the listview like I want. Anyone know how I can accomplish this? I'm using C# .NET 4.0 and VS2010.

<Window x:Class="TaskManager.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" MinWidth="525" MinHeight="400">
    <StackPanel Orientation="Vertical">
        <Menu Name="mainMenu" Margin="0,0,0,5">
            <MenuItem Header="File">
                <MenuItem Header="Quit" />
            </MenuItem>
        </Menu>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,0,0,5">
            <Label>View tasks for user:</Label>
            <ComboBox Name="userList" MinWidth="150"></ComboBox>
        </StackPanel>
        <ListView Name="taskView" VerticalContentAlignment="Stretch">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Task" Width="300"/>
                    <GridViewColumn Header="Hours" Width="50"/>
                </GridView>
            </ListView.View>
        </ListView>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="353*" />
                <ColumnDefinition Width="97*" />
                <ColumnDefinition Width="53" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Label Grid.Row="0" Grid.Column="0">Task Description</Label>
            <TextBox Grid.Row="1" Grid.Column="0"/>
            <Label Grid.Row="0" Grid.Column="1">Hours</Label>
            <TextBox Grid.Row="1" Grid.Column="1"/>
            <Button Grid.Row="1" Grid.Column="2">Add</Button>
        </Grid>
    </StackPanel>
</Window>

Answer 1

This can be done using a Grid with 4 row definitions. All rows should have the height set to "Auto" except the one you want to expand, which should be set to "*"

<Window x:Class="TaskManager.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" MinWidth="525" MinHeight="400">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Menu Grid.Row="0"  Name="mainMenu" Margin="0,0,0,5">
            <MenuItem Header="File">
                <MenuItem Header="Quit" />
            </MenuItem>
        </Menu>
        <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,0,0,5">
            <Label>View tasks for user:</Label>
            <ComboBox Name="userList" MinWidth="150"></ComboBox>
        </StackPanel>
        <ListView Grid.Row="2" Name="taskView" VerticalContentAlignment="Stretch">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Task" Width="300"/>
                    <GridViewColumn Header="Hours" Width="50"/>
                </GridView>
            </ListView.View>
        </ListView>
        <Grid Grid.Row="3">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="353*" />
                <ColumnDefinition Width="97*" />
                <ColumnDefinition Width="53" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Label Grid.Row="0" Grid.Column="0">Task Description</Label>
            <TextBox Grid.Row="1" Grid.Column="0"/>
            <Label Grid.Row="0" Grid.Column="1">Hours</Label>
            <TextBox Grid.Row="1" Grid.Column="1"/>
            <Button Grid.Row="1" Grid.Column="2">Add</Button>
        </Grid>
    </Grid>
</Window>

Answer 2

It sounds like the DockPanel would help you to get the desired result. In the DockPanel, you can dock parts of your view to the top, bottom, left or right of the window. The last element added always covers the rest of the window. I modified your StackPanel code below.

<DockPanel>
    <Menu DockPanel.Dock="Top" Name="mainMenu" Margin="0,0,0,5">
        <MenuItem Header="File">
            <MenuItem Header="Quit" />
        </MenuItem>
    </Menu>
    <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,0,0,5">
        <Label>View tasks for user:</Label>
        <ComboBox Name="userList" MinWidth="150"></ComboBox>
    </StackPanel>
    <Grid DockPanel.Dock="Bottom">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="353*" />
            <ColumnDefinition Width="97*" />
            <ColumnDefinition Width="53" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Label Grid.Row="0" Grid.Column="0">Task Description</Label>
        <TextBox Grid.Row="1" Grid.Column="0"/>
        <Label Grid.Row="0" Grid.Column="1">Hours</Label>
        <TextBox Grid.Row="1" Grid.Column="1"/>
        <Button Grid.Row="1" Grid.Column="2">Add</Button>
    </Grid>
    <ListView Name="taskView" VerticalContentAlignment="Stretch">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="Task" Width="300"/>
                <GridViewColumn Header="Hours" Width="50"/>
            </GridView>
        </ListView.View>
    </ListView>
</DockPanel>