Click here to Skip to main content
15,867,568 members
Articles / Desktop Programming / WPF

WPF: Selection made better

Rate me:
Please Sign up or sign in to vote.
4.97/5 (52 votes)
3 Jul 2009CPOL7 min read 143.1K   1.3K   92   55
A better selection option for users.

Introduction

I have been away for a while exploring the idea of writing a book; for all those of you that left words of encouragement at my blog, thanks a lot. It meant a great deal to me. Unfortunately, the publisher turned out to be very narrow minded and could not see the bigger picture or what our book would be like. So the book project is off.

So this article represents the first of many of my getting back to my usual article tirade here at CodeProject, which is really my true home I feel.

This is a short article, but I can promise a very substantial set of articles on what I consider to be my best work, and most useful work to date. The series of upcoming articles will be on an MVVM framework for working with WPF; it actually answers every question/short coming I have ever had working with WPF and Tests and the MVVM pattern, so stay tuned to that series.

But we are where we are, and this is this article, so what does this article actually do? Well, it is fairly simple. We use a lot of comboboxes on our UIs to allow users to pick values, and show a selected value, which is great, so we have something like:

Which works wonderfully, providing your data is fairly short and not that complicated. Remember, in WinForms and WPF, you can put a list of any object you want as a source for a combobox, so it is not inconceivable that one would have a list of complex classes as an items source. The above selection/display method just may not cut it, so something more may be required and be useful.

What if we could keep the currently selected item as a simple string, and allow the user to see a DataGrid or ListView to select the current item from? Wouldn't that be nice?

Luckily, WPF is so powerful, we can do just that.

Here is what I came up with:

So what we have is, the current item is just a short property representation of the entire object that is selected, but when the user wants to make a new selection, they get shown the entire object in an appropriate display container; in my example, I am using a standard (Styled) WPF ListView, but you could use whatever floats your boat.

How does all this work? If you want to know, please read on.

How it Works

The first thing to understand is what the comboxbox is being used to select. In this simple demo code (attached), I am using an ObservableCollection<Person> for the ComboxBox.ItemsSource, but this could be any IEnumerable, so something like List<Person> would do fine as well.

I setup the ComboBox.ItemSource via a binding on a ViewModel which is used for the DataContext for the demo code's Window. Here is the entire ViewModel code. Though this ViewModel code is really not that important to understand, the only thing you need to get is that the ComboxBox.ItemsSource is being bound to the ViewModel's People property which is a ObservableCollection<Person>.

C#
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Windows.Data;

namespace WpfApplication1
{
    public class PeopleViewModel : INotifyPropertyChanged
    {
        private Person currentPerson = null;
        private ObservableCollection<Person> people = 
            new ObservableCollection<Person>();
        private ICollectionView peopleCV = null;

        public PeopleViewModel()
        {
            this.people.Add(new Person 
                { 
                    FirstName = "sacha",
                    MiddleName = "",
                    LastName = "Barber1"
                });
            this.people.Add(new Person
            {
                FirstName = "leanne",
                MiddleName = "riddley",
                LastName = "rymes"
            });
            peopleCV = CollectionViewSource.GetDefaultView(people);
            peopleCV.MoveCurrentToPosition(-1);
        }

        public Person CurrentPerson
        {
            get { return currentPerson; }
            set
            {
                if (currentPerson != value)
                {
                    currentPerson = value;
                    NotifyChanged("CurrentPerson");
                }
                else
                    return;
            }
        }

        public ObservableCollection<Person> People
        {
            get { return people; }
            set
            {
                if (people != value)
                {
                    people = value;
                    peopleCV = CollectionViewSource.GetDefaultView(people);
                    peopleCV.MoveCurrentToPosition(-1);
                    NotifyChanged("People");
                }
                else
                    return;
            }
        }

        #region INotifyPropertyChanged Implementation

        /// <summary>
        /// Occurs when any properties are changed on this object.
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;


        /// <summary>
        /// A helper method that raises the PropertyChanged event for a property.
        /// </summary>
        /// <param name="propertyNames">The names
        ///       of the properties that changed.</param>
        protected virtual void NotifyChanged(params string[] propertyNames)
        {
            foreach (string name in propertyNames)
            {
                OnPropertyChanged(new PropertyChangedEventArgs(name));
            }
        }

        /// <summary>
        /// Raises the PropertyChanged event.
        /// </summary>
        /// <param name="e">Event arguments.</param>
        protected virtual void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, e);
            }
        }

        #endregion
    }
}

Here is what one of the Person objects actually looks like:

C#
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;

namespace WpfApplication1
{
    public class Person : INotifyPropertyChanged
    {
        private String firstName = String.Empty;
        private String middleName = String.Empty;
        private String lastName = String.Empty;

        public String FormattedName
        {
            get
            {
                return FirstName.Substring(0, 1) + "." +
                       LastName;
            }
        }

        public String FirstName
        {
            get { return firstName; }
            set
            {
                if (firstName != value)
                {
                    firstName = value;
                    NotifyChanged("FirstName");
                }
                else
                    return;
            }
        }

        public String MiddleName
        {
            get { return middleName; }
            set
            {
                if (middleName != value)
                {
                    middleName = value;
                    NotifyChanged("MiddleName");
                }
                else
                    return;
            }
        }

        public String LastName
        {
            get { return lastName; }
            set
            {
                if (lastName != value)
                {
                    lastName = value;
                    NotifyChanged("LastName");
                }
                else
                    return;
            }
        }

        #region INotifyPropertyChanged Implementation

        /// <summary>
        /// Occurs when any properties are changed on this object.
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;


        /// <summary>
        /// A helper method that raises the PropertyChanged event for a property.
        /// </summary>
        /// <param name="propertyNames">
        ///         The names of the properties that changed.</param>
        protected virtual void NotifyChanged(params string[] propertyNames)
        {
            foreach (string name in propertyNames)
            {
                OnPropertyChanged(new PropertyChangedEventArgs(name));
            }
        }

        /// <summary>
        /// Raises the PropertyChanged event.
        /// </summary>
        /// <param name="e">Event arguments.</param>
        protected virtual void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, e);
            }
        }

        #endregion
    }
}

One important thing to note here is that I have a FormattedName property on the Person class, which represents a short display representation of the entire object. It is this FormattedName property that I use to display the currently selected item within the ComboBox; basically, it is just a short representation of the selected object.

So far, what we have is the ComboBox being bound to a ObservableCollection<Person>; great, so how does all the rest work? Well, to get into that, we need to understand how the ComboBox ControlTemplate works. There is a popup within the ControlTemplate that hosts the items, and there is also a Content property that is used to show the currently selected item. Knowing this, we can set to work getting the ComboBox to do what we want.

Getting the ComboBox to Show a Grid for its ItemPresenter

The first step is to get it to display a DataGrid or ListView for its items. How do we do that? And the answer I came up with was to cheat. We just use the ComboBox as normal, but we place a DataGrid or ListView in for its first item, and give it some negative Margin, so we never see the standard ComboBox selection color around the ComboBox item (which is really our DataGrid or ListView).

Here is what I am doing:

XML
<local:ComboBoxEx >

    .......
    .......
    .......
    .......

    <local:ComboBoxEx.Items>
        <ComboBoxItem>

            <ListView AlternationCount="0"
                      Margin="-5,-2,-5,-2"
                      Background="White"
                      Height="200"
                      ItemsSource="{Binding Path=People}"
                      SelectedValue="{Binding Path=CurrentPerson}"
                      ItemContainerStyle="{DynamicResource ListItemStyle}"
                      BorderBrush="Transparent"
                      VerticalAlignment="Stretch"
                      HorizontalAlignment="Stretch"
                      IsSynchronizedWithCurrentItem="True"
                      local:SortableList.IsGridSortable="True"
                      FontSize="12"
                      SelectionMode="Single">
                <ListView.Resources>

                    <Style x:Key="ListItemStyle"
                           TargetType="{x:Type ListViewItem}">
                        <Setter Property="Template"
                                Value="{StaticResource EntityListViewItemTemplate}" />
                        <Setter Property="HorizontalContentAlignment"
                                Value="Left" />

                    </Style>

                </ListView.Resources>

                <ListView.View>
                    <GridView ColumnHeaderContainerStyle="{StaticResource 
                            GridViewColumnHeaderStyle}">
                        <GridViewColumn Header="FirstName"
                                        DisplayMemberBinding="{Binding FirstName}" />
                        <GridViewColumn Header="Middle Name"
                                        DisplayMemberBinding="{Binding MiddleName}" />
                        <GridViewColumn Header="Last Name"
                                        DisplayMemberBinding="{Binding LastName}" />
                    </GridView>
                </ListView.View>
            </ListView>
        </ComboBoxItem>
    </local:ComboBoxEx.Items>
</local:ComboBoxEx>

The eagle eyed amongst you will actually notice that I am not using the standard WPF ComboBox, but rather a ComboBoxEx; don't worry, I will cover this in just a minute. For now, just understand that we are using the standard WPF ComboBox.Items collection and providing a ComboBoxItem just as you would for a standard WPF ComboBox. It just so happens that the ComboBox only has one item, and that is our DataGrid or ListView.

So that explains how we get a DataGrid or ListView to appear. What about the selected item? As the current item is effectively a DataGrid or ListView, surely the selected item will be a DataGrid or ListView too. Well, yes, under normal circumstances, it would be, and it would look quite odd; it would look like this:

Which is not really what we are after at all. How do we go about fixing that? Well, that does require a little bit more knowledge about how the ComboBox ControlTemplate works. When you look into it, you can see that there is a ContentPresenter that is used to represent the currently selected item's Content, and that by default uses a TemplateBinding to bind to the Content. Which explains what we just saw above; the Content is actually a DataGrid or ListView. That's interesting, so perhaps, we can get it to display something else, if we use another property.

XML
<ContentPresenter x:Name="item"
      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
      Margin="{TemplateBinding Padding}"
      VerticalAlignment="Center"
      Grid.Column="1"
      Content="{TemplateBinding SelectionBoxItem}"
      ContentTemplate="{TemplateBinding Content}"
      ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" />

Changing the Selected Item Content

When I first looked into this, I wanted to be able to swap out the ContentTemplate="{TemplateBinding Content}" to use an Attached DP, but this did not seem to work, as the DP was not actually considered to be part of the standard properties available to use for a TemplateBinding markup extension. What I then thought was well, we will just have to subclass ComboBox and add a property we want to use for Content and use that in the ControlTemplate.

That is exactly what I do; here is the full code for ComboBoxEx:

C#
public class ComboBoxEx : ComboBox
{
    #region SelectedTemplateOverride

    /// <summary>
    /// SelectedTemplateOverride Dependency Property
    /// </summary>
    public static readonly DependencyProperty SelectedTemplateOverrideProperty =
        DependencyProperty.Register("SelectedTemplateOverride", 
        typeof(DataTemplate), typeof(ComboBoxEx),
            new FrameworkPropertyMetadata((DataTemplate)null));

    /// <summary>
    /// Gets or sets the SelectedTemplateOverride property.
    /// </summary>
    public DataTemplate SelectedTemplateOverride
    {
        get { return (DataTemplate)GetValue(SelectedTemplateOverrideProperty); }
        set { SetValue(SelectedTemplateOverrideProperty, value); }
    }

    #endregion
}

As I say, it would have been nice to use an attached DP, but hey ho.

So with this ComboBoxEx class in place, we can then change the standard ControlTemplate applied to use our new SelectedTemplateOverride DP. Let's see that in the relevant part of the ComboBoxEx ControlTemplate.

XML
<ContentPresenter x:Name="item"
          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
          Margin="{TemplateBinding Padding}"
          VerticalAlignment="Center"
          Grid.Column="1"
          Content="{TemplateBinding SelectionBoxItem}"
          ContentTemplate="{TemplateBinding SelectedTemplateOverride}"
          ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" />

Notice that we no longer use ContentTemplate="{TemplateBinding Content}" but rather use ContentTemplate="{TemplateBinding SelectedTemplateOverride}", which is our new DP we introduced in the ComboBoxEx class.

So all that we now need to do is put something in the SelectedTemplateOverride DP; the place to do this is in the XAML where we use the actual instance of a ComboBoxEx object.

Here is the relevant bit of XAML:

XML
<local:ComboBoxEx.SelectedTemplateOverride>
    <DataTemplate>
        <Label DataContext="{Binding ElementName=theView, Path=DataContext}"
               Content="{Binding Path=CurrentPerson.FormattedName, 
                    UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
               VerticalContentAlignment="Center"
               Padding="0"
               Margin="2,0,0,0" />
    </DataTemplate>
</local:ComboBoxEx.SelectedTemplateOverride>

Notice that it is just a DataTemplate, as this is what the SelectedTemplateOverride DP type was. The other two things to note are:

  1. That we are using our special shorted FormattedName property that we saw earlier when we talked about the demo (Person) class.
  2. I had to get the DataContext from somewhere for the label, for the binding to work, so I grab it off the hosting Window, as this is the thing that has the entire ViewModel set as its DataContext anyway. The ViewModel actually knows which is the current item, by the magic of ICollectionView and IsSynchronizedWithCurrentItem="True" which is set on the ListView (CombBox single item) in the demo code. I have not discussed ICollectionView and IsSynchronizedWithCurrentItem="True", but all it does is keep the selection made in the ListView synchronized with the ICollectionView in the ViewModel, which allows me to grab the currently selected item from the DataContext (from the Window, as it has the ViewModel as its DataContext).

So with this last piece of the puzzle solver, we end up with the selected item being the currently selected Persons from the ListView being used as the Contemt for the selected item in the CombBox.

Bonuses

The attached code also demonstrates how to sort the ListView columns using an attached DP called SortableList, which you set on your ListView like this:

XML
<ListView local:SortableList.IsGridSortable="True" SelectionMode="Single">

You can dig into the SortableList to see how it works.

The End

Anyway, I hope that all is clear. If you like it, you can leave a vote and a comment, that would be nice.

Enjoy.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United Kingdom United Kingdom
I currently hold the following qualifications (amongst others, I also studied Music Technology and Electronics, for my sins)

- MSc (Passed with distinctions), in Information Technology for E-Commerce
- BSc Hons (1st class) in Computer Science & Artificial Intelligence

Both of these at Sussex University UK.

Award(s)

I am lucky enough to have won a few awards for Zany Crazy code articles over the years

  • Microsoft C# MVP 2016
  • Codeproject MVP 2016
  • Microsoft C# MVP 2015
  • Codeproject MVP 2015
  • Microsoft C# MVP 2014
  • Codeproject MVP 2014
  • Microsoft C# MVP 2013
  • Codeproject MVP 2013
  • Microsoft C# MVP 2012
  • Codeproject MVP 2012
  • Microsoft C# MVP 2011
  • Codeproject MVP 2011
  • Microsoft C# MVP 2010
  • Codeproject MVP 2010
  • Microsoft C# MVP 2009
  • Codeproject MVP 2009
  • Microsoft C# MVP 2008
  • Codeproject MVP 2008
  • And numerous codeproject awards which you can see over at my blog

Comments and Discussions

 
GeneralMy vote of 5 Pin
FirstRay28-Jan-11 22:54
FirstRay28-Jan-11 22:54 
GeneralRe: My vote of 5 Pin
Sacha Barber24-May-11 22:26
Sacha Barber24-May-11 22:26 
QuestionStack in WPF - How ? Pin
ZachCoder3-May-10 9:29
ZachCoder3-May-10 9:29 
AnswerRe: Stack in WPF - How ? Pin
Sacha Barber3-May-10 10:43
Sacha Barber3-May-10 10:43 
GeneralRe: Stack in WPF - How ? Pin
ZachCoder4-May-10 11:34
ZachCoder4-May-10 11:34 
GeneralRe: Stack in WPF - How ? Pin
Sacha Barber4-May-10 20:05
Sacha Barber4-May-10 20:05 
GeneralCan't do the same with treeview inside comboBox [modified] Pin
Phanquangtu30-Jul-09 22:26
Phanquangtu30-Jul-09 22:26 
GeneralRe: Can't do the same with treeview inside comboBox Pin
Sacha Barber30-Jul-09 23:24
Sacha Barber30-Jul-09 23:24 
GeneralRe: Can't do the same with treeview inside comboBox Pin
Phanquangtu2-Aug-09 16:02
Phanquangtu2-Aug-09 16:02 
GeneralRe: Can't do the same with treeview inside comboBox Pin
YoniP9-Aug-09 0:56
YoniP9-Aug-09 0:56 
GeneralRe: Can't do the same with treeview inside comboBox Pin
Sacha Barber9-Aug-09 8:01
Sacha Barber9-Aug-09 8:01 
Yeah you could do that, that would work

Sacha Barber
  • Microsoft Visual C# MVP 2008/2009
  • Codeproject MVP 2008/2009
Your best friend is you.
I'm my best friend too. We share the same views, and hardly ever argue

My Blog : sachabarber.net

GeneralExcellent but just 4, because of scrollbar trouble Pin
MikeEasy27-Jul-09 10:13
MikeEasy27-Jul-09 10:13 
GeneralRe: Excellent but just 4, because of scrollbar trouble Pin
Sacha Barber27-Jul-09 10:28
Sacha Barber27-Jul-09 10:28 
GeneralNice one ! Pin
Abhijit Jana17-Jul-09 8:50
professionalAbhijit Jana17-Jul-09 8:50 
GeneralRe: Nice one ! Pin
Sacha Barber17-Jul-09 23:56
Sacha Barber17-Jul-09 23:56 
GeneralRegarding your book... Pin
Frederico Barbosa13-Jul-09 23:35
Frederico Barbosa13-Jul-09 23:35 
GeneralRe: Regarding your book... Pin
Sacha Barber13-Jul-09 23:36
Sacha Barber13-Jul-09 23:36 
GeneralAwesome Article Pin
azamsharp12-Jul-09 7:37
azamsharp12-Jul-09 7:37 
GeneralRe: Awesome Article Pin
Sacha Barber12-Jul-09 21:42
Sacha Barber12-Jul-09 21:42 
GeneralMy vote of 1 Pin
rolphjasm11-Jul-09 1:30
rolphjasm11-Jul-09 1:30 
GeneralRe: My vote of 1 Pin
Sacha Barber12-Jul-09 21:41
Sacha Barber12-Jul-09 21:41 
Generalhello, help from you Pin
Seraph_summer9-Jul-09 10:52
Seraph_summer9-Jul-09 10:52 
GeneralTextSearch.TextPath Pin
88Keys8-Jul-09 15:42
88Keys8-Jul-09 15:42 
GeneralRe: TextSearch.TextPath Pin
Sacha Barber8-Jul-09 21:49
Sacha Barber8-Jul-09 21:49 
GeneralGreat article Pin
GDavy6-Jul-09 19:25
GDavy6-Jul-09 19:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.