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.

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.

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>