Question

I am trying to learn WPF.. Although, Im having trouble with the layouts and which one to choose. I dont want to use canvas because the whole point is the get the hang of WPF..

I have decided to transfer one of my simple programs (in Windows Forms) to WPF..

I have attached the picture of the simple, 1 page form.. Can someone suggest how I could replicate this in WPF?

Answer 1

Form layouts are an interesting predicament. They usually involve a LOT of boilerplate, there’s many techniques for removing boilerplate code in form layouts but they’re fairly advanced WPF Concepts.

The Simplest Solution for you is going to be a StackPanel for laying out your sections and putting a Grid inside your GroupBox controls.

The Grid can be setup with 4 colunms:

1. Col 1 Label
2. Col 1 Body
3. Col 2 Label
4. Col 2 Body

With a global style in the resources of your stack panel you can define default visual behaviour so the items dont end up touching:

<Style TargetType="TextBox">
  <Setter Property="Margin" "0,0,5,5" />
</Style>

The Above Style will put a 5px margin on the right & bottom of all TextBox controls under it in the visual tree.

This is the absolute simplest (read: straight forward) approach to making this ui in WPF. It is by no means the best, or the most maintainable, but it should be doable in about 10 minutes max.

There are other methods out there for emulating a form layout with WPF like this one or by using other combinations of basic layout components.

For example:

<StackPanel>
  <!-- Vertical Stack Panel, Stacks Elements on top of each other -->
  <StackPanel Orientation="Horizontal">
    <!-- Horizontal Stack Panel, Stacks Elements left to right -->
    <Label Width="100">This Label is 100units Wide</Label>
    <TextBox />
  </StackPanel>
</StackPanel>

Different approaches have different drawbacks, some are flex width, some are not, some play nicely with colunms, some don’t. I’d suggest experimenting with the many subclasses of Panel to see what they all do, or you can even roll your own.