UI Atoms Form Layout

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
Multi Column
Single 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.
Label:
Label:
Label:
Label:
Label:
Label:
Label:
Label:
Label:
Label:

Standard Form Design
Multi Column
Variable Columns per Row
Required Red Asterisk (*)
Description at the Bottom
Standard Multi Column Form
*
Label:
*
Label:
Label:
Field Description for above Editor Control ……
Label:
Field Description
Field Description
Label:

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 Layout
You can set RowLayout = “3,3,1,2,2”
3
3
1
2
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
Believe me its very simple and small
*
Name:
Last
First
Middle
*
Phone:
Home
Cell
Work
Address:
Complete Postal Address
City:
State:
Country:
Zip:

Typical Changes Requested
*
Name:
Last
First
Middle
Move Here
Move Here
Move Here
*
Phone:
Cell
Home
Work
Address:
Remove
Complete Postal Address
Apartment:
Add
Street:
City:
State:
Country:
Zip:

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

http://uiatoms.neurospeech.com	432
http://akashkava.com	211
http://www.slideshare.net	65
http://fanyi.youdao.com	3

UI Atoms Form Layout

by Akash Kava on Apr 15, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 711

Statistics

UI Atoms Form Layout — Presentation Transcript