How to fill the page and adjust text position according to resize

Question

I'm new to xaml and Windows 10 Gui programming. I want to design a page with a TextBlock, a ListBox and a Button, all centered in the page. I want the TextBlock and the button always reside at the top and bottom of the page no matter how users resize the window. The ListBox should stretch itself to fill the gap between TextBlock and ListBox automatically. I have tried set VerticalAlignment to different value, but it doesn't seem to do anything.

<Page
x:Class="FirstWin10.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FirstWin10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Orientation="Vertical">
    <TextBlock x:Name="textBlock" HorizontalAlignment="Center" Margin="10,20,10,0" TextWrapping="Wrap" VerticalAlignment="Top">
        <Run Text="Unkown Screen Name"/>
        <LineBreak/>
        <Run/>
    </TextBlock>
    <ListBox x:Name="listBox" HorizontalAlignment="Center" MinWidth="450" MinHeight="178" Margin="50,20,50,0" VerticalAlignment="Stretch">
        <StackPanel Orientation="Horizontal">
            <CheckBox />
            <TextBox Text="ListBox Item #1" />
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <CheckBox />
            <TextBlock>
                <Run Text="ListBox Item #2"/>
            </TextBlock>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <CheckBox />
            <TextBlock>
                <Run Text="ListBox Item #3"/>
            </TextBlock>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <CheckBox />
            <TextBlock>
                <Run Text="ListBox Item #4"/>
            </TextBlock>
        </StackPanel>
    </ListBox>
    <Button x:Name="button" Content="Button" HorizontalAlignment="Center" Margin="10,20,10,0" VerticalAlignment="Bottom"/>
</StackPanel>

Justin XL Justin XL · Accepted Answer · 2015-09-30T01:49:21

Consider using a Grid with three rows. The first and last rows are auto stretched to the size of the TextBlock and Button; the middle row takes the rest of the space.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" HorizontalAlignment="Center" /> <!-- Grid.Row="0" can be removed as it's the default -->
    <ListBox Grid.Row="1" HorizontalAlignment="Center" />
    <Button Grid.Row="2" HorizontalAlignment="Center" />
</Grid>

How to fill the page and adjust text position according to resize

1 Answers