This walkthrough shows how to bind UXComboBox using MVVM pattern.

In this walkthrough, you perform the following tasks:

• Create ClientUI MVVM Application project using Intersoft ClientUI MVVM Application project template.
• Create the Model class that represents the Country data entity.
• Create the View page that represents the user interface of the application.
• Create the ViewModel class that describes the View.
• Bind the ViewModel to the View.

Prerequisites

You need the following components to complete this walkthrough:

• Visual Studio 2010
• Silverlight 4 Tools for Visual Studio 2010
• Intersoft ClientUI

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

RegistrationFormViewModel.cs

RegistrationForm.XAML

See Also