Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF Best Practice for DataEntry Window

Tags:

layout

wpf

lob

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

like image 515
marc.d Avatar asked Nov 25 '08 10:11

marc.d


4 Answers

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

like image 96
Thomas Avatar answered Nov 04 '22 13:11

Thomas


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>
like image 29
Kent Boogaart Avatar answered Nov 04 '22 12:11

Kent Boogaart


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/

like image 2
kobusb Avatar answered Nov 04 '22 11:11

kobusb


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

like image 1
Akash Kava Avatar answered Nov 04 '22 12:11

Akash Kava