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
We are happy to announce new release of UI Atoms 1.5.8 with following new features.
UI Atoms for WPF 4.0
In this release of UI Atoms, we have a new library of dlls specially designed for WPF 4.0, which now includes support for Visual State Managers and renders everything in WPF 4.0 presentation. You can find Bin.Net4 folder inside WPF, that contains libraries only for WPF 4.0 version.
AtomForm Label Alignment for Silverlight and WPF
AtomForm now provides following two properties,
- LabelHorizontalAlignment property that can align the label horizontally in the form item.
- LabelVerticalAlignment property that can align the label vertically in the form item.
Label Can now contain string or UI Element object
- <ns:AtomTextBox HorizontalAlignment="Stretch"
- Text="{Binding Path=ProjectName, Mode=TwoWay}" Width="Auto" >
- <ns:AtomForm.Label>
- <StackPanel Orientation="Horizontal">
- <TextBlock>Name:</TextBlock>
- <Image Source="/PrismTest;component/Images/Logo.png" Width="16" Height="16" />
- </StackPanel>
- </ns:AtomForm.Label>
- </ns:AtomTextBox>
Advanced Quick Form Designer
Typing Tags with all Bindings could be quite time consuming, where it involves moving items up and down, deleting and adding new Form Items. Advanced Quick Form Designer resolves all this problems by giving you state of art designer, which provides one quick grid to enter all necessary information. However the form designer works well even for existing forms, and you can generate entire new form by selecting some Type as well.
As you see, type of control can be changed that will represent the form item and corresponding binding property can be changed as well. Just with simple one click, you can move items up and down or delete them. You can add a new control that is defaulted to AtomTextBox at the top, you can change default control to add multiple one after another very easily. Also you can click “Generate From Type” to select any Business Object Type and generate a brand new form.
Selecting type will automatically generate form with its bindings.
This tutorial outlines how to customize UI Atoms’ AtomForm appearance and layout simply by customizing its ItemContainerStyle.
AtomForm is derived from ItemsControl, and ItemsControl declares ItemContainerStyle which can customize the template of individual items that are being displayed. UI Atoms give you complete freedom of how to change your look and feel very easily by just adding a simple template in your resource dictionary.
Create New Item Container Style
To do this, open your xaml page in the Expression Blend and right click on the AtomForm. And choose Edit Additional Templates, and Select Edit Generated Item Container (ItemContainerStyle) and then click on “Edit a copy…”
Then choose a location to keep your style in,
Once the style editor is open, right click on “Style” and click on “Edit Template” and then click on “Edit Current”
Now you will see the Item Container Style’s current Form Item template. Where you can change the colors and layout, for example, we have modified the Vertical Layout of “PART_Label” field as Top in this figure below.
