当 TextBox 高度自动增长时，使内容自动下推

Question

我有一个文本框，它的高度设置为Auto，允许文本换行并接受返回键。

目前，当文本框展开时，它会超出其他控件的顶部，在本例中是提交和取消按钮。我想要增长的文本框称为txtAddress，它的提交和取消按钮应该随着文本框的增长而被推开。

下面是我的 WPF

<Window x:Class="MyProject.AddContact"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Add Contact" Height="310" Width="378" WindowStartupLocation="CenterScreen">
    <Grid>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="12,12,0,0" Name="txtName" VerticalAlignment="Top" Width="266" Foreground="#FFB3B3B3" Text="Contact Name" HorizontalContentAlignment="Left" VerticalContentAlignment="Center" />
        <Image Height="53" HorizontalAlignment="Left" Margin="284,12,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="60" Source="/BoardiesSMSServer;component/images/no-contact-image.png" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="12,71,0,0" Name="txtPhoneNumber" VerticalAlignment="Top" Width="170" Text="Phone Number" Foreground="#FFB3B3B3" VerticalContentAlignment="Center" />
        <ComboBox Height="23" HorizontalAlignment="Left" Margin="188,71,0,0" Name="comboBox1" VerticalAlignment="Top" Width="90">
            <ComboBoxItem Content="Home" IsSelected="True" />
            <ComboBoxItem Content="Work" />
            <ComboBoxItem Content="Work Fax" />
            <ComboBoxItem Content="Home Fax" />
            <ComboBoxItem Content="Pager" />
            <ComboBoxItem Content="Other" />
            <ComboBoxItem Content="Custom" />
            <ComboBoxItem Content="Callback" />
            <ComboBoxItem Content="Car" />
            <ComboBoxItem Content="Company Main" />
            <ComboBoxItem Content="ISDN" />
            <ComboBoxItem Content="Main" />
            <ComboBoxItem Content="Other Fax" />
            <ComboBoxItem Content="Radio" />
            <ComboBoxItem Content="Telex" />
            <ComboBoxItem Content="TTY TTD" />
            <ComboBoxItem Content="Work Mobile" />
            <ComboBoxItem Content="Work Pager" />
            <ComboBoxItem Content="Assistant" />
            <ComboBoxItem Content="MMS" />
        </ComboBox>
        <Button Content="Submit" Height="23" HorizontalAlignment="Left" Margin="76,226,0,0" Name="btnSubmit" VerticalAlignment="Top" Width="75" Style="{StaticResource RoundCorner}" Click="btnSubmit_Click" />
        <Label Content="Phone" Height="28" HorizontalAlignment="Left" Margin="12,37,0,0" Name="label3" VerticalAlignment="Top" Width="266" BorderThickness="0,0,0,1" BorderBrush="#FFA70000" Foreground="#FFA70000" FontWeight="Bold" VerticalContentAlignment="Bottom" />
        <Label BorderBrush="#FFA70000" BorderThickness="0,0,0,1" Content="Email" FontWeight="Bold" Foreground="#FFA70000" Height="28" HorizontalAlignment="Left" Margin="12,100,0,0" Name="label1" VerticalAlignment="Top" VerticalContentAlignment="Bottom" Width="266" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="12,134,0,0" Name="txtEmail" VerticalAlignment="Top" Width="170" Foreground="#FFB3B3B3" Text="Email" />
        <ComboBox Height="23" Margin="188,134,0,0" Name="comboBox2" VerticalAlignment="Top" HorizontalAlignment="Left" Width="90">
            <ComboBoxItem Content="Home" IsSelected="True" />
            <ComboBoxItem Content="Work" />
            <ComboBoxItem Content="Other" />
            <ComboBoxItem Content="Mobile" />
            <ComboBoxItem Content="Custom" />
        </ComboBox>
        <Label BorderBrush="#FFA70000" BorderThickness="0,0,0,1" Content="Address" FontWeight="Bold" Foreground="#FFA70000" Height="28" HorizontalAlignment="Left" Margin="12,163,0,0" Name="label2" VerticalAlignment="Top" VerticalContentAlignment="Bottom" Width="266" />
        <ComboBox Height="23" HorizontalAlignment="Left" Margin="188,197,0,0" Name="comboBox3" VerticalAlignment="Top" Width="90">
            <ComboBoxItem Content="Home" IsSelected="True" />
            <ComboBoxItem Content="Work" />
            <ComboBoxItem Content="Other" />
            <ComboBoxItem Content="Custom" />
        </ComboBox>
        <Button Content="Cancel" Height="23" HorizontalAlignment="Left" Margin="157,226,0,0" Name="btnCancel" VerticalAlignment="Top" Width="75" Style="{StaticResource RoundCorner}" Click="btnCancel_Click" />
        <TextBox Height="Auto" HorizontalAlignment="Left" Margin="12,197,0,0" Name="txtAddress" VerticalAlignment="Top" Width="170" TextWrapping="WrapWithOverflow" AcceptsReturn="True" MinHeight="23" Foreground="#FFB3B3B3" Text="Address" />
    </Grid>
</Window>

Answer 1

您没有很好地利用可用的工具。您没有为网格定义任何行和列——您只是将所有内容放在一个单元格中，并使用边距来推动事物。如果您与 WPF 的布局系统作斗争——实际上，如果您使用硬编码的静态布局——那么是的，您的布局将不是动态的。

更好的方法是将 Grid 用作网格。添加 RowDefinitions，并确保展开的 TextBox 在 Height="Auto" 的一行中。实际上，对于您正在做的事情，大多数行可能应该是 Height="Auto"，除非您在底部有想要填充剩余空间的东西。

尝试以此为起点。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBox Grid.Row="0" Margin="5" />
    <TextBox Grid.Row="1" Margin="5" />
    <TextBox Grid.Row="2" Margin="5" />
    <TextBox Grid.Row="3" Margin="5" AcceptsReturn="True" />
    <Button Grid.Row="4" Margin="5" Content="Button" />
</Grid>

或者，如果您发现对每一行都使用 Height="Auto"，那么 StackPanel 是等效的，但标记更简单：

<StackPanel Margin="5">
    <TextBox Margin="5" />
    <TextBox Margin="5" />
    <TextBox Margin="5" />
    <TextBox Margin="5" AcceptsReturn="True" />
    <Button Margin="5" Content="Button" />
</StackPanel>

Answer 2

经过大量试验和错误，我设法找到了一种方法，不确定我是否在 Google 中输入了错误的关键字，但我所追求的真的很难。

我没有将所有内容都放在网格中，而是使用堆栈面板作为主根，它包含了与其他堆栈面板相同的组件所需的元素。下面是我的 XAML 现在是如何定义的

<Window x:Class="MyProject.AddContact"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="522" MaxHeight="450">
    <Window.Resources>
        <Storyboard x:Key="showVisibleAnimation">
            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="Visibility">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimation BeginTime="0:0:0:0" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.2" />
        </Storyboard>
        <Storyboard x:Key="hideVisibleAnimation">
            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="Visibility">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimation BeginTime="0:0:0:0" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:0.2" />
        </Storyboard>
    </Window.Resources>
    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto">
            <StackPanel Height="Auto" Margin="5,5,118,5">
                <TextBox HorizontalAlignment="Left" Name="txtContactName" Height="23" Text="Contact Name" Margin="0, 0, 4, 4" Width="253" Foreground="#FFB3B3B3" />
                <Button HorizontalAlignment="Left" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Foreground="#d1d1d1" Name="btnAddCompany" Height="23" Content="Add Organisation" Click="btnAddCompany_Click" Margin="0, 0, 10, 4" Width="253" />
                <TextBox HorizontalAlignment="Left" Foreground="#FFB3B3B3" Name="txtCompany" Text="Organisation" Visibility="Collapsed" Height="23" Margin="0, 0, 4, 4" Width="253"/>
                <TextBox HorizontalAlignment="Left" Foreground="#FFB3B3B3" Name="txtTitle" Text="Title" Visibility="Collapsed" Height="23" Margin="0, 0, 4, 4" Width="253"/>
                <Label Content="Phone" Height="28" HorizontalAlignment="Left" Width="347" Padding="0,0,4,10" VerticalContentAlignment="Bottom" BorderThickness="0,0,0,1" BorderBrush="#FFA70000" Foreground="#FFA70000" FontWeight="Bold" Margin="0,0,4,4" />
                <StackPanel Orientation="Horizontal">
                    <TextBox HorizontalAlignment="Left" Name="txtPhoneNumber" Text="Phone Number" Height="23" Margin="0, 0, 4, 4" Width="253" Foreground="#FFB3B3B3" />
                    <ComboBox Height="23" HorizontalAlignment="Left" Name="cboPhoneType" Width="90" Margin="0,0,4,4">
                        <ComboBoxItem Content="Home" IsSelected="True" />
                        <ComboBoxItem Content="Work" />
                        <ComboBoxItem Content="Work Fax" />
                        <ComboBoxItem Content="Home Fax" />
                        <ComboBoxItem Content="Pager" />
                        <ComboBoxItem Content="Other" />
                        <ComboBoxItem Content="Custom" />
                        <ComboBoxItem Content="Callback" />
                        <ComboBoxItem Content="Car" />
                        <ComboBoxItem Content="Company Main" />
                        <ComboBoxItem Content="ISDN" />
                        <ComboBoxItem Content="Main" />
                        <ComboBoxItem Content="Other Fax" />
                        <ComboBoxItem Content="Radio" />
                        <ComboBoxItem Content="Telex" />
                        <ComboBoxItem Content="TTY TTD" />
                        <ComboBoxItem Content="Work Mobile" />
                        <ComboBoxItem Content="Work Pager" />
                        <ComboBoxItem Content="Assistant" />
                        <ComboBoxItem Content="MMS" />
                    </ComboBox>
                </StackPanel>
                <Label Content="Email" Height="28" HorizontalAlignment="Left" Width="347" Padding="0,0,4,10" VerticalContentAlignment="Bottom" BorderThickness="0,0,0,1" BorderBrush="#FFA70000" Foreground="#FFA70000" FontWeight="Bold" Margin="0,0,4,4" />
                <StackPanel Orientation="Horizontal">
                    <TextBox HorizontalAlignment="Left" Name="txtEmail" Text="Email" Height="23" Margin="0,0,4,4" Width="253" Foreground="#FFB3B3B3" />
                    <ComboBox Height="23" Name="cboEmailType" HorizontalAlignment="Left" Width="90" Margin="0,0,4,4">
                        <ComboBoxItem Content="Home" IsSelected="True" />
                        <ComboBoxItem Content="Work" />
                        <ComboBoxItem Content="Other" />
                        <ComboBoxItem Content="Mobile" />
                        <ComboBoxItem Content="Custom" />
                    </ComboBox>
                </StackPanel>
                <Label Content="Address" Height="28" HorizontalAlignment="Left" Width="347" Padding="0,0,4,10" VerticalContentAlignment="Bottom" BorderThickness="0,0,0,1" BorderBrush="#FFA70000" Foreground="#FFA70000" FontWeight="Bold" Margin="0,0,4,4" />
                <StackPanel Orientation="Horizontal">
                    <TextBox Name="txtAddress" Text="Address" MinHeight="23" Height="Auto" TextWrapping="WrapWithOverflow" AcceptsReturn="True" Width="253" Margin="0,0,4,4" Foreground="#FFB3B3B3" />
                    <ComboBox Height="23" HorizontalAlignment="Left" Name="cboAddressType" Width="90" Margin="0,0,4,4">
                        <ComboBoxItem Content="Home" IsSelected="True" />
                        <ComboBoxItem Content="Work" />
                        <ComboBoxItem Content="Other" />
                        <ComboBoxItem Content="Custom" />
                    </ComboBox>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Width="169">
                    <Button Name="btnSubmit" Click="btnSubmit_Click" Content="Submit" Height="23" Width="75" Margin="5, 5, 5, 5" />
                    <Button Name="btnCancel" Click="btnCancel_Click" Content="Cancel" Height="23" Width="75" Margin="5, 5, 5, 5" />
                </StackPanel>
            </StackPanel>
        </ScrollViewer>
        <Image Height="73" HorizontalAlignment="Left" Margin="371,5,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="104" Source="file:///C:/Users/Chris/Documents/Visual%20Studio%202010/Projects/GUITesti%20g/GUITesti%20g/Images/no-contact-image.png" />
    </Grid>
</Window>