Advanced Data Form with UI Atoms on WPF and Silverlight

On June 1, 2010, in C#, by Akash Kava

Building line of business applications for over years, we realized that the Silverlight DataForm offers very small subset of features that are needed in the long run. We figured out the problem with form based applications, that frustrates developers. That is “Change Management”.

Although WPF/Silverlight does offer very customizable UI designing platform but when we go on the field to develop ling of business applications, we realize that initial development hardly takes any time but maintenance is very difficult.

Lets review the designing problems of panels such as Grid, StackPanel, Canvas etc.

StackPanelGridChallenges

Standard Form Design

Lets review standard form design that is expected, this is the layout that can not be made except canvas panel because there is no way we can support variable columns per row. If you notice, first two rows have 3 columns equally placed and last 2 rows have two columns equally placed. Every field has description at the bottom and red required asterisk (*).

StandardFormDesign

Initial Form Design

The first draft of UI in any application is very simple and we probably do it in minutes.

CustomerRequest

Changes Requested

But the bigger problem always comes later on when changes are requested.

TypicalChanges

Atom Flexible Grid

This is the reason we created “AtomFlexibleGrid” which supports variable columns per row as displayed in the picture above. You can see that form and the flexible grid have a property called “RowLayout” which accepts comma separated cell values to be displayed per row. As displayed in the example below.

FlexibleGrid

This is very helpful in quick design, but this also way to easy to manage when changes are requested.

  • Intelligent Flow Layout with ability share multiple items in single row.
  • No attributes required on any child items.
  • Comma Separated “RowLayout” instantly renders variable column grid.
  • E.g. 3,2,1 = 3 cells in first row, 2 cells in 2nd row and 1 cell in 3rd row with automatic spanning.

Benefits of Atom Flexible Grid over Canvas, Grid and Stack Panel

  • Atom Form children are similar to Wrap Panel children, but Wrapping is completely customized via simple attributes.
  • Its easy to move items around without changing lots of attributes, Grid is very powerful but changing grid children can be huge pain.
  • Canvas is very easy to operate, but needs a powerful designer, once again changing layout can be very tedious job.

Form Field Layout

FormFieldLayout

This is how individual components of Form Field are positioned within the Form Field. Collapsible panels are only visible if the content is provided. However in future more of such components will be available in Form Field to standardize the fields.
In next slide, you will see how the fields are positioned in the Form.

Change Management

Changing layout is extremely simple, as you can simply move your items up and down and change “RowLayout” text field to quickly review how it will look. No tedious drag and drop and no typing.

Live Form Demos

Click here to see live UI Atoms form demos for Silverlight.

Click here to download UI Atoms form demos for WPF.

Share
Tagged with:  

One Response to Advanced Data Form with UI Atoms on WPF and Silverlight

  1. [...] This post was mentioned on Twitter by Akash Kava, Akash Kava. Akash Kava said: Advanced Data Form with UI Atoms on WPF and Silverlight http://bit.ly/aI4SMG [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>