Resources For IT Professionals
Post an article
Wikis - Page Details
  • First published by (eMicrosoft Partne)
  • When: 29 Jun 2013 10:41 AM
  • Last revision by (aMicrosof)
  • When: 10 Jul 2013 3:17 PM
  • Revisions: 6
  • Comments: 5
Options
RSSSubscribe to Article (RSS)
Can You Improve This Article?
Positively! Click Sign In to add the tip, solution, correction or comment that will help other users.

Report inappropriate content using these instructions.
Wiki  >  TechNet Articles  >  WPF: How To Manage Available/Selected Lists using MVVM Or Code Behind

WPF: How To Manage Available/Selected Lists using MVVM Or Code Behind

WPF: How To Manage Available/Selected Lists using MVVM Or Code Behind

Table of Contents

 

 

Introduction

This example shows how to handle two lists for selecting items. One showing selected items, the other showing remaining options available (minus the selected options).

 

As you select items from the ComboBox, they are moved to the "Selected" listbox. Selected items have a remove button, which returns the item to the "select" Combo.

  

Download

You can download the sample project here : http://code.msdn.microsoft.com/How-to-manage-availablesele-175b1682
 

Description

This sample project shows two methods of coding this solution, firstly using MVVM architecture, then using plain old code behind.

 

MVVM

Fisrtly, let's look at the nicer way to do this. Example 1 has just one line in the code-behind:

 

DataContext = new ViewModel.Example1ViewModel();
 
DataContext = new ViewModel.Example1ViewModel();
 

Then the ViewModel takes over. Everything is therefore done with bindings in Example1Window.xaml, as the ViewModel does not know of any controls. Here is the 'available' listbox:

 

<ComboBox ItemsSource="{Binding UnselectedPeople}" DisplayMemberPath="Name" Margin="0,0,10,0"
                  helpers:EventToCommand.Event="ComboBox.SelectionChanged"
                  helpers:EventToCommand.CommandParameter="{Binding SelectedItem, RelativeSource={RelativeSource Self}}"
                  helpers:EventToCommand.Command="{Binding SelectPersonCommand}" />
 
<ComboBox ItemsSource="{Binding UnselectedPeople}" DisplayMemberPath="Name" Margin="0,0,10,0" 
                  helpers:EventToCommand.Event="ComboBox.SelectionChanged" 
                  helpers:EventToCommand.CommandParameter="{Binding SelectedItem, RelativeSource={RelativeSource Self}}" 
                  helpers:EventToCommand.Command="{Binding SelectPersonCommand}" />

Notice I am using the SelectionChanged event rather than binding to SelectedItem. This is because in practice, SelectedItem is not cleared when the actual item is removed from the underlying collection, which caused binding issues in later tasks. Instead I deploy an EventToCommand behaviour to convert SelectionChanged into a Command from the ViewModel.

 

The EventToCommand and RelayCommand shown in this project are from my MVVMXL sample project.

 

The 'selected' listbox is as follows:

<ListBox ItemsSource="{Binding SelectedPeople}" Grid.Row="1" Background="{x:Null}" BorderThickness="0" FontWeight="Bold" ItemTemplate="{StaticResource SelectedPersonItemTemplate}" ItemContainerStyle="{StaticResource StretchedItemContainer}"/>
 
 
<ListBox ItemsSource="{Binding SelectedPeople}" Grid.Row="1" Background="{x:Null}" BorderThickness="0" FontWeight="Bold" ItemTemplate="{StaticResource SelectedPersonItemTemplate}" ItemContainerStyle="{StaticResource StretchedItemContainer}"/>
 
 
SelectedPeople is an ObservableCollection, so any changes are reflected back in the UI, but UnselectedPeople is a calculated property, that needs triggering (manually calling RaisepropertyChanged) every time an option is selected or removed.
private void DoSelectPerson(object parameter)
{
    var person = parameter as Person;
    if (person == null) return;
 
    SelectedPeople.Add(person);
    RaisePropertyChanged("UnselectedPeople"); //Regenerate the list
}
 
void DoUnselectPerson(object parameter)
{
    var person = parameter as Person;
    SelectedPeople.Remove(person);
    RaisePropertyChanged("UnselectedPeople"); //Regenerate the list
}
 
private void DoSelectPerson(object parameter)
{
    var person = parameter as Person;
    if (person == null) return;
  
    SelectedPeople.Add(person);
    RaisePropertyChanged("UnselectedPeople"); //Regenerate the list
}
  
void DoUnselectPerson(object parameter)
{
    var person = parameter as Person;
    SelectedPeople.Remove(person);
    RaisePropertyChanged("UnselectedPeople"); //Regenerate the list
}
 
Raising the PropertyChanged event on UnselectedPeople triggers the bindings to update:
 
public List<Person> UnselectedPeople
{
    get
    {
        if (SelectedPeople.Count == 0) return AllPeople;
 
        return AllPeople.Except(SelectedPeople).ToList();
    }
}
 
public List<Person> UnselectedPeople
{
    get
    {
        if (SelectedPeople.Count == 0) return AllPeople;
  
        return AllPeople.Except(SelectedPeople).ToList();
    }
}

 

Code Behind

Many would say this is simpler to code in code-behind rather than MVVM, and they are right, but coupling the code directly to the controls leads to a mess when scaled up to a full page's worth of functionality. However here is an example of how to do this:
 
public List<Person> UnselectedPeople
{
    get
    {
        if (SelectedPeople.Count == 0) return AllPeople;
 
        return AllPeople.Except(SelectedPeople).ToList();
    }
}
 
public Example2Window()
{
    InitializeComponent();
 
    AllPeople = new List<Person>();
    for (var i = 0; i < 10; i++)
        AllPeople.Add(new Person(i, "Person_" + i));
 
    lstSelected.ItemsSource = SelectedPeople = new ObservableCollection<Person>();
    LoadUnselectedCombo();
}
 
private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var person = cmbUnselected.SelectedItem as Person;
    if (person != null)
    {
        SelectedPeople.Add(person);
        LoadUnselectedCombo();
    }
}
 
private void Button_Click(object sender, RoutedEventArgs e)
{
    var button = sender as Button;
    var person = button.DataContext as Person;
 
    if (button != null && person != null)
    {
        SelectedPeople.Remove(person);
        LoadUnselectedCombo();
    }
}
 
void LoadUnselectedCombo()
{
    cmbUnselected.ItemsSource = UnselectedPeople;
}
 
public List<Person> UnselectedPeople
{
    get
    {
        if (SelectedPeople.Count == 0) return AllPeople;
  
        return AllPeople.Except(SelectedPeople).ToList();
    }
}
  
public Example2Window()
{
    InitializeComponent();
  
    AllPeople = new List<Person>();
    for (var i = 0; i < 10; i++)
        AllPeople.Add(new Person(i, "Person_" + i));
  
    lstSelected.ItemsSource = SelectedPeople = new ObservableCollection<Person>();
    LoadUnselectedCombo();
}
  
private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var person = cmbUnselected.SelectedItem as Person;
    if (person != null)
    {
        SelectedPeople.Add(person);
        LoadUnselectedCombo();
    }
}
  
private void Button_Click(object sender, RoutedEventArgs e)
{
    var button = sender as Button;
    var person = button.DataContext as Person;
  
    if (button != null && person != null)
    {
        SelectedPeople.Remove(person);
        LoadUnselectedCombo();
    }
}
  
void LoadUnselectedCombo()
{
    cmbUnselected.ItemsSource = UnselectedPeople;
}
 
 
 
Hope this helps you!
 
 
 

 

, , , , , , , [Edit tags]
Leave a Comment
  • Please add 7 and 4 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Sort by: Published Date | Most Recent | Most Useful
Comments
  • 29 Jun 2013 10:42 AM

    XAML guy edited Original. Comment: added

  • 29 Jun 2013 10:43 AM

    XAML guy edited Revision 1. Comment: title

Page 1 of 1 (2 items)
Wikis - Comment List
Sort by: Published Date | Most Recent | Most Useful
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
Page 1 of 1 (5 items)