Line of Business Controls for WPF & Silverlight

Demo Version

UI Atoms is designed to work smooth in WPF as well as Silverlight, you can write and reuse exact same code for both WPF as well as Silverlight.

Check out Live Silverlight Demo

Click Here to Download Trial.

Like UI Atoms?

MVVM + AtomForm + Cascaded ComboBoxes

Thursday, October 21, 2010 @ 11:10 AM posted by Akash

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.

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

Leave a Reply