Make content automatically push down when a TextBox height automatically grows

Question

I have a textbox which has its height set to Auto and allows text wrapping and accepts return key presses.

Currently, when the textbox expands it grows over the top of the other controls, in this case, the submit and cancel button. The textbox I want to grow is called txtAddress and its the submit and cancel buttons that should push out of the way as the text box grows.

Below is my 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

You're not taking very good advantage of the tools you have available. You're not defining any rows and columns for your grid -- you're just putting everything in a single cell, and using margins to shove things around. If you fight that hard against WPF's layout system -- if you, in effect, use a hard-coded static layout -- then yes, your layout won't be dynamic.

A much better way is to use the Grid as, well, a grid. Add RowDefinitions, and make sure your expanding TextBox is in a row with Height="Auto". Actually, for what you're doing, most of rows should probably be Height="Auto", unless you have something at the bottom that you want to fill the remaining space.

Try this as a starting point.

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

Or, if you find that you're using Height="Auto" for every single row, then a StackPanel is equivalent but has simpler markup:

<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

I've managed to find a way with a hell of a lot of trial and error, not sure if I was putting in bad keywords into Google but really difficult what I was after.

Instead of having everything in a grid, I used a stack panel as a main root and this contained the elements needs with other stackpanels for components that are on the same line. Below is how my XAML is now defined

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