WPF - 使一个控件垂直拉伸

Question

我是 WPF/XAML 的新手，几个小时后，我得到了一个除了一件事之外还可以展示的 GUI。我让控件随窗口水平调整大小，但我无法弄清楚我在垂直方向上做同样的事情时缺少什么。我只希望 DataGrid 控件垂直拉伸。 Datagrid 控件没有得到提示。我错过了什么？

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
MinHeight="480"
MinWidth="660"
Width="660"
Height="480"
Title="Windows Title">
<Grid Margin="0,0,-0.2,0.2">

    <StackPanel Orientation="Vertical">
        <DataGrid
            x:Name="dataGrid"
            Width="Auto"
            Height="Auto"
            MinHeight="300"
            Grid.Row="0"
            HorizontalAlignment="Stretch"
            Margin="10,10,10,0"
            VerticalAlignment="Stretch"
            IsReadOnly="True"
            TextBlock.FontSize="16"/>
        <TextBox
        x:Name="Interpretation"
            Height="100"
            MinHeight="100"
            Width="Auto"
            HorizontalAlignment="Stretch"
            Margin="10,10,10,0"
            IsReadOnly="True"
            Text="Interpretation of Results"
            TextAlignment="left"
            TextBlock.FontSize="20"
            TextWrapping="Wrap"/>
    </StackPanel>
</Grid>
</Window>

添加了控件和 cmets 的解决方案

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="600"
    MinHeight="600"
    MinWidth="660"
    Width="660"
    Title="Windows Title">
    <Grid>
        <Grid.RowDefinitions>
    <!--                    Height="Auto" -> Fill space required by content -->
    <!--                    Height="*" -> Fill all space not taken up by other rows (The one that will stretch) -->
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
    <!-- using HorizontalAlignment="Stretch" or Width="Auto" in the controls is redundant -->
    <!-- Don't forget to add Grid.Row="#" properties in each control/row below -->
        <TextBox
            MinHeight="25"
            Grid.Row="0"
            HorizontalAlignment="Stretch"
            Margin="10,10,10,0"
            Background="#FF98D6EB"
            Foreground="White"
            IsReadOnly="True"
            Text="Results"
            TextAlignment="Center"
            TextBlock.FontSize="20"
            TextWrapping="Wrap"/>
        <DataGrid
            x:Name="dataGrid"
            MinHeight="200"
            Grid.Row="1"
            Margin="10,10,10,0"
            IsReadOnly="True"
            TextBlock.FontSize="16"/>
        <TextBox
            x:Name="Interpretation"
            MinHeight="100"
            Grid.Row="2"
            Margin="10,10,10,0"
            Background="#FF98D6EB"
            IsReadOnly="True"
            Text="Interpretation of Results"
            TextAlignment="left"
            TextBlock.FontSize="20"
            TextWrapping="Wrap"/>
    <!-- UniformGrid speads the buttons size evenly with resizing of the window -->
    <!-- HorizontalAlignment="Stretch" is redundant -->
    <!-- notice the Grid.Row="3" is a property of <UniformGrid> and not the controls within it-->
        <UniformGrid
            Height="100"
            Grid.Row="3"
            Columns="2"
            Rows="1">
            <Button
                Name="btnContinue"
                MinWidth="250"
                Margin="10"
                Content="Continue"
                TextBlock.FontSize="50"
                TextBlock.FontWeight="Bold"/>
            <Button
                Name="btnCancel"
                MinWidth="250"
                Margin="10"
                Content="Cancel"
                TextBlock.FontSize="50"
                TextBlock.FontWeight="Bold"/>
        </UniformGrid>
    </Grid>
</Window>

Answer 1

一个 Grid 将扩展以填充其父级。如果您不再添加任何内容，您可以在窗口中使用根级网格。

要将两个控件放在一个网格中，一个在另一个之上，定义行，不要忽略将Grid.Row="..." 属性添加到子控件以确定它们将位于哪些网格行中，否则它们将相互叠加。

    <Grid Margin="0,0,-0.2,0.2">
        <Grid.RowDefinitions>
            <!-- Height="*" -> Fill all space not taken up by other rows -->
            <RowDefinition Height="*" />
            <!-- Height="Auto" -> Fill space required by content -->
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <DataGrid
            Grid.Row="0"
            x:Name="dataGrid"
            Margin="10,10,10,0"
            IsReadOnly="True"
            TextBlock.FontSize="16"
            />
        <TextBox
            Grid.Row="1"
            x:Name="Interpretation"
            Height="100"
            MinHeight="100"
            Margin="10,10,10,0"
            IsReadOnly="True"
            Text="Interpretation of Results"
            TextAlignment="left"
            TextBlock.FontSize="20"
            TextWrapping="Wrap"
            />
    </Grid>

如果您有一系列相邻的自动调整大小的子级，则将一行设为 StackPanel 会更简单：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

   <DataGrid 
        Grid.Row="0" 
        ... 
        />

    <StackPanel 
        Grid.Row="1" 
        Orientation="Vertical"
        >
        <Label>Stuff</Label>
        <TextBox ... />
        <Label>More Stuff</Label>
        <TextBox ... />
    </StackPanel>
</Grid>

Answer 2

你把它放在一个堆栈面板中。

堆栈面板只会增长到其内容所需的大小，您应该使用 Grid 代替，网格及其单元格将填充其容器。