Intersoft ClientUI Documentation
How-to: Bind to a Collection and Display Information Based on Selection
See Also Send Feedback
Intersoft ClientUI 7 > ClientUI Fundamentals > Data Binding Overview > Data Binding How-to Topics > How-to: Bind to a Collection and Display Information Based on Selection

Glossary Item Box

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

©2012. All Rights Reserved.