Avalonia组合框装订

Question

我有一个基于Avalonia MVVM的应用程序。我对Avalonia和MVVM非常陌生，现在正在处理组合框和绑定。我的目标是在用户从组合框中选择组合框项时更改应用程序的当前视图。

我的第一种处理方法是使用按钮作为组合框项。有了这一点，我就能够绑定一个允许视图通过视图模型更改的命令。这种方法有效，但它没有吸引力有一个按钮作为组合框项目。

我真正的问题是，我不确定我是否可以将我的组合框与我的视图-模型沟通。

任何帮助都将不胜感激。

下面是.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>

没有按钮的组合框图像

以下是按钮法：

<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>

带按钮的组合框图像

Answer 1

一种解决方案是在模型的构造函数中使用反应性和订阅。

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>