WPF Best Practice for DataEntry Window

StackOverflow https://stackoverflow.com/questions/316921

  •  11-07-2019
  •  | 
  •  

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

Was it helpful?

Solution

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/

OTHER TIPS

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top