Intersoft ClientUI Documentation
Walkthrough: Bind to ViewModel from Style Setter in XAML using PropertyBinding
Intersoft ClientUI 8 > ClientUI Fundamentals > Data Binding Overview > Data Binding Walkthroughs > Walkthrough: Bind to ViewModel from Style Setter in XAML using PropertyBinding

This walkthrough shows how to bind properties through the style setter in the ItemContainerStyle using MVVM Pattern and ClientUI Property Binding.

In this walkthrough, you perform the following tasks:

Prerequisites

You need the following components to complete this walkthrough:

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 resources file

  1. In your project, create new folder with name Assets.
  2. In Assets folder, create new folder with name Flags.
  3. In Flags folder, copy the images from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.ClientUIFramework\Assets\Images\Flags.

Create Nation Model Class

This section shows how to create the Nation model class that represents the data entity used in this walkthrough.

To create the Nation Model Class

  1. Create a model class that inherits from ModelBase class under the Models folder, named it Nation.cs.
  2. Add Association property to Nation model class by defining the backing field along with complete gettre and setter in the property. In the setter property, you need to call the OnPropertyChanged method after the backing field is assigned to the new value.
    C#
    Copy Code 
    private string _association;

public string Association
{
    get { return this._association; }
    set
    {
        if (this._association != value)
        {
            this._association = value;
            this.OnPropertyChanged("Association");
        }
    }
}
  3. Also create Flag and Name property to the Nation model class by repeating step number 2.
    C#
    Copy Code 
    private string _flag;
private string _category;

public string Flag
{
    get { return this._flag; }
    set
    {
        if (this._flag != value)
        {
            this._flag = value;
            this.OnPropertyChanged("Flag");
        }
    }
}

public string Name
{
    get { return this._name; }
    set
    {
        if (this._name != value)
        {
            this._name = value;
            this.OnPropertyChanged("Name");
        }
    }
}
  4. Create LoadData method. In this method, the data for Nation is loaded.
    C#
    Copy Code 
    public static ObservableCollection<Nation> LoadData()
{
    ObservableCollection<Nation> data = new ObservableCollection<Nation>();
    data.Add(new Nation() { Association = "AFC", Name = "Australia", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Australia.png" });
    data.Add(new Nation() { Association = "AFC", Name = "Japan", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Japan.png" });
    data.Add(new Nation() { Association = "AFC", Name = "Korea DPR", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Korea DPR.png" });
    data.Add(new Nation() { Association = "AFC", Name = "Korea Republic", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Korea Republic.png" });
    data.Add(new Nation() { Association = "CAF", Name = "Algeria", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Algeria.png" });
    data.Add(new Nation() { Association = "CAF", Name = "Cameroon", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Cameroon.png" });
    data.Add(new Nation() { Association = "CAF", Name = "Côte d'Ivoire", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Côte d'Ivoire.png" });
    data.Add(new Nation() { Association = "CAF", Name = "Ghana", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Ghana.png" });
    data.Add(new Nation() { Association = "CAF", Name = "Nigeria", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Nigeria.png" });
    data.Add(new Nation() { Association = "CAF", Name = "South Africa", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/South Africa.png" });
    data.Add(new Nation() { Association = "CONCACAF", Name = "Honduras", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Honduras.png" });
    data.Add(new Nation() { Association = "CONCACAF", Name = "Mexico", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Mexico.png" });
    data.Add(new Nation() { Association = "CONCACAF", Name = "USA", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/USA.png" });
    data.Add(new Nation() { Association = "CONMEBOL", Name = "Argentina", Flag = "ClientUIMVVMApp2;component/Assets/Flags/Argentina.png" });
    data.Add(new Nation() { Association = "CONMEBOL", Name = "Brazil", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Brazil.png" });
    data.Add(new Nation() { Association = "CONMEBOL", Name = "Chile", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Chile.png" });
    data.Add(new Nation() { Association = "CONMEBOL", Name = "Paraguay", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Paraguay.png" });
    data.Add(new Nation() { Association = "CONMEBOL", Name = "Uruguay", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Uruguay.png" });
    data.Add(new Nation() { Association = "OFC", Name = "New Zealand", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/New Zealand.png" });
    data.Add(new Nation() { Association = "UEFA", Name = "Denmark", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Denmark.png" });
    data.Add(new Nation() { Association = "UEFA", Name = "England", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/England.png" });
    data.Add(new Nation() { Association = "UEFA", Name = "France", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/France.png" });
    data.Add(new Nation() { Association = "UEFA", Name = "Germany", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Germany.png" });
    data.Add(new Nation() { Association = "UEFA", Name = "Greece", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Greece.png" });
    data.Add(new Nation() { Association = "UEFA", Name = "Italy", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Italy.png" });
    data.Add(new Nation() { Association = "UEFA", Name = "Netherlands", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Netherlands.png" });
    data.Add(new Nation() { Association = "UEFA", Name = "Portugal", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Portugal.png" });
    data.Add(new Nation() { Association = "UEFA", Name = "Serbia", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Serbia.png" });
    data.Add(new Nation() { Association = "UEFA", Name = "Slovakia", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Slovakia.png" });
    data.Add(new Nation() { Association = "UEFA", Name = "Slovenia", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Slovenia.png" });
    data.Add(new Nation() { Association = "UEFA", Name = "Spain", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Spain.png" });
    data.Add(new Nation() { Association = "UEFA", Name = "Switzerland", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Switzerland.png" });

    return data;
}
  5. Create Nation model class Constructor.
    C#
    Copy Code 
    public Nation()
{
}

Creating the View Pattern

This section steps you through the process of creating a page that use UXComboBox. The UXComboBox is used to display a collection of Nation data.

To create the View

  1. Right click on Views folder, and add new item. Select Intersoft UXPage as the template page. Named it ShowNation.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. Double click on ShowNation.xaml and Add UXComboBox. Set the following property:
    Property Value
    HorizontalAlignment Center
    VerticalAlignment Center
    Width 200
    DropDownHeight 200
    XAML
    Copy Code 
    <Grid x:Name="LayoutRoot">
    <Intersoft:UXComboBox HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" DropDownHeight="200">
    </Intersoft:UXComboBox>
</Grid>
  3. Define UXComboItem style for ItemContainerStyle property of UXComboBox and set the ContentType property to ContentAndImage.
    XAML
    Copy Code 
    <Intersoft:UXComboBox HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" DropDownHeight="200">
    <Intersoft:UXComboBox.ItemContainerStyle>
        <Style TargetType="Intersoft:UXComboBoxItem">
            <Setter Property="ContentType" Value="ContentAndImage"/>
        </Style>
    </Intersoft:UXComboBox.ItemContainerStyle>
</Intersoft:UXComboBox>

Creating The ViewModel Pattern

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 Nations property to represent an observable collection of Nation model.

To create the ShowNationViewModel

  1. Create ShowNationViewModel that inherit from ViewModelBase. Nations property is a collection property of Nation model that will be the source of the data for UXComboBox.
    C#
    Copy Code 
    ...
public class ShowNationViewModel : ViewModelBase
{

    public ShowNationViewModel()
    {
        // sample data.
        this.Nations = Nation.LoadData();
    }


    private ObservableCollection<Nation> _nations;
    public ObservableCollection<Nation> Nations
    {
        get { return this._nations; }
        set
        {
            if (this._nations != value)
            {
                this._nations = value;
                this.OnPropertyChanged("Nations");
            }
        }
    }
}
...

Binding the View to ViewModel

This section show how to bind the ViewModel that was created in the previous section to the View.

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 data context.

To bind the ShowNation View to ShowNationViewModel

  1. Declare the namespace that maps to the ShowNationViewModel in ShowNation.xml. Instantiate a new instance of the ShowNationViewModel class in the UXPage resources and name it ShowNationViewModel
    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:ViewModels="clr-namespace:ClientUIMVVMApp2.ViewModels"
        mc:Ignorable="d"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
        x:Class="ClientUIMVVMApp2.Views.ShowNation" 
        Title="ShowNation Page"
        d:DesignWidth="640" d:DesignHeight="480">
..      
<Intersoft:UXPage.Resources>
    <ViewModels:ShowNationViewModel x:Key="ShowNationViewModel"></ViewModels:ShowNationViewModel>
</Intersoft:UXPage.Resources>
...
  2. Bind the the ItemsSource property of UXComboBox to Nations property of ShowNationViewModel.
    XAML
    Copy Code 
    ...
<Intersoft:UXComboBox ItemsSource="{Binding Source={StaticResource ShowNationViewModel}, Path=Nations}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" DropDownHeight="200">
    <Intersoft:UXComboBox.ItemContainerStyle>
        <Style TargetType="Intersoft:UXComboBoxItem">
            <Setter Property="ContentType" Value="ContentAndImage"/>
        </Style>
    </Intersoft:UXComboBox.ItemContainerStyle>
</Intersoft:UXComboBox>
...
  3. Modify the UXComboBoxItem style declared in ItemContainerStyle of UXCombo by adding Intersoft:PropertyBinding for Icon and Content properties.
    XAML
    Copy Code 
    ...
<Intersoft:UXComboBox ItemsSource="{Binding Source={StaticResource ShowNationViewModel}, Path=Nations}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" DropDownHeight="200">
    <Intersoft:UXComboBox.ItemContainerStyle>
        <Style TargetType="Intersoft:UXComboBoxItem">
            <Setter Property="ContentType" Value="ContentAndImage"/>
            <Setter Property="Intersoft:BindingFramework.PropertyBinding">
                <Setter.Value>
                    <Intersoft:PropertyBinding>
                        <Intersoft:PropertyBinding Property="Icon"/>
                        <Intersoft:PropertyBinding Property="Content"/>
                    </Intersoft:PropertyBinding>
                </Setter.Value>
            </Setter>
        </Style>
    </Intersoft:UXComboBox.ItemContainerStyle>
</Intersoft:UXComboBox>
...
  4. Inside the property binding, add the binding definition for Icon property to Flag field of Nation model and binding defintion Content property to Name field of Nation model.
    XAML
    Copy Code 
    ...
<Intersoft:UXComboBox.ItemContainerStyle>
    <Style TargetType="Intersoft:UXComboBoxItem">
        <Setter Property="ContentType" Value="ContentAndImage"/>
        <Setter Property="Intersoft:BindingFramework.PropertyBinding">
            <Setter.Value>
                <Intersoft:PropertyBinding>
                    <Intersoft:PropertyBinding Property="Icon" Binding="{Binding Flag}"/>
                    <Intersoft:PropertyBinding Property="Content" Binding="{Binding Name}"/>
                </Intersoft:PropertyBinding>
            </Setter.Value>
        </Setter>
    </Style>
</Intersoft:UXComboBox.ItemContainerStyle>
...
  5. Make sure that in App.xaml.cs, the Application StartUp should be set to ShowNation.
    C#
    Copy Code 
    ...
private void Application_Startup(object sender, StartupEventArgs e)
{
    this.RootVisual = new Views.ShowNation();
}
...
  6. Save, build and and run the project. You will have a UXComboBox like the following screenshot.

For more information about ClientUI Binding Framework, see Data Binding Overview.

Complete Code Listing

This section lists the complete code used in this walkthrough.

Nation.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 ClientUIMVVMApp2.ViewModels;
using System.Collections.ObjectModel;

namespace ClientUIMVVMApp2.Models
{
    public class Nation : ModelBase
    {
        #region Constructors

        public Nation()
        {
        }

        #endregion

        #region Fields

        private string _association;
        private string _flag;
        private string _name;

        #endregion

        #region Properties

        public string Association
        {
            get { return this._association; }
            set
            {
                if (this._association != value)
                {
                    this._association = value;
                    this.OnPropertyChanged("Association");
                }
            }
        }

        public string Flag
        {
            get { return this._flag; }
            set
            {
                if (this._flag != value)
                {
                    this._flag = value;
                    this.OnPropertyChanged("Flag");
                }
            }
        }

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

        public override string ToString()
        {
            return this.Name;
        }

        #endregion

        #region Methods

        public static ObservableCollection<Nation> LoadData()
        {
            ObservableCollection<Nation> data = new ObservableCollection<Nation>();
            data.Add(new Nation() { Association = "AFC", Name = "Australia", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Australia.png" });
            data.Add(new Nation() { Association = "AFC", Name = "Japan", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Japan.png" });
            data.Add(new Nation() { Association = "AFC", Name = "Korea DPR", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Korea DPR.png" });
            data.Add(new Nation() { Association = "AFC", Name = "Korea Republic", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Korea Republic.png" });
            data.Add(new Nation() { Association = "CAF", Name = "Algeria", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Algeria.png" });
            data.Add(new Nation() { Association = "CAF", Name = "Cameroon", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Cameroon.png" });
            data.Add(new Nation() { Association = "CAF", Name = "Côte d'Ivoire", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Côte d'Ivoire.png" });
            data.Add(new Nation() { Association = "CAF", Name = "Ghana", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Ghana.png" });
            data.Add(new Nation() { Association = "CAF", Name = "Nigeria", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Nigeria.png" });
            data.Add(new Nation() { Association = "CAF", Name = "South Africa", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/South Africa.png" });
            data.Add(new Nation() { Association = "CONCACAF", Name = "Honduras", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Honduras.png" });
            data.Add(new Nation() { Association = "CONCACAF", Name = "Mexico", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Mexico.png" });
            data.Add(new Nation() { Association = "CONCACAF", Name = "USA", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/USA.png" });
            data.Add(new Nation() { Association = "CONMEBOL", Name = "Argentina", Flag = "ClientUIMVVMApp2;component/Assets/Flags/Argentina.png" });
            data.Add(new Nation() { Association = "CONMEBOL", Name = "Brazil", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Brazil.png" });
            data.Add(new Nation() { Association = "CONMEBOL", Name = "Chile", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Chile.png" });
            data.Add(new Nation() { Association = "CONMEBOL", Name = "Paraguay", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Paraguay.png" });
            data.Add(new Nation() { Association = "CONMEBOL", Name = "Uruguay", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Uruguay.png" });
            data.Add(new Nation() { Association = "OFC", Name = "New Zealand", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/New Zealand.png" });
            data.Add(new Nation() { Association = "UEFA", Name = "Denmark", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Denmark.png" });
            data.Add(new Nation() { Association = "UEFA", Name = "England", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/England.png" });
            data.Add(new Nation() { Association = "UEFA", Name = "France", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/France.png" });
            data.Add(new Nation() { Association = "UEFA", Name = "Germany", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Germany.png" });
            data.Add(new Nation() { Association = "UEFA", Name = "Greece", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Greece.png" });
            data.Add(new Nation() { Association = "UEFA", Name = "Italy", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Italy.png" });
            data.Add(new Nation() { Association = "UEFA", Name = "Netherlands", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Netherlands.png" });
            data.Add(new Nation() { Association = "UEFA", Name = "Portugal", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Portugal.png" });
            data.Add(new Nation() { Association = "UEFA", Name = "Serbia", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Serbia.png" });
            data.Add(new Nation() { Association = "UEFA", Name = "Slovakia", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Slovakia.png" });
            data.Add(new Nation() { Association = "UEFA", Name = "Slovenia", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Slovenia.png" });
            data.Add(new Nation() { Association = "UEFA", Name = "Spain", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Spain.png" });
            data.Add(new Nation() { Association = "UEFA", Name = "Switzerland", Flag = "/ClientUIMVVMApp2;component/Assets/Flags/Switzerland.png" });

            return data;
        }

        #endregion
    }
}

ShowNation.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:ViewModels="clr-namespace:ClientUIMVVMApp2.ViewModels"
        mc:Ignorable="d"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
        x:Class="ClientUIMVVMApp2.Views.ShowNation" 
        Title="ShowNation Page"
        d:DesignWidth="640" d:DesignHeight="480">
        
    <Intersoft:UXPage.Resources>
        <ViewModels:ShowNationViewModel x:Key="ShowNationViewModel"></ViewModels:ShowNationViewModel>
    </Intersoft:UXPage.Resources>
        <Grid x:Name="LayoutRoot">
        <Intersoft:UXComboBox ItemsSource="{Binding Source={StaticResource ShowNationViewModel}, Path=Nations}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" DropDownHeight="200">
            <Intersoft:UXComboBox.ItemContainerStyle>
                <Style TargetType="Intersoft:UXComboBoxItem">
                    <Setter Property="ContentType" Value="ContentAndImage"/>
                    <Setter Property="Intersoft:BindingFramework.PropertyBinding">
                        <Setter.Value>
                            <Intersoft:PropertyBinding>
                                <Intersoft:PropertyBinding Property="Icon" Binding="{Binding Flag}"/>
                                <Intersoft:PropertyBinding Property="Content" Binding="{Binding Name}"/>
                            </Intersoft:PropertyBinding>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Intersoft:UXComboBox.ItemContainerStyle>
        </Intersoft:UXComboBox>
    </Grid>
</Intersoft:UXPage>

ShowNationViewModel.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 ClientUIMVVMApp2.Models;
using System.Collections.ObjectModel;

namespace ClientUIMVVMApp2.ViewModels
{
    public class ShowNationViewModel : ViewModelBase
    {

        public ShowNationViewModel()
        {
            // sample data.
            this.Nations = Nation.LoadData();
        }


        private ObservableCollection<Nation> _nations;
        public ObservableCollection<Nation> Nations
        {
            get { return this._nations; }
            set
            {
                if (this._nations != value)
                {
                    this._nations = value;
                    this.OnPropertyChanged("Nations");
                }
            }
        }
    }
}
See Also
UXComboBox Class

Concepts

Data Binding Overview
MVVM Pattern Overview

Other Resources

Locating the Samples in Local Installation
Data Binding How-to Topics
Walkthroughs and How-to Topics