How to change wpf combobox selection with another control (e.g. button)? - wpf

Question

I have a combobox and two buttons on the same page. The buttons are "Previous" and "Next". Ideally I'd like to use the buttons to select combobox items accordingly. Also, I'd like "Next" and "Previous" buttons to be disabled when end or beginning of the list is reached. I don't think I would have a problem with doing this in code-behind but I wonder if this is possible through xaml/binding/mvvm. Thanks.

Answer 1

I would suggest the following approach:
Regular Combobox
Buttons (Previous and Next) with Enabled property binded to ComboBox SelectedIndex using a Converter
You can then set the new Index using regular button Events or thorugh Commands

Answer 2

Yes it's perfectly possible. Firstly, I would strongly recommend that you use an MVVM framework, secondly using a framework such as Caliburn.Micro, you can easily invoke verbs (methods) on your view model from Buttons in your view.
So, for example, you would have a <Button x:Name="Next">Next</Button> in your view, and a corresponding public void Next() method in your view model. Caliburn.Micro will take care of the convention based binding from the Button click event to the view model's method with the same name.
In your Next method, you would increment the current page. This would also be a public property on your view model, which implements INotifyPropertyChanged. An MVVM framework such as Caliburn.Micro provides a method which will invoke the PropertyChanged event using a lambda expression, rather than a magic property name string.
Then, in your view, you would bind the ComboBox ItemsSource to a collection of possible page numbers, and the SelectedItem to the current page public property.
As it sounds like you're doing paging, you might also want to consider the PagedList library (UI agnostic) and corresponding NuGet package.

Answer 3

Quick and Dirty Implementation .
cs :
public partial class MainWindow : Window , INotifyPropertyChanged
{
public MainWindow()
{
InitializeComponent();
DataContext = this;
}
private List<string> _items;
public List<string> Items
{
get
{
if (_items == null)
_items = new List<string> { "1", "2", "3", "4", "5" };
return _items;
}
}
private string _selectedItem;
public string SelectedItem
{
get { return _selectedItem; }
set
{
_selectedItem = value;
if(PropertyChanged!= null)
PropertyChanged(this, new PropertyChangedEventArgs("SelectedItem"));
}
}
private ICommand _nextCommand;
public ICommand NextCommand
{
get
{
if (_nextCommand == null)
_nextCommand = new RelayCommand<string>(MoveToNext, CanMoveToNext);
return _nextCommand;
}
}
private ICommand _previousCommand;
public ICommand PreviousCommand
{
get
{
if (_previousCommand == null)
_previousCommand = new RelayCommand<string>(MoveToPrevious, CanMoveToPrevious);
return _previousCommand;
}
}
public event PropertyChangedEventHandler PropertyChanged = delegate { };
private void MoveToNext(object currentItem)
{
var currentIndex = _items.IndexOf((string)currentItem);
SelectedItem = _items.ElementAt(currentIndex + 1);
}
private bool CanMoveToNext(object currentItem)
{
return currentItem != null && _items.Last<string>() != (string)currentItem;
}
private void MoveToPrevious(object currentItem)
{
var currentIndex = _items.IndexOf((string)currentItem);
SelectedItem = _items.ElementAt(currentIndex - 1);
}
private bool CanMoveToPrevious(object currentItem)
{
return currentItem != null && _items.First<string>() != (string)currentItem;
}
}
RelayCommand
XAML :
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Content="Next" Command="{Binding NextCommand}" CommandParameter="{Binding ElementName=box, Path=SelectedItem}"/>
<Button Content="Prev" Grid.Column="1" Command="{Binding PreviousCommand}" CommandParameter="{Binding ElementName=box, Path=SelectedItem}"/>
<ComboBox x:Name="box"
Grid.Row="1" Grid.ColumnSpan="2"
ItemsSource="{Binding Items}"
SelectedItem="{Binding SelectedItem}"
/>
</Grid>