Intersoft ClientUI Documentation
How-to: Bind to a Collection and Display Information Based on Selection
Intersoft ClientUI 8 > ClientUI Fundamentals > Data Binding Overview > Data Binding How-to Topics > How-to: Bind to a Collection and Display Information Based on Selection

In a simple master-detail scenario, you have a data-bound ItemsControl such as a UXListBox. Based on user selection, you display more information about the selected item. This example shows how to implement this scenario.

Example

Description

UXListBox is a ItemsControl and Selection control. The following sample code shows how to bind collection of data to a UXListBox and display more information based on user selection.

Code

Model
Copy Code 
using System.ComponentModel;

namespace ClientUI.Samples.Models
{
    public class Contact: INotifyPropertyChanged
    {
        private string _name;
        private string _email;
        private string _phone;
        private string _image;

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

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

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

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

        protected void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}
View Model
Copy Code 
using ClientUI.Samples.Models;
using System.ComponentModel;
using System.Collections.ObjectModel;

namespace ClientUI.Samples.ViewModels
{
    public class MainPageViewModel : INotifyPropertyChanged
    {
        public MainPageViewModel()
        {
            this.ContactList = new ObservableCollection<Contact>();
            this.ContactList.Add(new Contact() { Image = "contact1.jpg", Name = "Vynna Lawrence", Email = "vynna@lightcorp.com", Phone="01-772-221" });
            this.ContactList.Add(new Contact() { Image = "contact2.jpg", Name = "Terry Adams", Email = "terry@lightcorp.com", Phone = "01-772-222" });
            this.ContactList.Add(new Contact() { Image = "contact3.jpg", Name = "Lori Penor", Email = "lori@lightcorp.com", Phone = "01-772-223" });
            this.ContactList.Add(new Contact() { Image = "contact4.jpg", Name = "Ellen Adams", Email = "ellen@lightcorp.com", Phone = "01-772-224" });            
        }

        private ObservableCollection<Contact> _contactList;
        private Contact _selectedContact;

        public ObservableCollection<Contact> ContactList
        {
            get { return this._contactList; }
            set
            {
                if (this._contactList != value)
                {
                    this._contactList = value;
                    this.OnPropertyChanged("ContactList");
                }
            }
        }

        public Contact SelectedContact
        {
            get { return this._selectedContact; }
            set
            {
                if (this._selectedContact != value)
                {
                    this._selectedContact = value;
                    this.OnPropertyChanged("SelectedContact");
                }
            }
        }

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;

            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}
View
Copy Code 
<Grid x:Name="LayoutRoot" Background="White">
    <Grid.DataContext>
        <vm:MainPageViewModel/>
    </Grid.DataContext>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Intersoft:UXListBox HorizontalAlignment="Center" VerticalAlignment="Center" ItemsSource="{Binding ContactList}" DisplayMemberPath="Name" SelectedItem="{Binding SelectedContact, Mode=TwoWay}"/>
        <Intersoft:DockPanel Width="300" DataContext="{Binding SelectedContact}">
            <Image Margin="8" Width="76" Height="76" Source="{Binding Image}"/>
            <TextBlock Text="{Binding Name}" Intersoft:DockPanel.Dock="Top" Margin="8"/>
            <TextBlock Text="{Binding Email}" Intersoft:DockPanel.Dock="Top" Margin="8"/>
            <TextBlock Text="{Binding Phone}" Intersoft:DockPanel.Dock="Top" Margin="8"/>                
        </Intersoft:DockPanel>
    </StackPanel>
</Grid>

Note that the following sample code is using MVVM pattern, to learn more about this pattern, see MVVM Pattern Overview.

In this sample, the LayoutRoot has a predefined data context which is propagated to its children. In this case, you can just bind the data collection in the ViewModel to the UXListBox directly.

To capture the current selection, you bind the UXListBox.SelectedItem property to SelectedContact property in the ViewModel with two way direction mode. This means that any changes on either side will automatically synchronize the new value to sources that bound to the property. This allows you to bind the SelectedContact to the child container to display its information.

To learn more about Selection control, see Items Control Overview.

See Also
UXListBox Class
ISItemsControl Class
ISSelectionControl Class
How-to: Bind Data to Intersoft Client UI Controls
How-to: Specify Binding Source
How-to: Bind to an Enumeration
How-to: Convert Bound Data

Concepts

Data Binding Overview
MVVM Pattern Overview
Advanced MVVM
Items Control Overview

Other Resources

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