Multiple views use one and the same ViewModel

Question

I have written a WPF application. It has the following views:

AddStockView.cs (It is used to add stocks)
StockBox.cs (Represents a combo box that displays all the stocks).
View.cs (for MainWindow.xaml)

Of course, each view has an xaml file. Both views should be linked to the ViewModel class. To make sure that the DataContext of both views points to the same ViewModel object, I passed it as a constructor parameter. I am compiling the application in Visual Studio code. The compile seems to work however no window start. Probably my approach is wrong. I wanted to ask you what I need to change to make the application behave correctly. App.xaml.cs

namespace analyser
{
    /// 
    /// Interaction logic for App.xaml
    /// 
    public partial class App : Application
    {
        // Statische SQLiteConnection-Instanz für die gesamte Anwendung
        public static StockDBContext stockDBContext = new StockDBContext();
        protected override void OnStartup(StartupEventArgs e)
        {
            base.OnStartup(e);
            ViewModel viewModel = new ViewModel();
            StockBoxView stockboxview = new StockBoxView(viewModel);
            AddStockView addstockview = new AddStockView(viewModel);
            
            // Methode zum Hinzufügen von Stock-Objekten in die Datenbank
            stockDBContext.Stocks.Add(new Stock { Wkn = "123456", Titel = "Porsche Automobil Holding" });
            stockDBContext.Stocks.Add(new Stock { Wkn = "654321", Titel = "PayPal" });
            stockDBContext.SaveChanges();


        }
        protected override void OnExit(ExitEventArgs e)
        {
            base.OnExit(e);
        }
}   
       
}

View 1 AddStockView.cs

namespace analyser
{
    public partial class AddStockView : UserControl
    {
   
        public AddStockView(ViewModel vm)
        {
            InitializeComponent();
            this.DataContext = vm;
        }        
    }  
}

View 2 StockBox

namespace analyser
{
    public partial class StockBoxView : UserControl
    {
        public StockBoxView(ViewModel vm)
        {
            InitializeComponent();
            this.DataContext = vm;
        }     
    }

    
}

ViewModel.cs

namespace analyser
{
    public class ViewModel : INotifyPropertyChanged
    {
        private Stock stock = new Stock();
        public ObservableCollection ObservableStockList = new ObservableCollection();

        private ListCollectionView ComboBoxItems;

        public ViewModel()
        {
            // Initialisierung der ObservableStockList und ComboBoxItems
            Init();
        }

        // Property für den Namen des Wertpapiers
        private string _titel;
        public string Titel
        {
            get => _titel;
            set
            {
                _titel = value;
                OnPropertyChanged(nameof(Titel));
            }
        }

        // Property für die WKN des Wertpapiers
        private string _wkn;
        public string Wkn
        {
            get => _wkn;
            set
            {
                _wkn = value;
                OnPropertyChanged(nameof(Wkn));
            }
        }

        private ICommand _saveCommand;
        
        public ICommand SaveCommand
        {
            get
            {
                if (_saveCommand == null)
                    _saveCommand = new RelayCommand(Save);
                return _saveCommand;
            }
        }

        public void Init(){

            foreach (var stock in App.stockDBContext.Stocks)
            {
                    ObservableStockList.Add(stock);
            }

             // Erstellen und Konfigurieren Sie den ListCollectionView
            ComboBoxItems = new ListCollectionView(ObservableStockList);
            ComboBoxItems.SortDescriptions.Add(new SortDescription("Titel", ListSortDirection.Ascending));
            ComboBoxItems.IsLiveSorting = true;


        }

        public void Save()
        {
            // Speichern Sie die Werte der Textboxen in das Stock-Objekt
            stock.Titel = Titel;
            stock.Wkn = Wkn;
            Console.WriteLine($"Generate new Stock with Titel {stock.Titel} and WKN {stock.Wkn}");
            App.stockDBContext.Stocks.Add(stock);
            
            // Hier können Sie die Logik zum Speichern des Stock-Objekts in die Datenbank oder an einen anderen Speicherort einfügen.
        }

        // ... (weiterer Code wie die Implementierung von INotifyPropertyChanged)
        
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

MainWindow.xaml

View.cs

namespace analyser
{
    /// 
    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class View : Window
    {
        
        public View()
        {

            InitializeBindings();
        }
        
        private void InitializeBindings() {
            DataContext = this;
        }
    }
}

Edit

MyProjekt
|___Views
|    |___AddStock
|    |    |___AddStock.xaml (UserControl)
|    |    |___AddStock.xaml.cs
|    |___StockBox
|         |___StockBox.xaml (UserControl)
|         |___StockBox.xaml.cs   
|
|___ViewModels
|   |___ViewModel.cs
|
|___Models
|   |___Stock.cs
|   |___StockBoxDBContext
|
|___App.xaml
|___App.xaml.cs
|___MainWindow.xaml
|___MainWindow.xaml.cs

user21970328 · Accepted Answer

You must not explicitly assign the DataContext of a control. You should strive to enable the XAML parser to create the instances for you so that you can use markup language to design the layout conveniently.

Unless you explicitly assign a DataContext to an element the DataContext of the root element will be inherited to all children within the visual tree. This means you usually only assign the DataContext of the XAML root element.
You can use composition to design your view model classes to introduce a context specific DataContext to your layout (see example below).

The following example shows how to run the main window manually to allow to pass a view model to the constructor. It also shows how to use composition to introduce context related view model classes.

App.xaml

...

App.xaml.cs

partial class App : Application
{
  private void OnApplicationStarted(object sender, EventArgs e)
  {
    var someViewModel = new SomeViewModel();
    var mainViewModel = new MainViewModel(someViewModel);
    
    var mainWindow = new MainWindow(mainViewModel);

    // Start the GUI manually
    mainWindow.Show();
  }
}

MainWindow.xaml

MainWindow.xaml.cs

partial class MainWindow : Window
{
  public MainWindow(MainViewModel mainViewModel)
  {
    InitilaizeComponent();

    // This should be the only place in your application 
    // where you set the DataContext from a constructor
    this.DataContext = mainViewModel;
  }
}

MyUserControl.xaml.cs

partial class MyUserControl : UserControl
{
  // A depndency property to allow binding to the DataContext
  public static DependencyProperty SomeItems = DependencyObject.Register(...);

  // DataContext will be inherited from the visual parent.
  // This enables maximum flexibility and reusability.
  public MyUserControl()
  {
    InitilaizeComponent();
  }
}

MyUserControl.xaml.cs

MainViewModel.cs

class MainViewModel : INotifyPropertyChanged
{
  public SomeViewModel SomeViewModel { get; }
  public string ExampleText { get; }

  public MainViewModel(SomeViewModel someViewModel)
  {
    this.SomeViewModel = someviewModel;
    this.ExampleText = "This is from MainViewModel";
  }
}

SomeViewModel.cs

class SomeViewModel : INotifyPropertyChanged
{
  public ObservableCollection

Multiple views use one and the same ViewModel

Answers (1)

Related Questions