This walkthrough shows how to bind data to UXListBox 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 Contact 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\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:
   

   Property	Value
   Background	White
   CornerRadius	8
   VerticalAlignment	Center
   HorizontalAlignment	Center

   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:
   

   Property	Value
   FillChildMode	Custom
   Width	400
   Margin	4

5. Add StylishLabel control to the Intersof :DockPanel and set the following properties to the control:
   

   Property	Value
   Content	Contact List
   Intersoft:DockPanel.Dock	Top
   CornerRadius	4,4,0,0
   Background	White
   HorizontalContentAlignment	Left
   FontSize	18.667
   Padding	12,12,12,8
   BorderThickness	0
   Foreground	#FF234385

6. Add UXSeparator control to the DockPanel and set the following properties to the control:
   

   Property	Value
   Intersoft:DockPanel.Dock	Top
   Margin	12,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:
   
   

   Property	Value
   BorderBrush	{x:Null}
   HorizontalAlignment	Stretch
   IsTextSearchEnabled	True
   ItemContentType	ContentAndImage
   Padding	2
   ItemImageMargin	0,0,12,0
   ItemImageHeight	64
   ItemImageWidth	64
   Height	300
   FontSize	14.667

   
   

   XAML

   Copy Code

   <Grid x:Name="LayoutRoot"> <Border Background="White" CornerRadius="8" VerticalAlignment="Center" HorizontalAlignment="Center"> <Border.Effect> <DropShadowEffect ShadowDepth="0" BlurRadius="8"/> </Border.Effect> <Intersoft:DockPanel FillChildMode="Custom" Width="400" Margin="4"> <Intersoft:StylishLabel Content="Contact List" Intersoft:DockPanel.Dock="Top" CornerRadius="4,4,0,0" Background="White" HorizontalContentAlignment="Left" FontSize="18.667" Padding="12,12,12,8" BorderThickness="0" Foreground="#FF234385"/> <Intersoft:UXSeparator Intersoft:DockPanel.Dock="Top" Margin="12,0" Background="#FF8EA2CC"/> <Grid Margin="12" Intersoft:DockPanel.IsFillElement="True" > <Intersoft:UXListBox BorderBrush="{x:Null}" x:Name="SampleControl1" HorizontalAlignment="Stretch" IsTextSearchEnabled="True" ItemContentType="ContentAndImage" Padding="2" ItemImageMargin="0,0,12,0" ItemImageHeight="64" ItemImageWidth="64" Height="300" FontSize="14.667" /> </Grid> </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.

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#	Copy Code
   public class ContactListViewModel : ViewModelBase { }

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

   C#

   Copy Code

   // Views public ObservableCollection<Contact> ContactsData { get; set; } public ContactListViewModel() { this.LoadContacts(); } private void LoadContacts() { // loads contact data from xml file StreamResourceInfo resource = System.Windows.Application.GetResourceStream( new Uri("UXListBoxMVVM;component/Data/ContactDataSource.xml", UriKind.Relative)); XDocument doc = XDocument.Load(resource.Stream); var contacts = from x in doc.Descendants("Customer") select new Contact(x); this.ContactsData = new ObservableCollection<Contact>(); foreach (Contact contact in contacts) { contact.SetPhoto(this.ContactsData.Count.ToString()); this.ContactsData.Add(contact); } 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 ContactList View to the ContactListViewModel class

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

   XAML	Copy Code
   <Intersoft:UXPage ... xmlns:ViewModels="clr-namespace:UXListBoxMVVM.ViewModels" ...>

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

   XAML	Copy Code
   <Intersoft:UXPage ... > <Intersoft:UXPage.Resources> <ViewModels:ContactListViewModel x:Key="ContactsData" /> </Intersoft:UXPage.Resources> ... </Intersoft:UXPage>

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

   XAML	Copy Code
   <Grid x:Name="LayoutRoot"> <Border ... > ... <Intersoft:DockPanel ... > ... <Grid ... DataContext="{Binding Source={StaticResource ContactsData}}"> <Intersoft:UXListBox ... /> </Grid> </Intersoft:DockPanel> </Border> </Grid>

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

   XAML	Copy Code
   <Grid x:Name="LayoutRoot"> <Border ... > ... <Intersoft:DockPanel ... > ... <Grid ... > <Intersoft:UXListBox ... ItemsSource="{Binding Path=ContactsData}" /> </Grid> </Intersoft:DockPanel> </Border> </Grid>

5. Set the UXListBox's properties:
   
   

   Property	Value
   SelectedValuePath	Id
   DisplayMemberPath	Name
   ImageMemberPath	Photo

   
   

   XAML	Copy Code
   <Grid x:Name="LayoutRoot"> <Border ... > ... <Intersoft:DockPanel ... > ... <Grid ... > <Intersoft:UXListBox ... SelectedValuePath="Id" DisplayMemberPath="Name" ImageMemberPath="Photo" /> </Grid> </Intersoft:DockPanel> </Border> </Grid>

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

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 UXListBoxMVVM.ViewModels;
using System.Xml.Linq;

namespace UXListBoxMVVM.Models
{
    public class Contact : ModelBase
    {
        #region Constructors

        public Contact()
        {
        }

        public Contact(XElement x)
            : this()
        {
            this._id = x.Element("Id").Value.Trim();
            this._name = x.Element("Name").Value.Trim();
        }

        #endregion

        #region Fields

        private string _name = string.Empty;
        private string _id = string.Empty;
        private Uri _photo = null;

        #endregion

        #region Properties

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

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

        public string Id
        {
            get
            {
                return this._id;
            }

            set
            {
                if (this._id != value)
                {
                    this._id = value;
                    this.OnPropertyChanged("Id");
                }
            }
        }

        public Uri Photo
        {
            get
            {
                return this._photo;
            }

            set
            {
                if (this._photo != value)
                {
                    this._photo = value;
                    this.OnPropertyChanged("Photo");
                }
            }

        }

        #endregion

        #region Methods

        public void SetPhoto(string uri)
        {
            this.Photo = new Uri("/UXListBoxMVVM;component/Images/Photos/" + uri + ".jpg", UriKind.RelativeOrAbsolute);
        }

        public void SetPhoto(Uri uri)
        {
            this.Photo = uri;
        }

        #endregion
    }
}

ContactListViewModel.cs

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 UXListBoxMVVM.Models;
using System.Windows.Resources;
using System.Xml.Linq;
using System.Linq;

namespace UXListBoxMVVM.ViewModels
{
    public class ContactListViewModel : ViewModelBase
    {
        // Views
        public ObservableCollection<Contact> ContactsData { get; set; }

        public ContactListViewModel()        {                this.LoadContacts();
        }

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

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

            var contacts = from x in doc.Descendants("Customer")
                           select new Contact(x);

            this.ContactsData = new ObservableCollection<Contact>();

            foreach (Contact contact in contacts)
            {
                contact.SetPhoto(this.ContactsData.Count.ToString());
                                this.ContactsData.Add(contact);
            }

            resource.Stream.Close();
        }
    }
}

ContactList.xaml

<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:UXListBoxMVVM.ViewModels"
        mc:Ignorable="d"
        x:Class="UXListBoxMVVM.Views.ContactList" 
        Title="ContactList Page"
        d:DesignWidth="640" d:DesignHeight="480">

    <Intersoft:UXPage.Resources>
        <ViewModels:ContactListViewModel x:Key="ContactsData" />
    </Intersoft:UXPage.Resources>

    <Grid x:Name="LayoutRoot">
        <Border Background="White" CornerRadius="8"  VerticalAlignment="Center" HorizontalAlignment="Center">
            <Border.Effect>
                <DropShadowEffect ShadowDepth="0" BlurRadius="8"/>
            </Border.Effect>
            <Intersoft:DockPanel FillChildMode="Custom" Width="400" Margin="4">
                <Intersoft:StylishLabel Content="Contact List" Intersoft:DockPanel.Dock="Top" CornerRadius="4,4,0,0" Background="White" 
                                HorizontalContentAlignment="Left" FontSize="18.667" Padding="12,12,12,8" BorderThickness="0" Foreground="#FF234385"/>
                <Intersoft:UXSeparator Intersoft:DockPanel.Dock="Top" Margin="12,0" Background="#FF8EA2CC"/>
                <Grid Margin="12" Intersoft:DockPanel.IsFillElement="True" DataContext="{Binding Source={StaticResource ContactsData}}">
                    <Intersoft:UXListBox BorderBrush="{x:Null}" x:Name="SampleControl1" HorizontalAlignment="Stretch" IsTextSearchEnabled="True" 
                        ItemContentType="ContentAndImage" Padding="2" ItemImageMargin="0,0,12,0" ItemImageHeight="64" ItemImageWidth="64" Height="300" 
                        FontSize="14.667" ItemsSource="{Binding Path=ContactsData}" SelectedValuePath="Id" DisplayMemberPath="Name" ImageMemberPath="Photo" />
                </Grid>
            </Intersoft:DockPanel>
        </Border>
    </Grid>
</Intersoft:UXPage>