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

Question

I have a user control with a text box and 2 buttons below it. I want the text box to stretch vertically when the parent window stretches vertically but nothing happens. Another problem is that the buttons appear bunched up under the text box when the user control is put into a window. But when I view the user control while not in a window the buttons are separated by 1 grid row. How can I get this to work properly so the text box increases in size when the parent window is stretched vertically and also have the buttons at the bottom stay away from the text box?

Here is the xaml code for the window that uses the user control:

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

Here is the user control code:

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

Thanks in advance.

Answer 1

You can greatly simplify your markup by using just grids.

You seem to have misunderstood the way the * gridmeasure works.

I think the markup below does what you're trying to achieve. When you put most controls in a grid(cell) they will expand to take up all the space available. That's what you want here so all you want is grids and cells.

The * is not an abstracted measure of the actual height in the way you are using it. You had a control spanning two rows. I simplified that by making one of the rows 2* height. If you wanted two controls in the right column next to it then you would of course probably want 5 rows. But you don't have that.

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

and

         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's comment to remove the StackPanel around the text solves the problem. The textbox would not vertically stretch in or outside a user control while inside a StackPanel. I had to remove the StackPanel around the textbox in the user control as well as in the window that used the user control. Below are the code updates for a working sample:

The User Control with StackPanel removed:

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

Here is the window that used the user control:

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