如何在拉伸其父窗口时垂直拉伸WPF用户控件及其组件

Question

我有一个带有文本框和下面两个按钮的用户控件。当父窗口垂直拉伸但什么也没发生时，我希望文本框垂直拉伸。另一个问题是，当用户控件置于窗口中时，按钮在文本框下显得很乱。但是，当我不在窗口中查看用户控件时，按钮之间用1个网格行隔开。我如何才能使其正常工作，以便在垂直拉伸父窗口时使文本框增大，并使底部的按钮远离文本框？

这是使用用户控件的窗口的xaml代码：

<Window x:Class="SerialNumTool.Views.test2View"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SerialNumTool.UserControls"
        mc:Ignorable="d"
        Title="test2View" Height="300" Width="300"
        VerticalAlignment="Stretch">
    <Grid Margin="0,0,0,0"  Background="Cyan" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=".5*"/>
            <ColumnDefinition Width=".5*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height=".20*"/>
            <RowDefinition Height=".20*"/>
            <RowDefinition Height=".20*"/>
            <RowDefinition Height=".20*"/>
            <RowDefinition Height=".20*"/>

        </Grid.RowDefinitions>
        <StackPanel Name="MainContentAreaStackPanel" Margin="0" VerticalAlignment="Stretch" 
                    HorizontalAlignment="Stretch"
                    Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Grid.ColumnSpan="2">
            <local:UserControl2  VerticalAlignment="Stretch" 
                                 HorizontalAlignment="Stretch">
            </local:UserControl2>
        </StackPanel>


    </Grid>
</Window>

这是用户控制代码：

<UserControl x:Class="SerialNumTool.UserControls.UserControl2"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:SerialNumTool.UserControls"
             mc:Ignorable="d" 
             d:DesignHeight="150" d:DesignWidth="200"
             VerticalAlignment="Stretch">
    <Grid Margin="0,0,0,0"  Background="Beige" >
        <Grid.ColumnDefinitions>
                <ColumnDefinition Width=".5*"/>
                <ColumnDefinition Width=".5*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height=".20*"/>
                <RowDefinition Height=".20*"/>
                <RowDefinition Height=".20*"/>
                <RowDefinition Height=".20*"/>
                <RowDefinition Height=".20*"/>
        </Grid.RowDefinitions>
        <StackPanel Background="Green" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="2">
        <TextBox x:Name="TextOutputAreaTextBox" 
                      HorizontalAlignment="Stretch" Margin="5"  
                      VerticalAlignment="Stretch" AcceptsReturn="True"
                      VerticalScrollBarVisibility="Auto"
                      TextWrapping="Wrap" />

        </StackPanel>
        <StackPanel Orientation="Horizontal" Background="Green" Grid.Column="0" Grid.ColumnSpan="2" 
                    Margin="0,0,0,0" Grid.Row="4" Grid.RowSpan="1" HorizontalAlignment="Stretch" >

            <Button Content="Operation 2" Margin="5"></Button>
            <Button Content="Operation 3" Margin="5"></Button>
        </StackPanel>

    </Grid>
</UserControl>

谢谢。

Answer 1

仅使用网格即可大大简化标记。

您似乎误解了* gridmeasure的工作方式。

我认为下面的标记可以实现您要实现的目标。 当您将大多数控件放在网格（单元）中时，它们将扩展以占据所有可用空间。这就是您想要的，所以您只需要网格和单元格即可。

*不是您使用它时实际高度的抽象度量。 您有一个跨两行的控件。 我通过将行之一设为2 *高度来简化了这一过程。 如果您想要在其旁边的右列中包含两个控件，那么您当然可能需要5行。但是你没有那个。

    xmlns:local="clr-namespace:wpf_99"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525"
    >
    <Grid Background="Cyan" >
        <local:UserControl2/>
    </Grid>
</Window>

和

         d:DesignHeight="450" d:DesignWidth="800">
<Grid Background="Beige" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBox x:Name="TextOutputAreaTextBox" 
                HorizontalAlignment="Stretch" 
                Margin="5"  
                VerticalAlignment="Stretch" 
                AcceptsReturn="True"
                VerticalScrollBarVisibility="Auto"
                TextWrapping="Wrap" />

        <Button Content="Operation 2" Margin="5" Grid.Row="4"></Button>
        <Button Content="Operation 3" Margin="5" Grid.Row="4" Grid.Column="1"></Button>
    </Grid>
</UserControl>

Answer 2

Henk Holterman的注释删除了文本周围的StackPanel，从而解决了该问题。在StackPanel中时，该文本框不会在用户控件的内部或外部垂直延伸。我必须删除用户控件以及使用该用户控件的窗口中文本框周围的StackPanel。下面是一个工作示例的代码更新：

已删除StackPanel的用户控件：

<UserControl x:Class="SerialNumTool.UserControls.UserControl2"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:SerialNumTool.UserControls"
             mc:Ignorable="d" 
             d:DesignHeight="150" d:DesignWidth="200"
             VerticalAlignment="Stretch">
    <Grid Margin="0,0,0,0"  Background="Beige" >
        <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>
        <TextBox x:Name="TextOutputAreaTextBox" Grid.Column="0" Grid.Row="1" 
                      HorizontalAlignment="Stretch" Margin="5"  
                      VerticalAlignment="Stretch"  VerticalContentAlignment="Stretch"
                      AcceptsReturn="True"
                      VerticalScrollBarVisibility="Auto"
                      TextWrapping="Wrap" />
        <StackPanel Orientation="Horizontal" Background="Green" Grid.Column="0" Grid.ColumnSpan="2" 
                    Margin="0,0,0,0" Grid.Row="4" Grid.RowSpan="1" HorizontalAlignment="Stretch" >

            <Button Content="Operation 2" Margin="5"></Button>
            <Button Content="Operation 3" Margin="5"></Button>
        </StackPanel>
    </Grid>
</UserControl>

这是使用用户控件的窗口：

<Window x:Class="SerialNumTool.Views.test2View"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SerialNumTool.UserControls"
        mc:Ignorable="d"
        Title="test2View" Height="300" Width="300"
        VerticalAlignment="Stretch">
    <Grid Margin="0,0,0,0"  Background="Cyan" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=".5*"/>
            <ColumnDefinition Width=".5*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height=".20*"/>
            <RowDefinition Height=".20*"/>
            <RowDefinition Height=".20*"/>
            <RowDefinition Height=".20*"/>
            <RowDefinition Height=".20*"/>

        </Grid.RowDefinitions>
        <local:UserControl2  VerticalAlignment="Stretch" 
                             HorizontalAlignment="Stretch"
                             Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Grid.ColumnSpan="2">
        </local:UserControl2>
    </Grid>
</Window>