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

This walkthrough shows you how to use MVVM pattern to display data using UXItemsControl.

This walkthrough demonstrate the following concept:

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\PhotoDataSource.xml.
  3. Click on the PhotoDataSource.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 images from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.Web\ClientBin\Assets\Images\Photos].

Next, you will create the Photo 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.

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

To create the Photo Model Class

  1. Create a model class that inherits ModelBase class under the Models folder. You can name it Photo.cs.
  2. In Photo model class, create Dimension property by defining the backing field along with complete getter and setter in the property. You also need to call the OnPropertyChanged method after the backing field is assigned to notify the binding engine that value has been updated.
    C#
    Copy Code 
    #region Fields

private string _dimension;

#endregion

#region Properties

public string Dimension
{
    get
    {
        return this._dimension;
    }

    set
    {
        if (this._dimension != value)
        {
            this._dimension = value;
            this.OnPropertyChanged("Dimension");
        }
    }
}
  3. Create FileName, FileUri and Size properties by repeating step number 2.
    C#
    Copy Code 
    #region Fields

private string _dimension;
private string _fileName;
private string _fileUri;
private string _size;

#endregion

#region Properties

public string Dimension
{
    get
    {
        return this._dimension;
    }

    set
    {
        if (this._dimension != value)
        {
            this._dimension = value;
            this.OnPropertyChanged("Dimension");
        }
    }
}

public string FileName
{
    get
    {
        return this._fileName;
    }

    set
    {
        if (this._fileName != value)
        {
            this._fileName = value;
            this.FileUri = "/Assets/Images/" + value + ".png";
            this.OnPropertyChanged("FileName");
        }
    }
}

public string FileUri
{
    get
    {
        return this._fileUri;
    }

    set
    {
        if (this._fileUri != value)
        {
            this._fileUri = value;
            this.OnPropertyChanged("FileUri");
        }
    }
}

public string Size
{
    get
    {
        return this._size;
    }

    set
    {
        if (this._size != value)
        {
            this._size = value;
            this.OnPropertyChanged("Size");
        }
    }
}

#endregion
  4. Add Photo constructor to the Photo model class to extract the data from the XElement..
    C#
    Copy Code 
    #region Constructors

public Photo(XElement p)
{
    this._dimension = p.Element("Dimension").Value.Trim();
    this._fileName = p.Element("FileName").Value.Trim();
    this._fileUri = "/UXItemsControlMVVM;component/Assets/Images/" + this._fileName + ".jpg";
    this._size = p.Element("Size").Value.Trim();
}

#endregion

Creating The View

This section steps you through the process of creating a page that uses ClientUI controls such as UXItemControl. The UXItemControl is used to display a collection of Photo data.

To create the View

  1. Add a new UXPage to the Views folder in your Silverlight project and name it Photo.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. Add a Border. Set the following properties to the control.
    Properties Value
    HorizantalAlignment Center
    VerticalAlignment Center
    Width 500
    Height 400
  3. Add a UXItemControl control to the Border.
    Set the Width and Height properties to Auto.
    XAML
    Copy Code 
    <Grid x:Name="LayoutRoot">
        <Border BorderBrush="Silver" BorderThickness="1" Height="400" HorizontalAlignment="Center" Name="border1" VerticalAlignment="Center" Width="500">
                <Intersoft:UXItemsControl Name="uXItemsControl1" />
        </Border>
</Grid>

  4. Create a new ItemsPanelTemplate for with name ItemsPanelTemplate1 and put it in Intersoft:UXPage.Resources.
    XAML
    Copy Code 
    <Intersoft:UXPage.Resources>
    ...
    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
        <Intersoft:WrapPanel />
    </ItemsPanelTemplate>
    ...
</Intersoft:UXPage.Resources>
  5. Create a new DataTemplate for with name DataTemplate1 and put it in Intersoft:UXPage.Resources.
    XAML
    Copy Code 
    <Intersoft:UXPage.Resources>
    ...
    <DataTemplate x:Key="DataTemplate1">
        <Border BorderBrush="Silver" BorderThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center" MaxWidth="100">
            <StackPanel>
                <Intersoft:ImageLoader VerticalAlignment="Center" HorizontalAlignment="Center" Margin="4"/>
                <TextBlock HorizontalAlignment="Center" FontSize="9"/>
                <TextBlock HorizontalAlignment="Center" FontSize="8"/>
            </StackPanel>
        </Border>
    </DataTemplate>
</Intersoft:UXPage.Resources>

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. The ViewModel defines the Photos property to represent an observable collection of Photo.

To create the ViewModel

  1. Add a new class to the ViewModels folder in your Silverlight project and name it PhotoViewModel.cs.
  2. Open the PhotoViewModel.cs and inherit the class from ViewModelBase class.
    C#
    Copy Code 
    public class PhotoViewModel : ViewModelBase { }
  3. In the ViewModel, you add the Photos properties which represent a collection of Photo.
    C#
    Copy Code 
    // Fields
private Photo _selectedItem = null;

public ObservableCollection<Photo> Photos { get; set; }
  4. Create a LoadData method to fill the Photos property based on the data from PhotoDataSource.xml and invoke the method during object construction.
    C#
    Copy Code 
    public PhotoViewModel()
{
    this.LoadPhotos();
}

private void LoadPhotos()
{
    // loads book data from xml file
    StreamResourceInfo resource = System.Windows.Application.GetResourceStream(
            new Uri("UXItemsControlMVVM;component/Assets/Data/PhotoDataSource.xml", UriKind.Relative));

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

    var photos = from x in doc.Descendants("Photo")
                    select new Photo(x);

    this.Photos = new ObservableCollection<PhotoViewModel>();

    foreach (Photo photo in photos)
    {
        this.Photos.Add(new PhotoViewModel(photo));
    }

    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 such as the items source, data context and data template.

To bind the ViewModel pattern

  1. In Photo.xaml, add the following mark up to instantiate PhotoViewModel in Photo.xaml page.
    XAML
    Copy Code 
    <Intersoft:UXPage.Resources>
    <ViewModels:PhotoViewModel x:Key="PhotosData" />
    ...
</Intersoft:UXPage.Resources>
  2. Inside the Photo.xaml, locate the Border under Grid.
  3. Bind the DataContext property of the Border to {StaticResource PhotosData}.
    UXPage1
    Copy Code 
    <Grid x:Name="LayoutRoot">
    <Border BorderBrush="Silver" BorderThickness="1" Height="400" HorizontalAlignment="Center" Name="border1" VerticalAlignment="Center" Width="500" DataContext="{StaticResource PhotosData}">
        ...
    </Border>
</Grid>
  4. In Photo.xaml, locate the DataTemplate under Intersoft:UXPage.Resources.
  5. Bind the controls inside DataTemplate such as ImageLoader and TextBlock to specific properties from PhotoViewModel such as shown in the following example. 
    XAML
    Copy Code 
    <Intersoft:UXPage.Resources>
    ...
    <DataTemplate x:Key="DataTemplate1">
        <Border BorderBrush="Silver" BorderThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center" MaxWidth="100">
            <StackPanel>
                <Intersoft:ImageLoader ImageSource="{Binding FileUri}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="4"/>
                <TextBlock Text="{Binding FileName}" HorizontalAlignment="Center" FontSize="9"/>
                <TextBlock Text="{Binding Dimension}" HorizontalAlignment="Center" FontSize="8"/>
            </StackPanel>
        </Border>
    </DataTemplate>
</Intersoft:UXPage.Resources>
  6. In Photo.xaml, locate the UXItemControl under Border.
  7. Bind the ItemSource, ItemTemplate and ItemsPanel properties of the UXItemControl from the ViewModel through the provided properties, such as shown in the following example.
    XAML
    Copy Code 
    <Border BorderBrush="Silver" BorderThickness="1" Height="400" HorizontalAlignment="Center" Name="border1" VerticalAlignment="Center" Width="500" DataContext="{StaticResource PhotosData}">
    <Intersoft:UXItemsControl Name="uXItemsControl1" ItemsSource="{Binding Path=Photos}" ItemTemplate="{StaticResource DataTemplate1}" ItemsPanel="{StaticResource ItemsPanelTemplate1}" />
</Border>

  8. 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 classes and page based on the MVVM pattern. You also learned how to bind UXItemControl to a collection of data and how to use ItemTemplate to display the contact detail.

For more information about application development using MVVM pattern, see MVVM Pattern Overview.

Complete Code Listing

This section lists the complete code used in this walkthrough.

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

namespace UXItemsControlMVVM.Models
{
    public class Photo: ModelBase
    {
        #region Constructors

        public Photo(XElement p)
        {
            this._dimension = p.Element("Dimension").Value.Trim();
            this._fileName = p.Element("FileName").Value.Trim();
            this._fileUri = "/UXItemsControlMVVM;component/Assets/Images/" + this._fileName + ".jpg";
            this._size = p.Element("Size").Value.Trim();
        }

        #endregion

        #region Fields

        private string _dimension;
        private string _fileName;
        private string _fileUri;
        private string _size;

        #endregion

        #region Properties

        public string Dimension
        {
            get
            {
                return this._dimension;
            }

            set
            {
                if (this._dimension != value)
                {
                    this._dimension = value;
                    this.OnPropertyChanged("Dimension");
                }
            }
        }

        public string FileName
        {
            get
            {
                return this._fileName;
            }

            set
            {
                if (this._fileName != value)
                {
                    this._fileName = value;
                    this.FileUri = "/Assets/Images/Photos/" + value + ".png";
                    this.OnPropertyChanged("FileName");
                }
            }
        }

        public string FileUri
        {
            get
            {
                return this._fileUri;
            }

            set
            {
                if (this._fileUri != value)
                {
                    this._fileUri = value;
                    this.OnPropertyChanged("FileUri");
                }
            }
        }

        public string Size
        {
            get
            {
                return this._size;
            }

            set
            {
                if (this._size != value)
                {
                    this._size = value;
                    this.OnPropertyChanged("Size");
                }
            }
        }

        #endregion
    }
}

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

    <Intersoft:UXPage.Resources>
        <ViewModels:PhotoViewModel x:Key="PhotosData" />
        <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
            <Intersoft:WrapPanel />
        </ItemsPanelTemplate>
        <DataTemplate x:Key="DataTemplate1">
            <Border BorderBrush="Silver" BorderThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center" MaxWidth="100">
                <StackPanel>
                    <Intersoft:ImageLoader ImageSource="{Binding FileUri}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="4"/>
                    <TextBlock Text="{Binding FileName}" HorizontalAlignment="Center" FontSize="9"/>
                    <TextBlock Text="{Binding Dimension}" HorizontalAlignment="Center" FontSize="8"/>
                </StackPanel>
            </Border>
        </DataTemplate>
    </Intersoft:UXPage.Resources>

    <Grid x:Name="LayoutRoot">
        <Border BorderBrush="Silver" BorderThickness="1" Height="400" HorizontalAlignment="Center" Name="border1" VerticalAlignment="Center" Width="500" DataContext="{StaticResource PhotosData}">
            <Intersoft:UXItemsControl Name="uXItemsControl1" ItemsSource="{Binding Path=Photos}" ItemTemplate="{StaticResource DataTemplate1}" ItemsPanel="{StaticResource ItemsPanelTemplate1}" />
        </Border>
    </Grid>
</Intersoft:UXPage>

PhotoViewModel.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 UXItemsControlMVVM.Models;
using System.Windows.Media.Imaging;
using System.Collections.ObjectModel;
using System.Windows.Resources;
using System.Xml.Linq;
using System.Linq;

namespace UXItemsControlMVVM.ViewModels
{
    public class PhotoViewModel : ViewModelBase
    {
        // Fields
        private Photo _selectedItem = null;

        public ObservableCollection<Photo> Photos { get; set; }

        public PhotoViewModel()
        {
            this.LoadPhotos();
        }

        private void LoadPhotos()
        {
            // loads book data from xml file
            StreamResourceInfo resource = System.Windows.Application.GetResourceStream(
                    new Uri("UXItemsControlMVVM;component/Assets/Data/PhotoDataSource.xml", UriKind.Relative));

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

            var photos = from x in doc.Descendants("Photo")
                         select new Photo(x);

            this.Photos = new ObservableCollection<Photo>();

            foreach (Photo photo in photos)
            {
                this.Photos.Add(photo);
            }

            resource.Stream.Close();
        }

        protected virtual void InvalidateCommands()
        {
        }
    }
}
See Also
UXItemsControl 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