Search code examples
c#xamllistviewwindows-store-appsstackpanel

Windows store app layout: ListView to fill remaining space


I would like to have Controls one above the other. One of them should be at the bottom, and there should be a ListView above it, which should fill all the available space left. I tried adding them to a StackPanel, with VerticalAlignment="Bottom", but then ListView is not scrollable, and doesn't care about the space it has left.

enter image description here


Solution

  • The StackPanel will format to fit its contents, giving the ListView infinite space and then tacking the other control after, likely outside of the visible bounds. Instead use a Grid and set the Row heights to match your design. Something like:

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <ListView Grid.Row="0"></ListView>
        <Button Grid.Row="1" />
    </Grid>
    

    Height="auto" means to calculate the height based on the contents. Height="*" means to use the remaining space (or if there are multiple *s then divide the remaining space up). See the remarks in the RowDefinition.Height docs for more details.