WindowsStore ComboBox SelectedIndex not being properly updated? - wpf

Question

I have a ComboBox that is binded to my ViewModel. The SelectedIndex is binded to a property on the ViewModel.
What I want to do is, with some conditions, some of the choices on the Index becomes invalid so that when the user tries to select it, it should show an error message and not change the currently selected item.
On the back-end, all is well. However, on the UI, the SelectedIndex of the ComboBox still changes. The error message shows properly, but then the 'shown' selected item in the combobox is not the proper one (ex. ComboBox is currently 'Item 4', User selects invalid item 'Item 3', shows error, but the ComboBox still shows 'Item 3').
Here is XAML code for reference:
<ComboBox x:Name="ComboBox_Cover"
HorizontalAlignment="Stretch"
ItemsSource="{Binding Path=Covers}"
SelectedIndex="{Binding Path=Cover,
Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource Style_ComboBox_CheckSelector}" />
And my ViewModel:
private int _Cover = 0;
public int Cover
{
get { return _Cover; }
set
{
bool canChangeCover = true;
if(IfInvalid())
{
canChangeCover = false;
ShowCoversError();
RaisePropertyChanged("Cover");
}
if(canChangeCover)
{
_Cover = value;
RaisePropertyChanged("Cover");
}
}
}
Am I doing something wrong?
A current workaround I found was using the OnSelectionChanged event and doing setting the SelectedIndex to the proper value there if Invalid. Though I'm not sure if that is a good workaround.
Thank you!

Answer 1

The easiest thing to do would be to take advantage of the IsEnabled property of the ComboBoxItem. Just modify the ItemsSource binding to point to a list of ComboBoxItem.
C#:
public class MainPageViewModel : INotifyPropertyChanged
{
public MainPageViewModel()
{
Covers = new List<ComboBoxItem>
{
new ComboBoxItem { Content = "Item 1", IsEnabled = true },
new ComboBoxItem { Content = "Item 2", IsEnabled = true },
new ComboBoxItem { Content = "Item 3", IsEnabled = true },
new ComboBoxItem { Content = "Item 4", IsEnabled = true }
};
}
public List<ComboBoxItem> Covers { get; set; }
private int selectedIndex;
public int SelectedIndex
{
get { return selectedIndex; }
set
{
if (SelectedIndex != value)
{
foreach (var cover in Covers)
{
if (Covers.IndexOf(cover) < value)
{
cover.IsEnabled = false;
}
}
selectedIndex = value;
NotifyPropertyChanged("SelectedIndex");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(string info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
}
XAML:
<ComboBox
HorizontalAlignment="Center"
VerticalAlignment="Center"
ItemsSource="{Binding Covers}"
SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" />
If you want to keep a collection of your data models in C#, you could implement an IValueConverter to project a list of Cover into a list of ComboBoxItem. You could also create a new class that inherits from ComboBoxItem and adds some additional dependency properties if you need to bind more values to your control template. For instance, I toyed around with this:
public class CoverComboBoxItem : ComboBoxItem
{
public string Description
{
get { return (string)GetValue(DescriptionProperty); }
set
{
SetValue(DescriptionProperty, value);
this.Content = value;
}
}
public static readonly DependencyProperty DescriptionProperty =
DependencyProperty.Register("Description", typeof(string), typeof(CoverComboBoxItem), new PropertyMetadata(""));
}
It's worth noting that to maintain a nice separation of concerns, I would usually prefer binding a model property directly to the IsEnabled property of the ComboBoxItem. Unfortunately, to make that work you'd need to setup the binding inside of ComboBox.ItemContainerStyle. Unfortunately, declaring bindings there isn't supported. There are some workarounds I've seen, but the complexity of implementing them is a lot more than the solution I've described above.
Hope that helps!