I installed Windows Developer Preview of upcoming operating system Windows 8, and it has few good and bad things. Just like a new product, it has new dashboard and cool way to navigate between apps using touch gesture, these things sure excites me up but also looking at the internals, there are more challenges for everyone to catch up with Window 8.
New Task Manager
Nice of all, I like the new improved Task Manager, which lets me look into complete Process Tree as well as I can see user wise Process Tree.
It also displays Process Tree grouped by Users.
And best of all, it lets me control my startup items from here, I can disable items I don’t want to auto start.
New File Copy Dialog
Another improved user interface is, File Copy dialog, instead of old style animation, it now displays a graph of progress with real cool line graph that’s very live.
New Search
Search is redesigned completely and you can search for settings by pressing Window + W key. Let’s say I want to change my desktop background, so I pressed Window + W and I typed “wallpaper”, it did give me these options.
Well I just tried all combinations of Window keys and only found following five useful combinations.
- Window + W lets you search the settings (usually control panel)
- Window + P lets you switch between dual desktop and connect to projector settings
- Window + D brings back the desktop
- Window + F lets you search the files
- Window + Q lets you search Metro App’s Items
To a big disappointment, I did not find anything to search apps, so I have to click on Windows + W and then click on App to actually search applications installed on my machine.
No Old Apps on Metro Desktop
Metro UI Apps are redesigned using HTML5+JS and Appx with Windows Runtime (XAML + Windows Runtime). So none of your old Win32, .NET apps will execute on Metro UI. They can only execute inside the desktop (old fashion windows). So we have to redesign and rewrite the applications for Metro Desktop completely from scratch.
Metro Desktop Apps are not Silverlight
Although they quite look like silverlight, but looking at the documentation, Microsoft has introduced complete new set of library with “Windows.UI” namespace, which represents complete copy of Silverlight controls (and more) but they are not silverlight. So if you wrote your apps in Silverlight, they wont directly run on Metro UI, but you might be able to port them to Metro UI with some code changes as namespace changes System.Windows.Controls to Windows.UI.Controls. However, it may not be so easy but you will get very unexpected behavior if you try to port it directly.
Three Different UI Technologies to Deal With
Well the only sad part is, now we have total 3 different UI technologies to deal with.
- WPF 3.0, 3.5, 4.0 (Original WPF based on XAML). Apps written on WPF are old fashioned, and they will not execute on Metro UI, they will only run in Desktop version.
- Silverlight (Web and Phone), Once again, two different forms of same Silverlight for web and phone. However all web that runs Silverlight (and even flash) wont run on Metro UI.
- Windows Runtime (XAML,HTML5+JS), this is complete new set of library including various controls from Silverlight and WPF, however it is still not complete with both of them and it also includes more controls of its own. This is purely for Metro UI. HTML5 and JS are once again little different as Microsoft has its own API embedded to make developers feel easy to write code. But this does not mean that your HTML5 code will work absolutely correctly without any changes on Metro UI. In IE 10, it may run, but to make it an appx, you might need to change few things.
As new UI stack is introduced by Microsoft, we will soon release a new version of “UI Atoms” that will allow users to write Windows Runtime Metro UI apps with UI Atoms Controls.
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
LambdaBinder class helps in creating complex binding expressions without having to create IValueConverter and IMultiValueConverter, it lets you write inline expresions with advanced binding scenarios.
Lets say, you have two TextBox for first and last name and you want a Title to be displayed as addition of both.
So lets say, you can write it as follow,
() => firstName.Text + " " + lastName.Text);
() => string.Format("{0} {1}",
firstName.Text, lastName.Text));
You can pass on the Linq expression to Bind extension method of LamdaBinder and that will convert and set binding so that anytime if firstName or lastName is modified, the title will be updated automatically.
Assuming I want some hypothetical visibility logic, for example, only if the firstName is entered, lastName should be visible.
() => firstName.Text.Length > 0 ? Visibility.Visible :
Visibility.Collapsed);
You can also use this to avoid writing IValueConverters and do inline binding in code very easily.
{
public static void Bind(
this DependencyObject dest,
DependencyProperty destProperty,
Expression<Func<object>> func)
{
MultiBinding b = new MultiBinding();
b.Converter = new MultiDelegateConverter(func.Compile());
LambdaBindingBuilder bb = new LambdaBindingBuilder(b);
bb.Visit(func.Body);
BindingOperations.SetBinding(dest, destProperty, b);
}
}
public class LambdaBindingBuilder : ExpressionVisitor
{
private MultiBinding multiBinding;
private string lastPath = null;
public LambdaBindingBuilder(MultiBinding mb)
{
this.multiBinding = mb;
}
protected override System.Linq.Expressions.Expression VisitMember(MemberExpression node)
{
PropertyInfo p = node.Member as PropertyInfo;
if (p != null) {
if (string.IsNullOrWhiteSpace(lastPath))
{
lastPath = p.Name;
}
else {
lastPath = p.Name + "." + lastPath;
}
}
FieldInfo f = node.Member as FieldInfo;
if (f != null) {
Binding b = new Binding(lastPath);
b.Source = System.Linq.Expressions.Expression.Lambda<Func<object>>(node).Compile()();
multiBinding.Bindings.Add(b);
lastPath = null;
}
return base.VisitMember(node);
}
protected override System.Linq.Expressions.Expression VisitConstant(ConstantExpression node)
{
if (!string.IsNullOrWhiteSpace(lastPath)) {
Binding b = new Binding(lastPath);
b.Source = node.Value;
multiBinding.Bindings.Add(b);
lastPath = null;
}
return base.VisitConstant(node);
}
}
public class MultiDelegateConverter : IMultiValueConverter
{
private Func<object> func;
public MultiDelegateConverter(Func<object> func)
{
this.func = func;
}
public object Convert(object[] values,
Type targetType,
object parameter,
System.Globalization.CultureInfo culture)
{
return func();
}
public object[] ConvertBack(object value,
Type[] targetTypes,
object parameter,
System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
LambdaBinder is part of UI Atoms suite. At NeuroSpeech, we do research on UI and we are coming up with more interesting featues in UI Atoms.
Please Click Here to download latest update of UI Atoms with AtomForm including Tabs in the form.
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.
UI Atoms version 1.2.22 resolves Cascaded ComboBoxes issue in MVVM pattern. Advanced AtomForm is now capable of handling cascaded ComboBoxes with MVVM and it also integrates well with third party controls.
Recently we identified few issues with MVVM implementation in Silverlight regarding ComboBoxes. ComboBox looses its “SelectedValue” binding once the ItemsSource of ComboBox changes. This needed some workaround as well as Modifying DataForm is very painful as you may need very complex form designs in regular business applications.
1. Create Models
Lets assume we need to edit a Customer’s Country and City, as we change the Country the list of cities should change it. Problem with existing ComboBox and DataForm is, as soon as list of cities changes, ComboBox’s SelectedValue binding vanishes. So lets create Customer Model first.
Each of properties in CustomerViewModel raises PropertyChanged event for corresponding properties when modified.
When selected customer changes, SelectedCountry also changes and which changes Cities property, so in drop down we can display the list of cities of selected country.
Important:
Your SelectedCountry property, where you need Change of Selection event must not raise PropertyChanged event in “set” method as shown below…, however you may turn it off or on based on your UI behavior. WPF has no problem but Silverlight has issues and it works better if PropertyChanged event is not raised.
{
get
{
return _SelectedCountry;
}
set
{
_SelectedCountry = value;
//if (PropertyChanged != null)
// PropertyChanged(this, new PropertyChangedEventArgs("SelectedCountry"));
if (_SelectedCountry != null)
{
Cities = _SelectedCountry.Cities;
}
}
}
2. Create Master View
Master View control declares grid with two columns, left side displaying list of customers and on right side displaying details of the selected customer.
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ns="http://uiatoms.neurospeech.com/silverlight"
xmlns:local="clr-namespace:PrismTest"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<local:ViewModelLocator x:Key="locator"/>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="400" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ListBox
DisplayMemberPath="Name"
x:Name="list"
SelectedItem="{Binding ViewModel.SelectedCustomer,Source={StaticResource locator}, Mode=TwoWay}"
ItemsSource="{Binding ViewModel.Customers,Source={StaticResource locator}}" />
<local:CustomerView
Grid.Column="1" />
<ns:AtomTraceView
Grid.Row="1" Grid.ColumnSpan="2"/>
</Grid>
</UserControl>
Lets analyze Bindings,
- ListBox’s ItemsSource is bound to ViewModel.Customers which returns list of available customers.
- ListBox’s SelectedItem is bound (two way) to ViewModel.SelectedCustomer.
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ns="http://uiatoms.neurospeech.com/silverlight"
xmlns:local="clr-namespace:PrismTest"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<local:ViewModelLocator x:Key="locator"/>
</UserControl.Resources>
<ns:AtomForm DataContext="{Binding ViewModel.SelectedCustomer,Source={StaticResource locator}}">
<ns:AtomTextBox Text="{Binding Name, Mode=TwoWay}"
ns:AtomForm.Label="Name:" />
<ns:AtomComboBox ns:AtomForm.Label="Country:"
SelectedValuePath="CountryID"
DisplayMemberPath="Name"
ItemsSource="{Binding ViewModel.Countries,Source={StaticResource locator}}"
SelectedItem="{Binding ViewModel.SelectedCountry,Source={StaticResource locator}, Mode=TwoWay}"
SelectedValue="{Binding CountryID, Mode=TwoWay}"
/>
<ns:AtomComboBox ns:AtomForm.Label="City:"
SelectedValuePath="CityID"
DisplayMemberPath="Name"
ItemsSource="{Binding ViewModel.Cities,Source={StaticResource locator}}"
SelectedValue="{Binding CityID, Mode=TwoWay}"
/>
</ns:AtomForm>
</UserControl>
Lets analyze the bindings,
- AtomForm’s DataContext is bound to SelectedCustomer of ViewModel, which comes from SelectedItem of Parent Control
- AtomTextBox’s Text is bound to Name (of AtomForm’s DataContext’s binding) with Mode=TwoWay
- AtomComboBox
- ItemsSource is bound to ViewModel.Countries which returns list of countries.
- SelectedValue is bound to CountryID (of AtomForm’s DataContext’s binding) with Mode=TwoWay
- SelectedItem is bound to ViewModel.SelectedCountry, which triggers change of SelectedCountry property on ViewModel which changes list of cities.
- AtomComboBox (this is the one that’s tricky, normal ComboBox does not work here)
- ItemsSource is bound to ViewModel.Cities which returns list of cities of SelectedCountry.
- SelectedValue is bound to CityID (of AtomForm’s DataContext’s binding) with Mode=TwoWay
3. Cascaded ComboBox
You can see that the cascaded ComboBox work well with AtomForm and AtomComboBox and its easy to design AtomForm with MVVM with so much less code then that of DataForm and ComboBoxes.
Please download the latest version of UI Atoms 2010 suite to try MVVM + AtomForm + Cascaded ComboBoxes.
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.
UI Atoms 2010 v1.9 update now includes Trace API for developers to log information on screen just like normal .NET application.
Diagnostics Trace API
Microsoft .NET provided Trace API to help in troubleshoot problems which is of great help at time of development. But Silverlight developers are disappointed for not being able to trace in Silverlight apps. However running apps on multiple platform isn’t quite easy, and different user experiences on different platforms raise unexpected issues. Such issues are difficult to resolve as deployed client computer may not have development tools available to troubleshoot and see application logs.
Trace.WriteLine(“ Hello World “);
We sure miss Trace in Silverlight, so we decided to add similar diagnostics API in Silverlight.
Trace Viewer
In Silverlight, as it runs inside a browser, there is no way to see any trace information not only this, on different platforms like Mac, it may be too difficult for no technical user to install and enable remote debugging.
So we decided to include a visual component that can be put anywhere on screen, just like “Output” pane in visual studio. Its developer’s choice to fit the Trace Viewer. Its pretty simple Text View control, where in you can see lines of log automatically scrolling down as log grows.
AtomTraceView
UI Atoms’s AtomTraceView control works well with Silverlight as well as WPF, in WPF it uses inbuilt Trace functionality and displays trace information to user, and in Silverlight we have added custom API, that is used to display Trace information. Syntax is pretty simple.
<Grid> <Grid.RowDefintions> <RowDefinition/> <RowDefinition Height="200"/> <Grid.RowDefintions> <MyUserControl/> <AtomTraceView Grid.Row="1"/> <Grid>
This way you can include AtomTraceView at the bottom of your page and it will display all traces programmed by the developer.
Limited API
However, .NET Trace API is very huge, and it is extensible, but Trace API offered by UI Atoms as of now is very limited, not by the design but by implications, Silverlight itself is very limited platform, this is just an Add-on for users to troubleshoot their apps.
Trace Statements in Silverlight
In order to write Trace statements, you have to import following namespace,
using NeuroSpeech.UIAtoms.Core;
Then you can write following statements and they will appear in AtomTraceView Control.
AtomTrace.WriteLine(" Hello World "); AtomTrace.WriteLine( exception.ToString() ); AtomTrace.WriteLine( string.Format("{0},{1} Coordinates", x, y) );
The AtomTrace class exists for both Silverlight and WPF, so it becomes easier to write your logs with AtomTrace instead of Trace, so your code can be shared on both Silverlight as well as WPF.
Trace and Multithreading
Trace statements can be accessed by thread in Silverlight app, however the sequence in which it will appear can not be guaranteed because it depends upon the processor and scheduling algorithm used in thread pool of Silverlight application.
Custom Trace Listener
Just similar to .NET, we have included AtomTraceListener class, which you can derive and customize trace information according to your need as well as it has Traced event, which you can implement and get trace notifications anywhere..
Future of Trace API in Silverlight
When Trace API will be included by Microsoft in future edition of Silverlight, we may plan to remove Trace API, to be consistent with the Silverlight development workflow, this API has been enabled only to write shared code between WPF and Silverlight environment. However otherwise, we plan to make tracing more rich with UI Atoms. But for now, it is very helpful for everyone.
Live Demo
Click Here to see live demo of Tracing in Silverlight.
Click Here to download demo version of UI Atoms 2010.
Scientific calculations often require measurement unit conversion and demand high accuracy. Although it may be very easy to google around the web and get some formula, however when we looked into SI units and its Unit Guide, then we realized that even units with same name have little different value in different countries and continents.
So we decided to bring them all into User Interface control for WPF and Silverlight.
- Which allows Developer to adhere to one standard unit.
- Which allows users to choose unit of their own choice.
- See the conversion while editing the value.
The following sample code displays how to use these unit converters in Silverlight and WPF.
Properties
Each of the measurement unit converter controls has four properties as mentioned below.
DisplayValue Property:
This is the editable value displayed in the text box, and user can directly modify this value by either using up/down arrow buttons or by typing in the value. The display value works in conjunction with the type of unit that is selected in Display Unit ID property.
DisplayUnitID Property:
Every measurement unit has different ID assigned by our developers to uniquely identify alpha numeric ID within the set of units. For example, meter and centimeter are IDs of Length. However you do not have to remember these IDs, when you edit your UI in Visual Studio, you can configure these IDs in the property editor. End user can visually modify Display Unit in order to retrieve and enter value in the desired unit.
ValueUnitID Property:
The DisplayUnitID is attached to DisplayValue, similarly the underlying actual value is attached with ValueUnitID property. This Unit ID is usually set to a constant throughout the lifetime of the application and is already defaulted to SI unit. e.g. for Length, it is set to meter. We recommend you to change this only if your base unit requirement is something different then SI unit. This unit can not be changed by end user it can only be programmed in the code at design time.
Value Property:
The value property is something which you are interested saving in the database and use it as base value. This is the converted value of unit ValueUnitID specified from display value of display unit.
Example:
In the first control in the above picture, Display Value is 100, Display Unit is Fathom, Value Unit is meter, so converted value in meter is 182.8804.
Live Sample:
Click here to view live sample in Silverlight.
Download Demo:
Click here to download the demo version of UI Atoms.
Building line of business applications for over years, we realized that the Silverlight DataForm offers very small subset of features that are needed in the long run. We figured out the problem with form based applications, that frustrates developers. That is “Change Management”.
Although WPF/Silverlight does offer very customizable UI designing platform but when we go on the field to develop ling of business applications, we realize that initial development hardly takes any time but maintenance is very difficult.
Lets review the designing problems of panels such as Grid, StackPanel, Canvas etc.
Standard Form Design
Lets review standard form design that is expected, this is the layout that can not be made except canvas panel because there is no way we can support variable columns per row. If you notice, first two rows have 3 columns equally placed and last 2 rows have two columns equally placed. Every field has description at the bottom and red required asterisk (*).
Initial Form Design
The first draft of UI in any application is very simple and we probably do it in minutes.
Changes Requested
But the bigger problem always comes later on when changes are requested.
Atom Flexible Grid
This is the reason we created “AtomFlexibleGrid” which supports variable columns per row as displayed in the picture above. You can see that form and the flexible grid have a property called “RowLayout” which accepts comma separated cell values to be displayed per row. As displayed in the example below.
This is very helpful in quick design, but this also way to easy to manage when changes are requested.
- Intelligent Flow Layout with ability share multiple items in single row.
- No attributes required on any child items.
- Comma Separated “RowLayout” instantly renders variable 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.
Benefits of Atom Flexible Grid over Canvas, Grid and 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.
Form Field Layout
This is how individual components of Form Field are positioned within the Form Field. Collapsible panels are only visible if the content is provided. However in future more of such components will be available in Form Field to standardize the fields.
In next slide, you will see how the fields are positioned in the Form.
Change Management
Changing layout is extremely simple, as you can simply move your items up and down and change “RowLayout” text field to quickly review how it will look. No tedious drag and drop and no typing.
Live Form Demos
Click here to see live UI Atoms form demos for Silverlight.
Click here to download UI Atoms form demos for WPF.
Here at NeuroSpeech, we figured out the problem with forms based business applications that frustrates developers and change management is not only time consuming but its quite boring job to do.
Although WPF/Silverlight does offer very customizable UI designing platform but when we go on the field to develop ling of business applications, we realize that initial development hardly takes any time but maintenance is very difficult.
AtomForm has been designed to offer a standard rich business class user interface along with various advanced validation methods and the change management is very easy as “AtomFlexibleGrid” offers simple row layout concept that is offered nowhere today.
