WPF Formatting Issues - Automatically stretching and resizing?

Question

I'm very new to WPF and XAML. I am trying to design a basic data entry form. I have used a stack panel holding four more stack panels to get the layout I want. Perhaps a grid would be better for this, I am not sure.

Here is an image of my form in action: http://yfrog.com/7gscreenshot1impp

And here is the XAML code that generates it:

<Window x:Class="Test1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="224" Width="536.762">
    <StackPanel Height="Auto" Name="stackPanel1" Width="Auto" Orientation="Horizontal">
        <StackPanel Height="Auto" Name="stackPanel2" Width="Auto">
            <Label Height="Auto" Name="label1" Width="Auto">Patient Name:</Label>
            <Label Height="Auto" Name="label2" Width="Auto">Physician:</Label>
            <Label Height="Auto" Name="label3" Width="Auto">Insurance:</Label>
            <Label Height="Auto" Name="label4" Width="Auto">Therapy Goals:</Label>
        </StackPanel>
        <StackPanel Height="Auto" Name="stackPanel3" Width="Auto">
            <TextBox Height="Auto" Name="textBox1" Width="Auto" Padding="3" Margin="1" />
            <TextBox Height="Auto" Name="textBox2" Width="Auto" Padding="3" Margin="1" />
            <TextBox Height="Auto" Name="textBox3" Width="Auto" Padding="3" Margin="1" />
            <TextBox Height="Auto" Name="textBox4" Width="Auto" Padding="3" Margin="1" />
        </StackPanel>
        <StackPanel Height="Auto" Name="stackPanel4" Width="Auto">
            <Label Height="Auto" Name="label5" Width="Auto">Date:</Label>
            <Label Height="Auto" Name="label6" Width="Auto">Patient Phone:</Label>
            <Label Height="Auto" Name="label7" Width="Auto">Facility:</Label>
            <Label Height="Auto" Name="label8" Width="Auto">Referring Physician:</Label>
        </StackPanel>
        <StackPanel Height="Auto" Name="stackPanel5" Width="Auto">
            <TextBox Height="Auto" Name="textBox5" Width="Auto" Padding="3" Margin="1" />
            <TextBox Height="Auto" Name="textBox6" Width="Auto" Padding="3" Margin="1" />
            <TextBox Height="Auto" Name="textBox7" Width="Auto" Padding="3" Margin="1" />
            <TextBox Height="Auto" Name="textBox8" Width="Auto" Padding="3" Margin="1" />
        </StackPanel>
    </StackPanel>
</Window>

What I really want is for the text boxes to stretch equally to fill up the space horizontally. I would also like for the controls in each vertical stackpanel to 'spread out' evenly as the window is resized vertically.

Can any of you experts out there help me out?

Answer 1

StackPanel always aligns its children against the top or left edge depending upon its orientation. It sounds like what you want is a UniformGrid where your outer StackPanel is. Try this:

<Window>
    <UniformGrid Name="stackPanel1" Rows="1">
        <StackPanel Name="stackPanel2">
           ...
        </StackPanel>
        <StackPanel Name="stackPanel3">
           ...
        </StackPanel>
        <StackPanel Name="stackPanel4">
           ...
        </StackPanel>
        <StackPanel Name="stackPanel5">
           ...
        </StackPanel>
    </UniformGrid>
</Window>

Note that you don't need to set Width=Auto or Height=Auto, this is implied.

But you are right that a Grid is probably better (even though the XAML is ugly) because in this layout configuration your labels could easily get out of alignment with the text boxes. You can try something like this too...

<UniformGrid Rows="1">

    <Grid>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Label Grid.Row="0" Grid.Column="0" Content="Field 1" />
        <TextBox Grid.Row="0" Grid.Column="1" />


        <Label Grid.Row="1" Grid.Column="0" Content="Field 2" />
        <TextBox Grid.Row="1" Grid.Column="1" />


        <Label Grid.Row="2" Grid.Column="0" Content="Field 3" />
        <TextBox Grid.Row="2" Grid.Column="1" />

    </Grid>

    <Grid /> <!-- repeat above -->

    <Grid /> <!-- etc... -->

</UniformGrid>

Answer 2

Taking off what Josh said, if you require the controls to fill the space vertically as well, you can define some "space filler" rows to spread out the controls vertically as well. Here's some XAML which demonstrates this (I added margins to push the labels out from the window border).

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Label Grid.Column="0" Grid.Row="0" Margin="5">Patient Name:</Label>
    <TextBox Grid.Column="1" Grid.Row="0" Margin="5" />
    <Label Grid.Column="0" Grid.Row="2" Margin="5">Physician:</Label>
    <TextBox Grid.Column="1" Grid.Row="2" Margin="5" />
    <Label Grid.Column="0" Grid.Row="4" Margin="5">Insurance:</Label>
    <TextBox Grid.Column="1" Grid.Row="4" Margin="5" />
    <Label Grid.Column="0" Grid.Row="6" Margin="5">Therapy Goals:</Label>
    <TextBox Grid.Column="1" Grid.Row="6" Margin="5" />
    <Label Grid.Column="2" Grid.Row="0" Margin="5">Date:</Label>
    <TextBox Grid.Column="3" Grid.Row="0" Margin="5" />
    <Label Grid.Column="2" Grid.Row="2" Margin="5">Patient Phone:</Label>
    <TextBox Grid.Column="3" Grid.Row="2" Margin="5" />
    <Label Grid.Column="2" Grid.Row="4" Margin="5">Facility:</Label>
    <TextBox Grid.Column="3" Grid.Row="4" Margin="5" />
    <Label Grid.Column="2" Grid.Row="6" Margin="5">Referring Physician:</Label>
    <TextBox Grid.Column="3" Grid.Row="6" Margin="5" />
</Grid>