Avalonia Combo box binding

Question

I have an Avalonia MVVM based application. I am quite new to Avalonia and MVVM and am now working with combo boxes and bindings. My goal is to change the current view of the application when the user selects a combo box item from the combo box.

My first approach to handling this was using buttons as the combo box items. With this I was able to bind a command that allows the view to change via the view-model. This approach works, but its not appealing to have a button as a combo box item.

My real issue is that I am not sure if I can communicate my combo box with my view-model.

Any kind of help would be appreciated.

Below is the .AXAML

<ComboBox Grid.Column="0" HorizontalAlignment="Center" x:Name="ProductComboBox" PlaceholderText="Products" Cursor="Hand" Background="Transparent">
                       
                            <ComboBoxItem HorizontalAlignment="Center">Beef</ComboBoxItem>
                            <ComboBoxItem HorizontalAlignment="Center">Chicken</ComboBoxItem>
                            <ComboBoxItem HorizontalAlignment="Center">Fish</ComboBoxItem>
</ComboBox>

Image of combo box without buttons

Below is the button approach:

<ComboBox Grid.Column="1" HorizontalAlignment="Center" SelectedIndex="0" Cursor="hand">
                        <ComboBoxItem HorizontalAlignment="Center">
                            <Button Content="Fresh cuts" HorizontalAlignment="Stretch" Cursor="Hand" Command="{Binding ToFreshCutsPage}"/>
                        </ComboBoxItem>
                        <ComboBoxItem HorizontalAlignment="Center">
                            <Button Content="Butcher's choice" HorizontalAlignment="Stretch" Cursor="Hand" Command="{Binding ToButcherChoicePage}"/>
                        </ComboBoxItem>
                        <ComboBoxItem HorizontalAlignment="Center">
                            <Button Content="Discounts" HorizontalAlignment="Stretch" Cursor="Hand" Command="{Binding ToDiscountsPage}"/>
                        </ComboBoxItem>
</ComboBox>

Image of combo box with buttons

Answer 1

One solution would be to use reactive and subscribe in the constructor of your model.

ViewModel.cs:

 [Reactive] public int FilterComboBoxIndex { get; set; }

 // In constructor
     this.WhenAnyValue(p_vm => p_vm.FilterComboBoxIndex).Subscribe(_ => GoToPage());

 public void GoToPage()
 {
     // Navigate to page based on FilterComboBoxIndex
     switch ( FilterComboBoxIndex )
     {
        case 0:
            // ToFreshCutsPage
            break;
        case 1:
            // ToButcherChoicePage
            break;
        default:
            // ToDiscountsPage
            break;                
     }
 }

.axaml:

 <ComboBox SelectedIndex="{Binding FilterComboBoxIndex}">
      <ComboBoxItem>Beef</ComboBoxItem>
      <ComboBoxItem>Chicken</ComboBoxItem>
      <ComboBoxItem>Fish</ComboBoxItem>
 </ComboBox>