CODEWITHSUNDEEP
c#wpfwinformswpf-controls
Michael
Michael

Reputation: 8749

Choosing Layout Control for WPF Item

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?

enter image description here

Upvotes: 0

Views: 1647

Answers (2)

gliderkite
gliderkite

Reputation: 8928

Using Grid as container, TextBlock al read-only text, Textbox as editable text and Button.

With these elements and using (for example) XAML:

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="MainWindow"
Width="640" Height="480" Background="White">

<Grid>
    <TextBlock HorizontalAlignment="Left" Height="20" Margin="34,30,0,0" 
        TextWrapping="Wrap" Text="Connection String" VerticalAlignment="Top" 
        Width="107" Foreground="Black"/>

    <TextBox HorizontalAlignment="Left" Height="18" Margin="170,32,0,0" 
        TextWrapping="Wrap" VerticalAlignment="Top" Width="379"/>

    <Button Content="Save" HorizontalAlignment="Left" Height="26" 
        Margin="529,387,0,0" VerticalAlignment="Top" Width="69"/>        
</Grid>

you can put all objects in your Window. But if you prefer you can add the elements programmatically. This is the result: WPF layout

Here an introduction to WPF layout.

Upvotes: 2

Aren
Aren

Reputation: 55966

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.

Upvotes: 3

Related Questions