Intersoft ClientUI Documentation
Walkthrough: Display Data in UXComboBox using MVVM Pattern
Intersoft ClientUI 8 > ClientUI Fundamentals > MVVM Pattern Overview > MVVM Pattern Walkthroughs > Walkthrough: Display Data in UXComboBox using MVVM Pattern

This walkthrough shows how to bind UXComboBox using MVVM pattern.

In this walkthrough, you perform the following tasks:

Prerequisites

You need the following components to complete this walkthrough:

Creating a new ClientUI MVVM Application Project

The first step is to create a new ClientUI MVVM Application project using Intersoft ClientUI MVVM Application project template in Visual Studio.

To create the ClientUI MVVM Application project

  1. Start Visual Studio 2010.
  2. Create a new ClientUI MVVM Application project using Intersoft ClientUI MVVM Application project template. To learn more, see Walkthrough: Create New Intersoft ClientUI MVVM Application Template.
  3. In project reference, add System.Xml.Linq.dll. This assembly is required to perform LINQ query to xml data.

To add the data file

  1. In your project, create new folder with name Data.
  2. In Data folder, insert the data source from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.Assets\Data\CountryDataSource.xml.
  3. Click on the CountryDataSource.xml file and press F4 to open the Property Window. Change the Build Action property to Resources. 

To add the resources file

  1. In your project, create new folder with name Assets.
  2. In Assets folder, create new folder with name Images.
  3. In Images folder, copy the step1.jpg image from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.InputControls\Assets\Images]

Creating Model Class

This section shows you how to create Country model class that represents the data entity used in this walkthrough. The Country model class contains constructors to easily parse data from XML.

  1. Create a model class that inherits ModelBase class under the Models folder. You can name it Country.cs.
  2. Add Name property to the Country model class by defining the backing field along with complete getter and setter in the property. In the setter property, you need to call the OnPropertyChanged method after the backing field is assigned to the new value.
    C#
    Copy Code 
    private string _name;

public string Name
{
    get
    {
        return this._name;
    }

    set
    {
        if (this._name != value)
        {
            this._name = value;
            this.OnPropertyChanged("Name");
        }
    }
}
  3. Add the following constructors.
    C#
    Copy Code 
    public Country()
{
}

public Country(XElement c)
    : this()
{
    this._name = c.Value.Trim();
}

Creating the View

This section steps you through the process of creating a page that uses a variety of ClientUI controls such as FieldLabel, UXTextBox, UXButton and UXComboBox. The UXComboBox is used as dropdown field that contains collection of Country data and the other controls is used as additional field for this walkthrough.

To create the View

  1. Add a new UXPage to the Views folder in your Silverlight project and name it RegistrationForm.xaml.
    For more information on how to add a new item in Visual Studio, see Walkthrough: Add New Item such as Page, Dialog Box and Window in VS 2010
  2. Open the newly created RegistrationForm.xaml page and clear the content inside the LayoutRoot.
  3. Add Border inside the LayoutRoot and set the following properties to the control:
    Property Value
    BorderBrush #FFD9E8FC
    BorderThickness 2
    CornerRadius 8
    Width 500
    Height 300
  4. Add Intersoft DockPanel and set the Margin property to 20 and FillChildMode property to Custom. 
  5. Add Image control to the DockPanel and set the following properties to the control:
    Property Value
    Height 56
    Stretch Fill
    Width 56
    HorizontalAlignment Left
    VerticalAlignment Top
    Margin 0,0,8,0
    Source [your project's name];component/Images/step1.jpg
  6. Add TextBlock control to the DockPanel and set the following properties to the control:
    Property Value
    Intersoft:DockPanel.Dock Top
    Text Setup your account
    TextWrapping Wrap
    HorizontalAlignment Left
    VerticalAlignment Center
    FontSize 18.667
    Margin 0,18,0,0
  7. Add another TextBlock control to the DockPanel and set the following properties to the control:
    Property Value
    Intersoft:DockPanel.Dock Top
    Text Please use your valid email address, you'll need to verify before you can continue.
    TextWrapping Wrap
    HorizontalAlignment Left
    VerticalAlignment Center
    Foreground #FF757F95
  8. Add FieldLabel control to the DockPanel and set the following properties to the control:
    Property Value
    Intersoft:DockPanel.Dock Top
    Header Name
    HorizontalAlignment Right
    HeaderWidth 60
    Margin 0,8,0,0
  9. Add UXTextBox control to the FieldLabel and set the Width property to 200 and Margin property to 4,0. 
  10. Repeat step 8 and 9 for Email and Address field.
    XAML
    Copy Code 
    <Grid x:Name="LayoutRoot" Background="White">
    <Border BorderBrush="#FFD9E8FC" Name="border1" BorderThickness="2" CornerRadius="8" Width="500" Height="300">
        <Intersoft:DockPanel Name="dockPanel1" Margin="20" FillChildMode="Custom">
            <Image Height="56" Name="image1" Stretch="Fill" Width="56" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,8,0" Source="/UXComboBoxWithMVVM;component/Images/step1.jpg" />
            <TextBlock Name="textBlock1" Text="Setup your account" Intersoft:DockPanel.Dock="Top" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="18.667" Margin="0,18,0,0" />
            <TextBlock Name="textBlock2" Text="Please use your valid email address, you'll need to verify before you can continue." Intersoft:DockPanel.Dock="Top" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="#FF757F95" />
            <Intersoft:FieldLabel Header="Name" Name="fieldLabel1" Intersoft:DockPanel.Dock="Top" Margin="0,8,0,0" HeaderWidth="60" HorizontalHeaderAlignment="Right">
                <Intersoft:UXTextBox Name="uXTextBox1" Width="200" Margin="4,0" />
            </Intersoft:FieldLabel>
            <Intersoft:FieldLabel Header="Email" Name="fieldLabel2" Intersoft:DockPanel.Dock="Top" HeaderWidth="60" HorizontalHeaderAlignment="Right">
                <Intersoft:UXTextBox Name="uXTextBox2" Width="200" Margin="4,0" />
            </Intersoft:FieldLabel>
            <Intersoft:FieldLabel Header="Address" Name="fieldLabel3" Intersoft:DockPanel.Dock="Top" HeaderWidth="60" HorizontalHeaderAlignment="Right">
                <Intersoft:UXTextBox Name="uXTextBox3" Width="200" Margin="4,0" />
            </Intersoft:FieldLabel>
    </Border>
</Grid>



  11. Add another field for UXComboBox. You can repeat step 8 to create the FieldLabel, then add UXComboBox to the FieldLabel and set the following properties to the control:
    Property Value
    Width 200
    Margin 4,0
    IsEditable True
    DropDownHeight 200

    XAML
    Copy Code 
    <Grid x:Name="LayoutRoot" ... >
    <Border ... >
        <Intersoft:DockPanel ... >
            
            ...

            <Intersoft:FieldLabel Name="fieldLabel4" Intersoft:DockPanel.Dock="Top" Header="Country" HeaderWidth="60" HorizontalHeaderAlignment="Right">
                <Intersoft:UXComboBox Name="uXComboBox1" Width="200" Margin="4,0" IsEditable="True" DropDownHeight="200" />
            </Intersoft:FieldLabel>
        </Intersoft:DockPanel>
    </Border>
</Grid>



  12. Add UXButton to the DockPanel and set the following properties to the control:
    Property Value
    Intersoft:DockPanel.Dock Left
    Content Create Account
    Width 150
    Height 24
    Intersoft:DockPanel.IsFillElement True

    XAML
    Copy Code 
    <Grid x:Name="LayoutRoot" ... >
    <Border ... >
        <Intersoft:DockPanel ... >
            
            ...

            <Intersoft:UXButton Name="uXButton1" Intersoft:DockPanel.Dock="Left" Content="Create Account" Width="150" Height="24" Intersoft:DockPanel.IsFillElement="True" />
        </Intersoft:DockPanel>
    </Border>
</Grid>



Creating the ViewModel

This section steps you through the process of creating a ViewModel class that contains the properties to describe the View that you created in the previous section.

To create the RegistrationForm ViewModel

  1. Add a new class to the ViewModels folder in your Silverlight project and name it RegistrationFormViewModel.cs.
  2. Open RegistrationFormViewModel.cs and inherit the class from ViewModelBase class.
    C#
    Copy Code 
    public class RegistrationFormViewModel : ViewModelBase { }
  3. In this view model, you add the LoadData method to get the data from CountryDataSource.xml and stored in CountriesData property.
    C#
    Copy Code 
    public ObservableCollection<Country> CountriesData { get; set; }

// Constructors
public RegistrationFormViewModel()
{
    this.LoadData();
}

// Commands
private void LoadData()
{
    // loads contact data from xml file
    StreamResourceInfo resource = System.Windows.Application.GetResourceStream(
            new Uri("UXComboBoxWithMVVM;component/Data/CountryDataSource.xml", UriKind.Relative));

    XDocument doc = XDocument.Load(resource.Stream);

    var countries = from x in doc.Descendants("Country")
                    select new Country(x);

    this.CountriesData = new ObservableCollection<Country>();

    foreach (Country country in countries)
    {
        this.CountriesData.Add(country);
    }

    resource.Stream.Close();
}

Binding the View to the ViewModel

In the previous sections, you have learned how to create the Model and ViewModel classes, as well as the View that contains the user interface and controls used in this walkthrough. This section shows how to instantiate the ViewModel in the XAML page and bind the UI elements to the properties in the ViewModel.

To bind the RegistrationForm View to the RegistrationFormViewModel class

  1. Declare the namespace that maps to the RegistrationFormViewModel class in the RegistrationForm page.
    XAML
    Copy Code 
    <Intersoft:UXPage 
        ...
        xmlns:ViewModels="clr-namespace:UXComboBoxWithMVVM.ViewModels"
        ...>
  2. Instantiate a new instance of the RegistrationFormViewModel class in the UXPage resources and name it CountryData.
    XAML
    Copy Code 
    <Intersoft:UXPage ... >

    <Intersoft:UXPage.Resources>
        <ViewModels:RegistrationFormViewModel x:Key="CountryData" />
    </Intersoft:UXPage.Resources>

    ...

</Intersoft:UXPage>
  3. Bind the DataContext property of the FieldLabel that contains UXComboBox to the CountryData through the static resource extension markup.
    XAML
    Copy Code 
    <Grid x:Name="LayoutRoot" ... >
    <Border ... >
        <Intersoft:DockPanel ... >
            
            ...

            <Intersoft:FieldLabel ... DataContext="{Binding Source={StaticResource CountryData}}">
                <Intersoft:UXComboBox ... />
            </Intersoft:FieldLabel>
            
            ...

        </Intersoft:DockPanel>
    </Border>
</Grid>
  4. Set the DisplayMemberPath property of UXComboBox then bind its ItemsSource property to the CountriesData property that existed in the ViewModel.

    XAML
    Copy Code 
    <Grid x:Name="LayoutRoot" ... >
    <Border ... >
        <Intersoft:DockPanel ... >
            
            ...

            <Intersoft:FieldLabel ... >
                <Intersoft:UXComboBox ... ItemsSource="{Binding Path=CountriesData}" DisplayMemberPath="Name" />
            </Intersoft:FieldLabel>
            
            ...

        </Intersoft:DockPanel>
    </Border>
</Grid>
  5. Finally, save and run the project 

    After the application is running in the browser, you can try to expand the Country combobox, you will see that the combobox contains all the country that we have bind.

     

Conclusion

In this walkthrough, you have learned how to create ClientUI MVVM Application project using Intersoft ClientUI MVVM Application project template, and create the classes and page based on the Model, View and ViewModel pattern. You also learned how to bind UXComboBox to a collection of data.

To learn more about UI development using MVVM pattern, see MVVM Pattern Overview.

Complete Code Listing

This section lists the complete code used in this walkthrough.

Country.cs

C#
Copy Code 
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using UXComboBoxWithMVVM.ViewModels;
using System.Xml.Linq;

namespace UXComboBoxWithMVVM.Models
{
    public class Country : ModelBase
    {
        #region Constructors

        public Country()
        {
        }

        public Country(XElement c)
            : this()
        {
            this._name = c.Value.Trim();
        }

        #endregion

        #region Fields

        private string _name;

        #endregion

        #region Properties

        public string Name
        {
            get
            {
                return this._name;
            }

            set
            {
                if (this._name != value)
                {
                    this._name = value;
                    this.OnPropertyChanged("Name");
                }
            }
        }

        #endregion
    }
}

RegistrationFormViewModel.cs

C#
Copy Code 
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Intersoft.Client.Framework.Input;
using System.Collections.ObjectModel;
using UXComboBoxWithMVVM.Models;
using System.Windows.Resources;
using System.Xml.Linq;
using System.Linq;

namespace UXComboBoxWithMVVM.ViewModels
{
    public class RegistrationFormViewModel : ViewModelBase
    {
        // Fields
        public ObservableCollection<Country> CountriesData { get; set; }

        // Constructors
        public RegistrationFormViewModel()
        {
            this.LoadData();
        }

        // Commands
        private void LoadData()
        {
            // loads contact data from xml file
            StreamResourceInfo resource = System.Windows.Application.GetResourceStream(
                    new Uri("UXComboBoxWithMVVM;component/Data/CountryDataSource.xml", UriKind.Relative));

            XDocument doc = XDocument.Load(resource.Stream);

            var countries = from x in doc.Descendants("Country")
                            select new Country(x);

            this.CountriesData = new ObservableCollection<Country>();

            foreach (Country country in countries)
            {
                this.CountriesData.Add(country);
            }

            resource.Stream.Close();
        }
    }
}

RegistrationForm.XAML

XAML
Copy Code 
<Intersoft:UXPage 
        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:Intersoft="http://intersoft.clientui.com/schemas"
        xmlns:ViewModels="clr-namespace:UXComboBoxWithMVVM.ViewModels"
        mc:Ignorable="d"
        x:Class="UXComboBoxWithMVVM.Views.RegistrationForm" 
        Title="RegistrationForm Page"
        d:DesignWidth="640" d:DesignHeight="480">

    <Intersoft:UXPage.Resources>
        <ViewModels:RegistrationFormViewModel x:Key="CountryData" />
    </Intersoft:UXPage.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <Border BorderBrush="#FFD9E8FC" Name="border1" BorderThickness="2" CornerRadius="8" Width="500" Height="300">
            <Intersoft:DockPanel Name="dockPanel1" Margin="20" FillChildMode="Custom">
                <Image Height="56" Name="image1" Stretch="Fill" Width="56" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,8,0" Source="/UXComboBoxWithMVVM;component/Images/step1.jpg" />
                <TextBlock Name="textBlock1" Text="Setup your account" Intersoft:DockPanel.Dock="Top" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="18.667" Margin="0,18,0,0" />
                <TextBlock Name="textBlock2" Text="Please use your valid email address, you'll need to verify before you can continue." Intersoft:DockPanel.Dock="Top" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="#FF757F95" />
                <Intersoft:FieldLabel Header="Name" Name="fieldLabel1" Intersoft:DockPanel.Dock="Top" Margin="0,8,0,0" HeaderWidth="60" HorizontalHeaderAlignment="Right">
                    <Intersoft:UXTextBox Name="uXTextBox1" Width="200" Margin="4,0" />
                </Intersoft:FieldLabel>
                <Intersoft:FieldLabel Header="Email" Name="fieldLabel2" Intersoft:DockPanel.Dock="Top" HeaderWidth="60" HorizontalHeaderAlignment="Right">
                    <Intersoft:UXTextBox Name="uXTextBox2" Width="200" Margin="4,0" />
                </Intersoft:FieldLabel>
                <Intersoft:FieldLabel Header="Address" Name="fieldLabel3" Intersoft:DockPanel.Dock="Top" HeaderWidth="60" HorizontalHeaderAlignment="Right">
                    <Intersoft:UXTextBox Name="uXTextBox3" Width="200" Margin="4,0" />
                </Intersoft:FieldLabel>
                <Intersoft:FieldLabel Name="fieldLabel4" Intersoft:DockPanel.Dock="Top" Header="Country" HeaderWidth="60" HorizontalHeaderAlignment="Right" DataContext="{Binding Source={StaticResource CountryData}}">
                    <Intersoft:UXComboBox Name="uXComboBox1" Width="200" Margin="4,0" IsEditable="True" DropDownHeight="200" ItemsSource="{Binding Path=CountriesData}" DisplayMemberPath="Name" />
                </Intersoft:FieldLabel>
                <Intersoft:UXButton Name="uXButton1" Intersoft:DockPanel.Dock="Left" Content="Create Account" Width="150" Height="24" Intersoft:DockPanel.IsFillElement="True" />
            </Intersoft:DockPanel>
        </Border>
    </Grid>
</Intersoft:UXPage>
See Also
UXComboBox Class

Concepts

MVVM Pattern Overview
Data Binding Overview

Other Resources

Locating the Samples in Local Installation
MVVM Pattern How-to Topics
MVVM Pattern Walkthroughs
Walkthroughs and How-to Topics