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

Question

我有一个用户控件，其下方有一个文本框和 2 个按钮。当父窗口垂直拉伸但没有任何反应时，我希望文本框垂直拉伸。另一个问题是，当用户控件被放入窗口时，按钮会在文本框下方出现。但是当我不在窗口中查看用户控件时，按钮被 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>