UI Atoms 2010

Advanced Data Form with New Form Layout for Silverlight and WPF

NeuroSpeech Inc.

• StackPanel can not support multiple columns.

• Items can be added without any attributes.

• Nested StackPanel can have variable columns.

StackPanel/Grid Challenges

• Grid can support multiple columns.

• Each item needs attributes.

• Grid can not support variable columns per row.

Typical Form Designs

Label:

Label:

Label:

Label:

Label:

Label:

Label:

Label:

Label:

Label:

Single Column Multi Column

Though this is most simple design but its never practical to have everything in one column.

Though this is most simple design but its never practical to have everything in one column.

Standard Form Design

• Multi Column• Variable

Columns per Row

• Required Red Asterisk (*)

• Description at the Bottom

Label:

Label:

Label:

Label:

Label:

Field Description for above Editor Control ……

Field Description Field Description

*

*

Standard Multi Column Form

AtomForm Flexible Layout

• Intelligent Flow Layout with ability to share multiple items in single row

• No attributes required on any child items• Comma Separated “RowLayout” instantly

renders multi 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

Form / Flexible Grid LayoutYou can set RowLayout = “3,3,1,2,2”

3

3

2

1

2

Benefits over Canvas, Grid, 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.

Typical Customer Request

Name: First

Address:

City:

Country:

Last

Phone: Home Cell

Middle

Work

Complete Postal Address

*

*

Standard Multi Column Form

Believe me its very simple and small

State:

Zip:

Typical Changes Requested

Name: First

Address:

City:

Country:

Last

Phone: Home Cell

Middle

Work

Complete Postal Address

*

*

Standard Multi Column Form

State:

Zip:

Move Here Move HereMove Here

Remove

AddApartment:

Street:

Change Management

• Design is simple and small• Changes are not simple and small• Changing form items is extremely simple with

AtomForm• With simple change of attributes, preview is

available and without any tedious drag and drop

Links and Resources

• Download – http://uiatoms.neurospeech.com/download

• Twitter –http://twitter.com/uiatoms

• Support – http://uiatoms.neurospeech.com/support

• About NeuroSpeech Inc. – http://www.neurospeech.com