We are happy to announce new release of UI Atoms 1.7.5 with following new features.
- New AtomDataForm Control
- Tabs in AtomForm and AtomDataForm
- Lambda Binding Extensions
Introducing new Control AtomDataForm
AtomForm did support UI Validations, however Microsoft RIA Services Client has some inbuilt validation and support for IEditableObject. So we created a new AtomDataForm that supports RIA Services validation and IEditableObject support.
- AtomDataForm supports object with IEditableObject interface and fires event for BeginEdit, CancelEdit and EndEdit
- AtomDataForm displays items in read only mode unless Edit button is clicked
- After edit button is clicked, Save and Cancel button appear for you to persist changes or cancel changes
- AtomDataForm contains UI Element (TextBox, ComboBox etc) as children, so you can easily define child ui element in your xaml as shown in sample below
- AtomDataForm supports Tabbed layout, for that you can insert your items within AtomDataFormTab as shown in example below
- Following sample illustrates Tabs, but you can also create simple user interface without tab as well
- You can also use AtomDataFormGroup to group items in to a headered group
- Every child element of AtomDataForm can be accessed in code behind file easily because they appear as a variables when you define x:Name property
- AtomDataForm supports CanChangeDataContext property, which is false when the form is in edit mode
- You can easily reuse any third party control within AtomDataForm, AtomDataFormGroup and AtomDataFormTab
- <ns:AtomDataForm
- Grid.Column="1"
- DataContext="{Binding SelectedItem,ElementName=dataGrid}" >
- <!– 1st Tab–>
- <ns:AtomDataFormTab Header="Default">
- <TextBox
- ns:AtomDataForm.Label="Name:"
- Text="{Binding ProductName, Mode=TwoWay}"/>
- <ns:AtomToggleButtonBar
- ns:AtomDataForm.Label="Type:"
- SelectedItem="{Binding ProductType,Mode=TwoWay}">
- <sys:String>Product</sys:String>
- <sys:String>Service</sys:String>
- </ns:AtomToggleButtonBar>
- <TextBox
- ns:AtomDataForm.Label="Folder:">
- <ns:AtomDataForm.CommandBox>
- <Button Content="…"/>
- </ns:AtomDataForm.CommandBox>
- </TextBox>
- </ns:AtomDataFormTab>
- <!– 2nd Tab–>
- <ns:AtomDataFormTab Header="General">
- <TextBox
- ns:AtomDataForm.Label="Email:"
- Text="{Binding Email, Mode=TwoWay}"/>
- </ns:AtomDataFormTab>
- <!– 3rd Conditional Tab–>
- <!– This tab will be visible only if Product's
- IsTypeService is true–>
- <ns:AtomDataFormTab
- Header="Service"
- IsEnabled="{Binding IsTypeService}">
- <TextBox
- ns:AtomDataForm.Label="Service Details:"/>
- </ns:AtomDataFormTab>
- <!– 4th Conditional Tab–>
- <!– This tab will be visible only if Product's
- IsTypeProduct is true–>
- <ns:AtomDataFormTab
- Header="Product"
- IsEnabled="{Binding IsTypeProduct}">
- <TextBox ns:AtomDataForm.Label="Product Details:" >
- <ns:AtomDataForm.CommandBox>
- <Button Content="Search"/>
- </ns:AtomDataForm.CommandBox>
- </TextBox>
- </ns:AtomDataFormTab>
- </ns:AtomDataForm>
In above sample you can notice following things,
- Header property of AtomDataFormTab is displayed in the title section on the top
- AtomDataFormTab contains children and each child can have properties as below
- ns:AtomDataForm.Label displays label on left side
- ns:AtomDataForm.Description displays description on bottom
- ns:AtomDataForm.Title displays title on the top of control
- ns:AtomDataForm.CommandBox displays a UI Element on the right corner, usually a search button or expand button
- AtomDataFormTab supports IsEnabled binding, you can bind this property to show/hide the tab as shown in the example above
- Every child elemen of either AtomDataForm , AtomDataFormTab or AtomDataFormGroup supports Visibility and IsEnabled binding
- If Visibility is bound and it results in Collapsed then entire form item is not displayed
- IsEnabled binding can enable/disable the editable control
Following is screenshot of Tabbed AtomDataForm in edit mode
Introducing Lambda Binder Extensions
Writing binding expressions with conditions and converters can be very complex especially rewriting many and same logic at different classes. Now UI Atoms support, Lambda Binding Extensions which lets you do binding within the code without creating any complex IValueConverter implementation.
Bind Method Extension
- theForm.Bind(AtomDataForm.HeaderProperty,
- () => string.Format("{0} ({1})",
- productName.Text,
- typeToggleButtonBar.SelectedItem
- ));
This will bind theForm’s Header property to an expression that will combine properties of two different elements. And this will also automatically update when any of bound source or its property will change.
- theForm.Bind(AtomDataForm.HeaderProperty,
- () => string.Format("{0} ({1})",
- theForm.DataContext.Property("ProductName"),
- theForm.DataContext.Property("ProductType")
- ));
Assuming, we may not have property information at design time, but we know that DataContext will be set to an object containing properties, then we can write Property extension method as shown above.
BindVisibility Method Extension
Visibility converters are very frequent so we created a BindVisibility extension method that will let you specify a boolean expression that will be converted to Visibility on the fly.
- productTab.BindVisibility(
- () =>
- typeToggleButtonBar.SelectedIndex == 0);
These extensions can be used anywhere in any third party controls as well.
Download Now
Click here to download your free demo copy of NeuroSpeech UI Atoms 1.7.5