UI Atoms 1.7.5 Released

On April 3, 2011, in C#, Programming, RIA, Technology, by Akash Kava

We are happy to announce new release of UI Atoms 1.7.5 with following new features.

  1. New AtomDataForm Control
  2. Tabs in AtomForm and AtomDataForm
  3. 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.

  1. AtomDataForm supports object with IEditableObject interface and fires event for BeginEdit, CancelEdit and EndEdit
  2. AtomDataForm displays items in read only mode unless Edit button is clicked
  3. After edit button is clicked, Save and Cancel button appear for you to persist changes or cancel changes
  4. 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
  5. AtomDataForm supports Tabbed layout, for that you can insert your items within AtomDataFormTab as shown in example below
  6. Following sample illustrates Tabs, but you can also create simple user interface without tab as well
  7. You can also use AtomDataFormGroup to group items in to a headered group
  8. 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
  9. AtomDataForm supports CanChangeDataContext property, which is false when the form is in edit mode
  10. You can easily reuse any third party control within AtomDataForm, AtomDataFormGroup and AtomDataFormTab
AtomDataForm Sample
  1. <ns:AtomDataForm
  2.     Grid.Column="1"
  3.     DataContext="{Binding SelectedItem,ElementName=dataGrid}" >
  4.             
  5.     <!– 1st Tab–>
  6.     <ns:AtomDataFormTab Header="Default">
  7.                 
  8.         <TextBox
  9.             ns:AtomDataForm.Label="Name:"
  10.             Text="{Binding ProductName, Mode=TwoWay}"/>
  11.                 
  12.         <ns:AtomToggleButtonBar
  13.             ns:AtomDataForm.Label="Type:"
  14.             SelectedItem="{Binding ProductType,Mode=TwoWay}">
  15.             <sys:String>Product</sys:String>
  16.             <sys:String>Service</sys:String>
  17.         </ns:AtomToggleButtonBar>
  18.                 
  19.         <TextBox
  20.             ns:AtomDataForm.Label="Folder:">
  21.             <ns:AtomDataForm.CommandBox>
  22.                 <Button Content="…"/>
  23.             </ns:AtomDataForm.CommandBox>
  24.         </TextBox>
  25.                 
  26.     </ns:AtomDataFormTab>
  27.             
  28.     <!– 2nd Tab–>
  29.     <ns:AtomDataFormTab Header="General">
  30.                 
  31.         <TextBox
  32.             ns:AtomDataForm.Label="Email:"  
  33.             Text="{Binding Email, Mode=TwoWay}"/>
  34.                 
  35.     </ns:AtomDataFormTab>
  36.             
  37.     <!– 3rd Conditional Tab–>
  38.     <!– This tab will be visible only if Product's
  39.     IsTypeService is true–>
  40.     <ns:AtomDataFormTab
  41.         Header="Service"
  42.         IsEnabled="{Binding IsTypeService}">
  43.                 
  44.         <TextBox
  45.             ns:AtomDataForm.Label="Service Details:"/>
  46.                 
  47.     </ns:AtomDataFormTab>
  48.  
  49.     <!– 4th Conditional Tab–>
  50.     <!– This tab will be visible only if Product's
  51.     IsTypeProduct is true–>
  52.     <ns:AtomDataFormTab
  53.         Header="Product"
  54.         IsEnabled="{Binding IsTypeProduct}">
  55.                 
  56.         <TextBox ns:AtomDataForm.Label="Product Details:" >
  57.             <ns:AtomDataForm.CommandBox>
  58.                 <Button Content="Search"/>
  59.             </ns:AtomDataForm.CommandBox>
  60.         </TextBox>
  61.                 
  62.     </ns:AtomDataFormTab>
  63.             
  64. </ns:AtomDataForm>

In above sample you can notice following things,

  1. Header property of AtomDataFormTab is displayed in the title section on the top
  2. AtomDataFormTab contains children and each child can have properties as below
    1. ns:AtomDataForm.Label displays label on left side
    2. ns:AtomDataForm.Description displays description on bottom
    3. ns:AtomDataForm.Title displays title on the top of control
    4. ns:AtomDataForm.CommandBox displays a UI Element on the right corner, usually a search button or expand button
  3. AtomDataFormTab supports IsEnabled binding, you can bind this property to show/hide the tab as shown in the example above
  4. Every child elemen of either AtomDataForm , AtomDataFormTab or AtomDataFormGroup supports Visibility and IsEnabled binding
    1. If Visibility is bound and it results in Collapsed then entire form item is not displayed
    2. IsEnabled binding can enable/disable the editable control

Following is screenshot of Tabbed AtomDataForm in edit mode

AtomDataForm

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

Element Property Binding
  1. theForm.Bind(AtomDataForm.HeaderProperty,
  2.     () => string.Format("{0} ({1})",
  3.             productName.Text,
  4.             typeToggleButtonBar.SelectedItem
  5.         ));

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.

DataContext Property Binding
  1. theForm.Bind(AtomDataForm.HeaderProperty,
  2.     () => string.Format("{0} ({1})",
  3.             theForm.DataContext.Property("ProductName"),
  4.             theForm.DataContext.Property("ProductType")
  5.         ));

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.

BindVisibility Extension
  1. productTab.BindVisibility(
  2.     () =>
  3.         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

Share
Tagged with:  

UI Atoms 1.5.8 Released

On January 11, 2011, in Programming, by Akash Kava

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

Silverlight-Form-Label-Alignment

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

Rich Label Format
  1. <ns:AtomTextBox HorizontalAlignment="Stretch"
  2.                 Text="{Binding Path=ProjectName, Mode=TwoWay}" Width="Auto" >
  3.     <ns:AtomForm.Label>
  4.         <StackPanel Orientation="Horizontal">
  5.             <TextBlock>Name:</TextBlock>
  6.             <Image Source="/PrismTest;component/Images/Logo.png" Width="16" Height="16" />
  7.         </StackPanel>
  8.     </ns:AtomForm.Label>
  9. </ns:AtomTextBox>

Rich-Label-Silverlight-WPF-Form

 

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.

Advanced-Silverlight-WPF-Form-Designer

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.

Generate-Form-From-Type-Silverlight-WPF

Selecting type will automatically generate form with its bindings.

Share
Tagged with:  

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…”

SelectItemContainerStyle

Then choose a location to keep your style in,

ChooseStyle

Once the style editor is open, right click on “Style” and click on “Edit Template” and then click on “Edit Current”

ChooseCurrent

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.

ChangeLayout

Share
Tagged with: