This walkthrough shows you how to bind a data collection to UXDockButton using MVVM pattern.

In this walkthrough, you perform the following tasks:

• Create a ClientUI MVVM 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 and provides the commands for save action.
• Bind the UI controls in the page such as UXDockButton to the ViewModel. 

Prerequisites

You need the following components to complete this walkthrough:

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

You also need the following resource to complete this walkthrough:

• Intersoft.ClientUI.Samples.Assets assembly
  Available in: [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.Assets\Bin\Debug

The assembly is required for the XML data source and images

Creating a new Intersoft ClientUI MVVM 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 show how to create a View used in the application interface using the BookFlow.xaml.

To create the BookFlow view

1. Add a new UXPage to the Views folder in your Silverlight project and name it BookFlow.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:
   

   Property	Value
   HorizontalAlignment	Left
   VerticalAlignment	Top
   Height	264

5. Add a UXDockButton control in the UXDock. Set 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
   Icon	/Intersoft.ClientUI.Samples.Assets;component/Images/Navigation/Products.png
   Text	Products
   StackMode	GridStyle
   DisplayMemberPath	Author
   ImageMemberPath	Image

   XAML

   Copy Code

   <Intersoft:UXDock Height="264" HorizontalAlignment="Left" Margin="174,0,466,-1" Name="uXDock1" VerticalAlignment="Top"> <Intersoft:UXDockButton Icon="/Intersoft.ClientUI.Samples.Assets;component/Images/Navigation/Products.png" Text="Products" ItemsSource="{Binding Path=FilteredBooks}" DisplayMemberPath="Author" ImageMemberPath="Image" StackMode="GridStyle" IsOpen="False"></Intersoft:UXDockButton> </Intersoft:UXDock>

   

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 UXDockButton 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

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

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

<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:ViewModels="clr-namespace:UXDockMVVM.ViewModels"
        mc:Ignorable="d"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
        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">
            <Intersoft:UXDockButton Icon="/Intersoft.ClientUI.Samples.Assets;component/Images/Navigation/Products.png" Text="Products" ItemsSource="{Binding Path=FilteredBooks}" DisplayMemberPath="Author" ImageMemberPath="Image" StackMode="GridStyle" IsOpen="False"></Intersoft:UXDockButton>
        </Intersoft:UXDock>    
        </Grid>
</Intersoft:UXPage>