What is the intended way to make a label and text box side by side in WPF?

Question

I'll often use this:

<StackPanel>
  <StackPanel Orientation="Horizontal">
    <Label>Username:</Label>
    <TextBox />
  </StackPanel>
  <StackPanel Orientation="Horizontal">
    <Label>Password:</Label>
    <PasswordBox />
  </StackPanel>
</StackPanel>

But it is such a common scenario, I feel like there is a way with less markup.

Also, is there a performance impact of using so many stack panels?

It's XML-based - it's supposed to be excessively verbose ;-) — Will Dean, Jul 19 '10 at 21:20
The markup you've shown is paltry compared to the Visual Studio or Expression Blend generated markup - try positioning your controls using the designer (i.e. drag them around). You'll see what I mean, and then probably never want to use the designer again for layout. What you have there shouldn't be a problem at all! — Mark Carpenter, Jul 20 '10 at 02:02

score 10 · Answer 1 · answered Jul 20 '10 at 01:58

I don't know why, but I've become very fond of DockPanel's, and I use them for the scenario you've described.

<DockPanel>
    <Label Content="Username:"/>
    <TextBox Text="Some Text"/>
</DockPanel>

The longhand (and equivalent version, since the default dock position is left):

<DockPanel>
    <Label DockPanel.Dock="Left" Content="Username:"/>
    <TextBox DockPanel.Dock="Left" Text="Some Text"/>
</DockPanel>

Also, it has a property LastChildFill which is true by default, making the last child added to it fill the remaining space (I like this feature). So, in the above examples, the TextBox will fill the remaining available horizontal space. (You can turn it off easily by switching it to false)

Hope that helps!!

DockPanel documentation

score 4 · Accepted Answer · edited May 23 '17 at 11:48

There are two primary ways to do this, StackPanels and Grid Definitions, and Grid does not provide any less markup than StackPanel. I personally like to use Grid Definitions a lot more. They take awhile to get use to, and every now and then I still use a StackPanel, but overall they feel a lot cleaner when you get use to them. Here is a great tutorial on how to use them.

A reference that might also help is WPF Grid Vs. StackPanel.

akjoshi · Answer 3 · 2017-08-14T08:01:17.420

I mostly prefer Grid if large number of labels and textboxes needs to be present in the form, like data entry or property grid kind of controls. Grid provides much more power to control the width/height of rows columns and changing the width/height value at one place will affect all the rows.

One more benefit of using Grid is alignment, all labels and textboxes(or other controls) will be aligned correctly. In case of Stackpanel or Dockpanel you will have to explicitly set the wdth to each label to align them properly.

You can also use GridSplitter in Grid which can be very useful in PropertGrid kind of controls.

In case only one or two such rows are needed and alignment is not a concern you can go ahead with Dockpanel or StackPanel.

score 0 · Answer 4 · answered Feb 21 '23 at 16:33

Sometimes UniformGrid will work wonders with relatively small amount of code. I sort of re-discovered it recently and often works quite well for simple scenarios where you have a lot of textboxes and labels.

  <UniformGrid Columns="2" Rows="6"  >
                        <TextBlock>Name</TextBlock>
                        <TextBox Text="Location 1" />
                        <TextBlock>Latitude (°)</TextBlock>
                        <TextBox Text="20.4" />
                        <TextBlock>Longitude (°)</TextBlock>
                        <TextBox Text="10.5" />
                        <TextBlock>X error (°)</TextBlock>
                        <TextBox Text="0.5" />
                        <TextBlock>Y error (°)</TextBlock>
                        <TextBox Text="1.2" />
                        <TextBlock>Angle (°)</TextBlock>
                        <TextBox Text="10.4" />
   </UniformGrid>

What is the intended way to make a label and text box side by side in WPF?

4 Answers4