如何根据调整大小填充页面并调整文本位置

Question

我是 xaml 和 Windows 10 Gui 编程的新手。我想设计一个页面，其中包含一个 TextBlock、一个 ListBox 和一个 Button，所有这些都位于页面的中心。我希望 TextBlock 和按钮始终位于页面的顶部和底部，无论用户如何调整 window 的大小。 ListBox 应自行拉伸以自动填充 TextBlock 和 ListBox 之间的间隙。我已经尝试将 VerticalAlignment 设置为不同的值，但它似乎没有任何作用。

<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>

Answer 1

考虑使用三行的 Grid。第一行和最后一行自动拉伸到 TextBlock 和 Button 的大小；中间一行占据 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

windows

xaml

uwp