Intersoft ClientUI Documentation
Walkthrough: Data Binding to UXDock using MVVM Pattern
See Also Send Feedback
Intersoft ClientUI 7 > ClientUI Fundamentals > MVVM Pattern Overview > MVVM Pattern Walkthroughs > Walkthrough: Data Binding to UXDock using MVVM Pattern

Glossary Item Box

This walkthrough shows you how to bind a data collection to UXDock with MVVM pattern.

In this walkthrough, you perform the following tasks:

Prerequisites

You need the following components to complete this walkthrough:

In addition, you also require the following resources to complete this walkthrough:

The assembly is required for the XML data source and images

Creating a new Intersoft 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.
  4. Also add reference to Intersoft.ClientUI.Samples.Assets assembly, the assembly is available from the provided ClientUI sample.

Creating Model Class

This section shows how to create a Model class in Book.cs. The model will map each information in the data entity to a property.

To create the Book model class

  1. Create a new Book.cs under the Models folder and inherit the ModelBase class.
  2. Create a private variable and a public property for Author node with a String data type. In the setter property, OnPropertyChanged method must be called after the property is assigned a new value.
    C# Copy Code 
    private string _author;

public string Author
{
    get
    {
        return _author;
    }
    set
    {
        if (_author != value)
        {
            _author = value;
            OnPropertyChanged("Author");
        }
    }
}
  3. Repeat the process for ID, Title, Category, Price, and Image node. String data type is used for ID, Title, and Category. Double is used for Price. Uri is used for Image.
  4. Create a constructor which accept XElement parameter. The constructor maps information in the data entity to each property in the class.
    C# Copy Code 
    public Book(XElement x)
    : this()
{
    this._author = x.Element("Author").Value.Trim();
    this._title = x.Element("Title").Value.Trim();
    this._category = x.Element("Category").Value.Trim();
    this._ID = x.Element("ID").Value.Trim();
    this._price = double.Parse(x.Element("Price").Value.Trim());
    this._image = new Uri("/Intersoft.ClientUI.Samples.Assets;component/Images/Books/" + x.Element("Image").Value.Trim(), UriKind.RelativeOrAbsolute);
}

Creating the ViewModel Class

This section shows how to create a ViewModel to hold the collection of Book model object.

To create the BookFlowViewModel ViewModel class

  1. Create a new BookFlowViewModel.cs under the ViewModels folder and inherit the ViewModelBase class.
  2. Create a public property to hold the collection of Book model object.
    C# Copy Code 
    public ObservableCollection<Book> FilteredBooks{ get; set; }
  3. Create a LoadBooks method which will be called in the constructor to load the Book object from the XML file to the book collection variable. In this scenario, only books with specific category is loaded.
    C# Copy Code 
    private void LoadBooks()
{
    // loads book data from xml file
    StreamResourceInfo resource = System.Windows.Application.GetResourceStream(
            new Uri("Intersoft.ClientUI.Samples.Assets;component/Data/BookDataSource.xml", UriKind.Relative));

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

    var filteredBooks = (from x in doc.Descendants("Book")
                            where x.Element("Category").Value.Trim() == "Science and Nature"
                            select new Book(x)).Take(8);

    FilteredBooks = new ObservableCollection<Book>(filteredBooks);
}

Creating the View

This section shows how to create a View used in the application interface using the BookFlow.xaml.

To create the BookFlow Page

  1. Add a new UXPage to the Views folder in your Silverlight project and name it BookStrip.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. Declare the namespace that maps to the BookFlowViewModel class.
    XAML Copy Code 
    <Intersoft:UXPage 
        ...
    xmlns:ViewModels="clr-namespace:UXDockMVVM.ViewModels"
        ...
    >
    ...
</Intersoft:UXPage>
  3. Reference the BookFlowViewModel as the page DataContext.
    XAML Copy Code 
    <Intersoft:UXPage.DataContext>
    <ViewModels:BookFlowViewModel />
</Intersoft:UXPage.DataContext>
  4. Add a UXDock control with the following properties:
    Locate the ItemsSource property.
    1. Click the ellipsis button in the header property column, a context menu will appear
    2. Select the Apply DataBinding Options...
    3. From the Tab Path, select FilteredBooks
    Property Value
    HorizontalAlignment Left
    VerticalAlignment Top
    Height 264
    ImageMemberPath Image
    DisplayMemberPath Author
    XAML Copy Code 
    <Intersoft:UXDock Height="264" HorizontalAlignment="Left" Name="uXDock1" VerticalAlignment="Top" ItemsSource="{Binding Path=FilteredBooks}" ImageMemberPath="Image" DisplayMemberPath="Author" />

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 UXDock to a collection of data.

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.

BookFlowViewModel.cs

C# Copy Code 
using System.Collections.ObjectModel;
using System.Linq;
using UXDockMVVM.Models;
using Intersoft.Client.Framework.Input;
using Intersoft.Client.Framework;
using System.Windows.Resources;
using System;
using System.Xml.Linq;

namespace UXDockMVVM.ViewModels
{
    public class BookFlowViewModel : ViewModelBase
    {
        public ObservableCollection<Book> FilteredBooks { get; set; }

        public BookFlowViewModel()
        {
            this.LoadBooks();
        }

        private void LoadBooks()
        {
            // loads book data from xml file
            StreamResourceInfo resource = System.Windows.Application.GetResourceStream(
                    new Uri("Intersoft.ClientUI.Samples.Assets;component/Data/BookDataSource.xml", UriKind.Relative));

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

            var filteredBooks = (from x in doc.Descendants("Book")
                                 where x.Element("Category").Value.Trim() == "Science and Nature"
                                 select new Book(x)).Take(8);

            FilteredBooks = new ObservableCollection<Book>(filteredBooks);
        }
    }
}

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

namespace UXDockMVVM.Models
{
    public class Book : ModelBase
    {
        public Book()
        {
        }

        public Book(XElement x)
            : this()
        {
            this._author = x.Element("Author").Value.Trim();
            this._title = x.Element("Title").Value.Trim();
            this._category = x.Element("Category").Value.Trim();
            this._ID = x.Element("ID").Value.Trim();
            this._price = double.Parse(x.Element("Price").Value.Trim());
            this._image = new Uri("/Intersoft.ClientUI.Samples.Assets;component/Images/Books/" + x.Element("Image").Value.Trim(), UriKind.RelativeOrAbsolute);
        }

        private Uri _image = null;
        private string _author;
        private string _title;
        private string _category;
        private string _ID;
        private double _price;

        public string Author
        {
            get
            {
                return _author;
            }
            set
            {
                if (_author != value)
                {
                    _author = value;
                    OnPropertyChanged("Author");
                }
            }
        }

        public string Title
        {
            get
            {
                return _title;
            }
            set
            {
                if (_title != value)
                {
                    _title = value;
                    OnPropertyChanged("Title");
                }
            }
        }

        public string Category
        {
            get
            {
                return _category;
            }
            set
            {
                if (_category != value)
                {
                    _category = value;
                    OnPropertyChanged("Category");
                }
            }
        }

        public string ID
        {
            get
            {
                return _ID;
            }
            set
            {
                if (_ID != value)
                {
                    _ID = value;
                    OnPropertyChanged("ID");
                }
            }
        }

        public double Price
        {
            get
            {
                return _price;
            }
            set
            {
                if (_price != value)
                {
                    _price = value;
                    OnPropertyChanged("Price");
                }
            }
        }

        public Uri Image
        {
            get
            {
                return _image;
            }
            set
            {
                if (_image != value)
                {
                    _image = value;
                    OnPropertyChanged("Image");
                }
            }
        }
    }
}

BookFlow.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:UXDockMVVM.ViewModels"
        mc:Ignorable="d"
        x:Class="UXDockMVVM.Views.BookFlow" 
        Title="BookFlow Page"
        d:DesignWidth="640" d:DesignHeight="480">
        
    <Intersoft:UXPage.DataContext>
        <ViewModels:BookFlowViewModel />
    </Intersoft:UXPage.DataContext>
    
        <Grid x:Name="LayoutRoot">
        <Intersoft:UXDock Height="264" HorizontalAlignment="Left" Name="uXDock1" VerticalAlignment="Top" ItemsSource="{Binding Path=FilteredBooks}" ImageMemberPath="Image" DisplayMemberPath="Author" />
    </Grid>
</Intersoft:UXPage>

See Also

©2012. All Rights Reserved.