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.

 

MVVM-View-Models

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.

Selected Country Property
        public Country SelectedCountry
        {
            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.

MainPage Master View Control
<UserControl x:Class="PrismTest.MainPage"
    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,

  1. ListBox’s ItemsSource is bound to ViewModel.Customers which returns list of available customers.
  2. ListBox’s SelectedItem is bound (two way) to ViewModel.SelectedCustomer.
Customer View Control
<UserControl x:Class="PrismTest.CustomerView"
    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,

  1. AtomForm’s DataContext is bound to SelectedCustomer of ViewModel, which comes from SelectedItem of Parent Control
  2. AtomTextBox’s  Text is bound to Name (of AtomForm’s DataContext’s binding) with Mode=TwoWay
  3. AtomComboBox
    1. ItemsSource is bound to ViewModel.Countries which returns list of countries.
    2. SelectedValue is bound to CountryID (of AtomForm’s DataContext’s binding) with Mode=TwoWay
    3. SelectedItem is bound to ViewModel.SelectedCountry, which triggers change of SelectedCountry property on ViewModel which changes list of cities.
  4. AtomComboBox (this is the one that’s tricky, normal ComboBox does not work here)
    1. ItemsSource is bound to ViewModel.Cities which returns list of cities of SelectedCountry.
    2. 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.

Form

Please download the latest version of UI Atoms 2010 suite to try MVVM + AtomForm + Cascaded ComboBoxes.

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:  

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.

Share
Tagged with: