WPF Binding ComboBox vào ViewModel

Question

Tôi đang cố gắng ràng buộc ViewModel của tôi vào ComboBox của tôi. Tôi có lớp ViewModel được định nghĩa như thế này:

class ViewModel 
{ 
    public ViewModel() 
    { 
     this.Car= "VW"; 
    } 

    public string Car{ get; set; } 
} 

tôi đặt ViewModel này như DataContext trong Window_Load như:

private void Window_Loaded(object sender, RoutedEventArgs e) 
    { 
     this.DataContext = new CarModel(); 
    } 

Sau đó, trong XAML của tôi, tôi làm điều này để ràng buộc ComboBox của tôi để ViewModel này. Tôi muốn hiển thị "VW" như chọn theo mặc định trong ComboBox của tôi:

 <ComboBox Name="cbCar" SelectedItem="{Binding Car, UpdateSourceTrigger=PropertyChanged}"> 
      <ComboBoxItem Tag="Mazda">Mazda</ComboBoxItem> 
      <ComboBoxItem Tag="VW">VW</ComboBoxItem> 
      <ComboBoxItem Tag="Audi">Audi</ComboBoxItem> 
     </ComboBox> 

Tôi có 2 câu hỏi:

1. Làm thế nào để thiết lập giá trị mặc định được chọn trong Combo Box để "VW" (một lần tải biểu mẫu, nó sẽ hiển thị "VW" trong hộp tổ hợp).
2. Thay vì thiết lập ComboBoxItems như trên trong xaml, làm thế nào để tôi đặt nó trong ViewModel của tôi và sau đó tải chúng trong ComboBox?

Cảm ơn,

UPDATE: Cho đến nay, tôi quản lý để thực hiện điều này nhưng tôi nhận được lỗi như sau trong ViewModel c-tor:

namespace MyData 
{ 
    class ViewModel 
    { 
     public ViewModel() 
     { 
      this.Make = ""; 
      this.Year = 1; 

      this.DefaultCar = "VW"; //this is where I get error 'No string allowed' 
     } 

     public IEnumerable<Car> Cars 
     { 
      get 
      { 
       var cars = new Car[] { new Car{Model="Mazda"}, new Car{Model="VW"}, new Car{Model="Audi"} }; 
       DefaultCar = cars.FirstOrDefault(car => car.Model == "VW"); 
      } 
     } 

     public string Make { get; set; } 
     public int Year { get; set; } 
     public Car DefaultCar { get; set; } 
    } 

    class Car 
    { 
     public string Model { get; set; } 
    } 
} 

Answer 1

Như bạn goint để thực hiện MVVM nó sẽ tốt hơn rất nhiều nếu bạn bắt đầu suy nghĩ trong đối tượng để đại diện cho Ô tô trong ứng dụng của bạn:

public class ViewModel 
    {  
      public Car SelectedCar{ get; set; } 
      public IEnumerable<Car> Cars{ 
       get { 
        var cars = YOUR_DATA_STORE.Cars.ToList(); 
        SelectedCar = cars.FirstOrDefault(car=>car.Model == "VW"); 
        return cars; 
       } 
      } 
    } 

    public class Car 
    { 
     public string Model {get;set;} 
     public string Make { get; set; } 
     public int Year { get; set; } 
    } 

XAML của bạn:

<ComboBox SelectedItem="{Binding SelectedCar}", ItemsSource="{Binding Cars}" 
     UpdateSourceTrigger=PropertyChanged}"/> 

Answer 2

1. Giá trị mặc định: Nếu bạn thiết lập viewModel.Car = "VW", sau đó nó sẽ tự động chọn mục đó trong hộp kết hợp. Để làm việc này, bạn cần phải triển khai INotifyPropertyChanged hoặc đặt Car trước khi bạn đặt DataContext.

thực hiện INotifyPropertyChanged có thể trông giống như:

class ViewModel : INotifyPropertyChanged 
{ 
    private string car; 

    public ViewModel() 
    { 
     this.Car = "VW"; 
     this.Cars = new ObservableCollection<string>() { "Mazda", "VW", "Audi" }; 
    } 

    public string Car 
    { 
     get 
     { 
      return this.car; 
     } 
     set 
     { 
      if (this.car != value) 
      { 
       this.car = value; 
       OnPropertyChanged(); 
      } 
     } 
    } 

    public ObservableCollection<string> Cars { get; } 

    public event PropertyChangedEventHandler PropertyChanged; 

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) 
    { 
     this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); 
    } 
} 

2. Bind ItemsSource và SelectedItem.

<ComboBox ItemsSource="{Binding Cars}" 
      SelectedItem="{Binding Car, Mode=TwoWay}"> 
</ComboBox> 

Bạn cũng có thể thiết lập ComboBox.ItemTemplate nếu nguồn hoặc xem của bạn là phức tạp hơn là chỉ hiển thị một chuỗi:

<ComboBox.ItemTemplate> 
     <DataTemplate> 
      <TextBlock Text="{Binding}" /> 
     </DataTemplate> 
    </ComboBox.ItemTemplate> 

Trong mô hình quan điểm chỉ cần thêm một tài sản danh sách:

public ObservableCollection<string> Cars { get; set; } 

Nó không phải là ObservableCollection nhưng loại đó sẽ tự động cập nhật giao diện người dùng bất cứ khi nào bạn thay đổi bộ sưu tập.