*** #2.1 Item selection in WPF selector-enabled items control***
In WPF we can use multiple types of controls to display collections of items which allow user to select one or multiple items from the collection. In this post I’m going to discuss what single selection possibilities they offer.
Let’s start with inheritance hierarchy – controls that allow such selection inherit from System.Windows.Controls.Primitives.Selector. If we take a look at what properties they have we find four that may be involved in selection process:
- SelectedIndex – Gets or sets the index of the first item in the current selection or returns negative one (-1) if the selection is empty.
- SelectedItem – Gets or sets the first item in the current selection or returns null if the selection is empty
- SelectedValue – Gets or sets the value of the SelectedItem, obtained by using SelectedValuePath.
- SelectedValuePath – Gets or sets the path that is used to get the SelectedValue from the SelectedItem.
source: msdn.microsoft.com
So, there are three ways get the selected item: i) its integer index in the collection, ii) the item itself, iii) one desired value from the item.
I have prepared a quick demo to show that. The app displays a ListBox of custom class objects and once an item is selected displays all three ways to present the selection. Let’s take a look into the code, starting with the class of objects that our list will contain:
|
|
public class Item { public string Name { get; set; } public int Value { get; set; } public Item(string _name, int _value) { Name = _name; Value = _value; } } |
The list will be generated and stored in view model. The view model will also have three public properties: i) ItemSelectedIndex of type integer bound to SelectedIndex property of our ListBox, ii) ItemSelectedItem of type Item bound to SelectedItem, iii) ItemSelectedValue of type string bound to SelectedValue. Let’s take a look at complete ViewModel class:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
public class ViewModel : INotifyPropertyChanged { private List<Item> items; public IReadOnlyList<Item> Items { get { return items.AsReadOnly(); } } public ViewModel() { items = new List<Item>(); for (int i = 1; i <= 10; i++) { items.Add(new Item(String.Format("Item number {0}", i.ToString()), i * 3)); } } private int itemSeletctedIndex; public int ItemSelectedIndex { get { return itemSeletctedIndex; } set { itemSeletctedIndex = value; OnPropertyChanged(nameof(ItemSelectedIndex)); } } private Item itemSelectedItem; public Item ItemSelectedItem { get { return itemSelectedItem; } set { itemSelectedItem = value; OnPropertyChanged(nameof(ItemSelectedItem)); } } private string itemSelectedValue; public string ItemSelectedValue { get { return itemSelectedValue; } set { itemSelectedValue = value; OnPropertyChanged(nameof(ItemSelectedValue)); } } #region INotifyPropertyChanged public event PropertyChangedEventHandler PropertyChanged; private void OnPropertyChanged(params string[] propertiesChanged) { if (PropertyChanged != null) { foreach (string property in propertiesChanged) { PropertyChanged(this, new PropertyChangedEventArgs(property)); } } } #endregion } |
And now the most important part – the view. As mentioned above as a container for collection we will use ListBox and bound properties as it was described when discussing the view model class. The only thing that’s left is setting correct value to SelectedValuePath property. In this case we want to use Name property of our item class so we need to set SelectedValuePath to “Name”. Here’s how to set the ListBox up:
|
|
<ListBox ItemsSource="{Binding Items}" Grid.Column="0" SelectedIndex="{Binding ItemSelectedIndex}" SelectedItem="{Binding ItemSelectedItem}" SelectedValue="{Binding ItemSelectedValue}" SelectedValuePath="Name"> <ListBox.ItemTemplate> <DataTemplate> <TextBlock> <TextBlock.Text> <MultiBinding StringFormat="{}{0} [{1}]"> <Binding Path="Name"/> <Binding Path="Value"/> </MultiBinding> </TextBlock.Text> </TextBlock> </DataTemplate> </ListBox.ItemTemplate> </ListBox> |
Now, to use the selected index, item or value which are bound to corresponding properties in view model we need to add some controls and again bound them to view model properties:
|
|
<StackPanel Grid.Column="1" Margin="5,0"> <TextBlock Text="{Binding ItemSelectedIndex, Mode=OneWay}"/> <TextBlock Text="{Binding ItemSelectedValue, Mode=OneWay}"/> <TextBlock Text="{Binding ItemSelectedItem, Mode=OneWay}"/> </StackPanel> |
And that’s it. To sum things up – there are three ways to access selected item in a selector control in WPF: by its index, by the item itself or by one particular value in the item.
*** #2.2 Passing property name to OnPropertyChanged()***
Second thing I want to mention today is a hint how to make invoking OnPropertyChanged() method in a property setter a bit more controlled when not using any MVVM framework.
ViewModels usually implement INotifyPropertyChanged interface which purpose is to notify views when a property has been updated. This is done by invoking OnPropertyChanged method with property name passed as a parameter.
|
|
private string property; public string Property { get { return property; } set { property = value; OnPropertyChanged("Property"); } } |
That is not the best way. What if we decide to change the property name and the backing field can also be changed somewhere else? In this case we need to go and manually change the hard-coded property name. So what can be done instead is this:
|
|
OnPropertyChanged(nameof(Property)); |
Having passed the parameter this way we can simply go to the property, right click and rename it using Visual Studio renaming tool which will update all calls to this property. Definitely better!
