Skip to end of metadata
Go to start of metadata

This walkthrough shows how to bind data to UXListBox using MVVM pattern.

Prerequisites

You need the following components to complete this walkthrough:

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

On this page:

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\ContactDataSource.xml.
  3. Click on the ContactDataSource.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, create new folder with name Photos.
  4. In Photos folder, copy the images from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.Assets\Images\Photos\].

Next, you will create the Contact model class that represent the data entity used in this walkthrough.

Creating Model Class

This section shows you how to create the Contact model class that represents the data entity used in this walkthrough. To create the Contact model class, see Walkthrough: Creating Model for Contact Data.

Next, you will create the view for your simple contacts list application.

Creating the View

This section steps you through the process of creating a page that uses a variety of ClientUI controls such as Intersoft DockPanel, StylishLabel, UXSeparator and UXListBox. The UXListBox is used to display a collection of Contact data.

  1. Add a new UXPage to the Views folder in your Silverlight project and name it ContactList.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 ContactList.xaml page and clear the content inside the LayoutRoot.
  3. Add Border control inside the LayoutRoot and set the following properties to the control:

    PropertyValue
    BackgroundWhite
    CornerRadius8
    VerticalAlignmentCenter
    HorizontalAlignmentCenter

    In the Border's effect you also need to set the ShadowDepth property to 0 and BlurRadius property to 8

  4. Add Intersoft DockPanel control to the Border and set the following properties to the control:

    PropertyValue
    FillChildModeCustom
    Width400
    Margin4
  5. Add StylishLabel control to the Intersof :DockPanel and set the following properties to the control:

    PropertyValue
    ContentContact List
    Intersoft:DockPanel.DockTop
    CornerRadius4,4,0,0
    BackgroundWhite
    HorizontalContentAlignmentLeft
    FontSize18.667
    Padding12,12,12,8
    BorderThickness0
    Foreground#FF234385
  6. Add UXSeparator control to the DockPanel and set the following properties to the control:

    PropertyValue
    Intersoft:DockPanel.DockTop
    Margin12,0
    Background#FF8EA2CC
  7. Add Grid control to the DockPanel as container for the UXListBox. Set the Margin property to 12 and Intersoft:DockPanel.IsFillElement property to True.
  8. Add UXListBox control to the Grid and set the following properties:

    PropertyValue
    BorderBrush{x:Null}
    HorizontalAlignmentStretch
    IsTextSearchEnabledTrue
    ItemContentTypeContentAndImage
    Padding2
    ItemImageMargin0,0,12,0
    ItemImageHeight64
    ItemImageWidth64
    Height300
    FontSize14.667
    XAML

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 ContactList ViewModel

  1. Add a new class to the ViewModels folder in your Silverlight project and name it ContactListViewModel.cs.
  2. Open ContactListViewModel.cs and inherit the class from ViewModelBase class.

    C#
  3. In this ViewModel, you add the LoadData method to get the data from ContactDataSource.xml and stored in ContactsData property.

    C#

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 ContactList View to the ContactListViewModel class

  1. Declare the namespace that maps to the ContactListViewModel class in the ContactList page.

    XAML
  2. Instantiate a new instance of the ContactListViewModel class in the UXPage resources and name it ContactsData.

    XAML
  3. Bind the DataContext property of the Grid that contains UXListBox to the ContactsData through the static resource extension markup.

    XAML
  4. Bind ItemsSource property of the UXListBox to the ContactsData property that existed in the ViewModel.

    XAML
  5. Set the UXListBox's properties:

    PropertyValue
    SelectedValuePathId
    DisplayMemberPathName
    ImageMemberPathPhoto
    XAML
  6. Finally, save and run the project

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 UXListBox 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.

Contact.cs

C#

ContactListViewModel.cs

C#

ContactList.xaml

XAML