WPF - 使一个控件垂直拉伸

时间:2017-09-25 17:41:59

标签: wpf xaml autolayout autoresize window-resize

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

使用ADDED控件和评论的解决方案

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

2 个答案:

答案 0 :(得分:3)

网格将扩展以填充其父级。如果您不想添加更多内容,则可以在窗口中使用根级网格。

要将两个控件放在一个在另一个上面的网格中,请定义行,不要忽略将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>

答案 1 :(得分:1)

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

Stackpanels只能增长到内容需要的大小,你应该使用Grid,网格和它们的单元格将填充它们的容器。