WPF Best Practice for DataEntry Window

Question

i`m currently playing around with WPF and now i wonder what would be the layout for a typical dataentry window (20+ textboxes and stuff).

atm i`m using a grid object like this (basic sample)

    <Grid Margin="2,2,2,2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions >
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>

            <Label Grid.Row="0" Grid.Column="0">Vorname:</Label>
            <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Path=Surname, UpdateSourceTrigger=PropertyChanged}" ></TextBox>

            <Label Grid.Row="1" Grid.Column="0">Nachname:</Label>
            <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Path=ChristianName, UpdateSourceTrigger=PropertyChanged}"></TextBox>

            <Label Grid.Row="2" Grid.Column="0">Strasse (Wohnsitz):</Label>
            <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Path=Street1, UpdateSourceTrigger=PropertyChanged}"></TextBox>

            <Label Grid.Row="3" Grid.Column="0">Ort (Wohnsitz):</Label>
            <TextBox Grid.Row="3" Grid.Column="1" Text="{Binding Path=Town1, UpdateSourceTrigger=PropertyChanged}"></TextBox>

            <Label Grid.Row="4" Grid.Column="0">Postleitzahl (Wohnsitz):</Label>
            <TextBox Grid.Row="4" Grid.Column="1" Text="{Binding Path=PostalCode1, UpdateSourceTrigger=PropertyChanged}"></TextBox>

            <Label Grid.Row="5" Grid.Column="0">Bundesland (Wohnsitz):</Label>
            <TextBox Grid.Row="5" Grid.Column="1" Text="{Binding Path=State1, UpdateSourceTrigger=PropertyChanged}"></TextBox>

            <Label Grid.Row="6" Grid.Column="0">Land (Wohnsitz):</Label>
            <TextBox Grid.Row="6" Grid.Column="1" Text="{Binding Path=Country1, UpdateSourceTrigger=PropertyChanged}"></TextBox>

            <Label Grid.Row="7" Grid.Column="0">Zusatz (Wohnsitz):</Label>
            <TextBox Grid.Row="7" Grid.Column="1" Text="{Binding Path=AdditionalAdrInfo1, UpdateSourceTrigger=PropertyChanged}"></TextBox>

    </Grid>

basically this satisfies all my layout needs, but what if i wish to change something, like adding a new textbox in row 3?

currently i have to change every single Grid.Row property greater then 3, but that cant be the intended WPF way!?

how do others layout complex dataentry windows?

tia

Congregationalism

Answer 1

Karl Shifflett also has a nice approach to LOB forms in WPF: http://karlshifflett.wordpress.com/2008/10/23/wpf-silverlight-lob-form-layout-searching-for-a-better-solution/

Lees

wow, thats much more then i hoped for :) i will try that out. – Congregationalism

please never just link the site that contains the answer, quota everything related to question – Spikenard

karlshifflett.wordpress.com is no longer available. The authors have deleted this site. – Georgena

As always, there's a way back: web.archive.org/web/20150620104259/https://… – Spiker

Answer 2

Personally, I'm a huge fan of AutoGrid: http://www.codeplex.com/wpfcontrib/Wiki/View.aspx?title=AutoGrid&referringTitle=Home

Tripp

Answer 3

Some people use nested StackPanels to "solve" this problem, but IMHO that just introduces another problem (code bloat). I think the best way to solve this is to write your own panel that lays out children consecutively in columns. I did this on a previous project and it has a number of advantages:

• More readable and terse XAML
• Easier to maintain XAML
• Faster performance

The usage looked something like this:

<local:FieldPanel>
    <Label>Field 1:</Label>
    <TextBox/>

    <Label>Field 2:</Label>
    <TextBox/>

    <Label>Field 3:</Label>
    <TextBox/>
</local:FieldPanel>

Agnusago

Answer 4

Here is one more form layout http://www.slideshare.net/ackava/ui-atoms-form-layout

Demonetize