Develop Reference

How to handle dependency injection with WPF with multiple pages and navigation?

I've been trying to do the following thing in WPF:
A window with a login-page and a home-page.
Upon successfully authenticating a user, the window should display the home-page.
It should work by using the native WPF dependency injection framework.
But also...
There might be a page 3, 4, 5 and each of these pages should be able to call one another.
And maybe each of these pages could have pages inside them that can also call each other.
So the solution should be able to work with nested pages and navigations if possible.
What I have:
So, after looking for solutions in the stack forum I ended up with this composition approach.
Starting by the App.xaml, all services and viewmodels are initialized and the main window receives its viewmodel by injection:
private void ConfigureServices(ServiceCollection services)
{
services.AddSingleton<MainWindow>();
//ViewModels
services.AddSingleton<MainViewModel>();
services.AddSingleton<AuthViewModel>();
services.AddSingleton<HomeViewModel>();
}
private void OnStartup(object sender, StartupEventArgs e)
{
var mainWindow = serviceProvider.GetService<MainWindow>();
mainWindow.DataContext = serviceProvider.GetService<MainViewModel>();
mainWindow.Show();
}
Then, the mainViewModel receives by injection every other viewmodel and stores them in a property.
public class MainViewModel
{
public IPageViewModel SelectedPage {get; set; } //PropertyChanged() removed for brevity.
public ObservableCollection<IPageViewModel> Pages {get; set;}
public MainViewModel(AuthViewModel authViewModel, HomeViewModel homeViewModel)
{
this.Pages = new ObservableCollection<IPageViewModel>() { authViewModel, homeViewModel};
this.SelectedPage = this.Pages.First();
}
}
All page viewmodels inherit from this interface so they can be retrieved from the collection by name and then added as the SelectedPage when needed.
public interface IPageViewModel : INotifyPropertyChanged
{
public string PageTitle { get; set; }
}
The window has a content control with a property content bound to the SelectedPage so it's updated.
<Window>
<ContentControl Content="{Binding SelectedPage}" />
</Window>
And it knows which view to use for each viewmodel by these data templates.
<Application.Resources>
<DataTemplate DataType="{x:Type vm:AuthViewModel}">
<views:AuthView />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:HomeViewModel}">
<views:HomeView />
</DataTemplate>
</Application.Resources>
But then... I noticed that this won't work, I can only call changes on the SelectedPage from within the mainViewModel.
public class AuthViewModel : BaseViewModel
{
public AuthViewModel() { }
public void AttemptLogin() {
// how
SelectedPage = Pages[1];
}
}
Issues
I could perhaps inject the mainviewmodel in all child models, but that would not look good and in fact from the start a lot of things are kind of a mess.
For example, I have to:
Add a service viewmodel for every viewmodel I create to the app.xaml.
Add each one of them as a parameter of the mainwindow viewmodel which looks ugly.
I'm probably doing this very wrong, I need help.

There are many possible solutions. A simple one is to introduce an event.
I also recommend to move and restrict the responsibility to select view models to the MainViewModel. Other page models should not be aware of the flow like who selects who. Otherwise this would add a too tight coupling, which is avoidable at this point.
public class MainViewModel
{
public IPageViewModel SelectedPage { get; set; }
private Dictionary<string, IPageViewModel> Pages { get; }
public MainViewModel(AuthViewModel authViewModel, HomeViewModel homeViewModel)
{
authViewModel.AuthenticationPassed += OnAuthenticationSuccessfull;
this.Pages = new Dictionary<string, IPageViewModel>()
{
{ nameof(AuthViewModel), authViewModel },
{ nameof(HomeViewModel), homeViewModel }
};
this.SelectedPage = this.Pages[nameof(AuthViewModel)];
}
public OnAuthenticationSuccessfull(object sender, EventArgs e)
{
(sender as AuthViewModel).AuthenticationPassed -= OnAuthenticationSuccessfull;
this.SelectedPage = this.Pages[nameof(HomeViewModel)];
}
}
class AuthViewModel
{
public event EventHandler AuthenticationPassed { get; }
...
}

Multiple ViewModels in same View

I have several different ViewModels that I would like to display in the same view (MainPage.xaml).
I'm new to this and don't know how to do it. I have tried to create a MainViewModel:
public class MainViewModel : ViewModelBase, INotifyPropertyChanged
{
WeatherViewModel weatherView = new WeatherViewModel();
ForecastViewModel forecastViewModel = new ForecastViewModel();
DeparturesViewModel departuresViewModel = new DeparturesViewModel();
CalenderViewModel calenderViewModel = new CalenderViewModel();
}
public void GetAllViews()
{
weatherView.GetCurrentTemp();
forecastViewModel.GetForecastTemp();
departuresViewModel.GetDepartures();
calenderViewModel.GetCalender();
}
And in my MainPage.xaml.cs I have this:
public MainPage()
{
this.InitializeComponent();
this.DataContext = new MainViewModel();
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
var vm = this.DataContext as MainViewModel;
vm.GetAllViews();
}
I manage to display each ViewModel individually like this instead:
this.DataContext = new WeatherViewModel();
but I would like to display everything in the same View.

I think you're on the right track but missed some small but important pieces.
In your example code the MainViewModel class is currently setup with private fields where you really need public properties. Additionally, I would make sure ViewModelBase implements INotifyPropertyChanged if it's not already; that way none of the classes deriving from ViewModelBase need to worry about that part.
public abstract class ViewModelBase : INotifyPropertyChanged
{
/* INotifyPropertyChanged implementation +
whatever other common behavior makes sense
belongs in this class
*/
}
public class MainViewModel : ViewModelBase
{
public WeatherViewModel Weather { get; } = new WeatherViewModel();
public ForecastViewModel Forecast { get; } = new ForecastViewModel();
public DeparturesViewModel Departures { get; } = new DeparturesViewModel();
public CalendarViewModel Calendar { get; } = new CalendarViewModel();
}
In your view code behind file you're setting the data context to 2 different instances of MainViewModel - once in the constructor and once in the Loaded event handler. I'd stick with the constructor version or instead you could set the data context in XAML like this:
<MainPage.DataContext>
<MainViewModel>
</MainPage.DataContext>
Once the data context for the main page is setup and the view models are public properties then you can use bindings to access the state (properties) of the view models perhaps something like this:
<TextBlock Text='{Binding Path=Weather.CurrentTempCelsius, StringFormat='Current Temp: {0}°C'}' />

Multiple ViewModels in same View
You have many ways to approach. Fist way using x:bind. You could initialize each view model in the page resource and give them x:Name, then using x:bind to access specific property like following.
<Page.Resources>
<local:CalenderViewModel x:Name="CalenderViewModel"/>
<local:DeparturesViewModel x:Name="DeparturesViewModel"/>
<local:ForecastViewModel x:Name="ForecastViewModel"/>
<local:WeatherViewModel x:Name="WeatherViewModel"/>
</Page.Resources>
<Grid>
<TextBlock Text="{x:Bind WeatherViewModel.temperature}"/>
</Grid>
Other Way is that integrate all the ViewModels into MainViewModel. And coding.monkey provide the correct solution that you could refer directly.

Accessing MainViewModel from another viewmodel

I've a question on VM communication.
Here's my code in C#/WPF app.On my MainWindow.xam,I've a button.
On click of this button,
I need to access and modify the ProductList collection from within another ViewModel.
How do I achieve this please?
public List<ProductInfo> ProductList { get; private set; }
private MainWindow m_mvWindow = null;
public MainWindowViewModel(MainWindow window)
{
this.m_mvWindow = window;
}
MainWindow.xaml.cs
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new MainWindowViewModel(this);
}
}
Thanks.

The simplest solution would be to expose your other VM as a property of MainWindowViewModel, pass the child VM a reference to the ProductList collection and have an ICommand on the child VM which is bound to the button in your XAML and which handles the collection modifications.
Something like this:
Main VM
public class MainViewModel
{
<!-- Your stuff ->
public ChildViewModel ChildViewModel
{
if(_childViewModel == null)
{
_childViewModel = new ChildViewModel(ProductList)
}
return _childViewModel;
}
}
Child VM
public class ChildViewModel
{
private List<ProductInfo> _products;
public DelegateCommand ClearCollection {get; set;}
public ChildViewModel(List<ProductInfo> products)
{
_products = products;
ClearCollection = new DelegateCommand(OnClearCollection);
}
private void OnClearCollection()
{
_products.Clear();
}
}
And in the xaml...
<Button Command={Binding ChildViewModel.ClearCommand} Content="..." />

You can use either of these ways:
Create an event in the other view model and handle it in the main view model. That would be the preferred way, since it does avoid coupling your child VM to the main VM, which is poor design.
Pass the collection to the child VM in a constructor. Try to avoid passing the full main VM, again to avoid coupling.

Sharing data between different ViewModels

I'm trying to develop an easy MVVM project that it has two windows:
The first window is a text editor, where I bind some properties such as FontSize or BackgroundColor:
<TextBlock FontSize="{Binding EditorFontSize}"></TextBlock>
its DataContext is MainWindowViewModel:
public class MainWindowViewModel : BindableBase
{
public int EditorFontSize
{
get { return _editorFontSize; }
set { SetProperty(ref _editorFontSize, value); }
}
.....
The second window is the option window, where I have an slider for changing the font size:
<Slider Maximum="30" Minimum="10" Value="{Binding EditorFontSize }" ></Slider>
its DataContext is OptionViewModel:
public class OptionViewModel: BindableBase
{
public int EditorFontSize
{
get { return _editorFontSize; }
set { SetProperty(ref _editorFontSize, value); }
}
.....
My problem is that I have to get the value of the slider in the option window and then I have to modify the FontSize property of my TextBlock with this value. But I don't know how to send the font size from OptionViewModel to MainViewModel.
I think that I should use:
A shared model
A model in MainWindowViewModel and a ref of this model in OptionViewModel
Other systems like notifications, messages ...
I hope that you can help me. It's my first MVVM project and English isn't my main language :S
Thanks

Another option is to store such "shared" variables in a SessionContext-class of some kind:
public interface ISessionContext: INotifyPropertyChanged
{
int EditorFontSize { get;set; }
}
Then, inject this into your viewmodels (you are using Dependency Injection, right?) and register to the PropertyChanged event:
public class MainWindowViewModel
{
public MainWindowViewModel(ISessionContext sessionContext)
{
sessionContext.PropertyChanged += OnSessionContextPropertyChanged;
}
private void OnSessionContextPropertyChanged(object sender, PropertyChangedEventArgs e)
{
if (e.PropertyName == "EditorFontSize")
{
this.EditorFontSize = sessionContext.EditorFontSize;
}
}
}

There are many ways to communicate between view models and a lot of points what the point is the best. You can see how it is done:
using MVVMLight
in Prism
by Caliburn
In my view, the best approach is using EventAggregator pattern of Prism framework. The Prism simplifies MVVM pattern. However, if you have not used Prism, you can use Rachel Lim's tutorial - simplified version of EventAggregator pattern by Rachel Lim.. I highly recommend you Rachel Lim's approach.
If you use Rachel Lim's tutorial, then you should create a common class:
public static class EventSystem
{...Here Publish and Subscribe methods to event...}
And publish an event into your OptionViewModel:
eventAggregator.GetEvent<ChangeStockEvent>().Publish(
new TickerSymbolSelectedMessage{ StockSymbol = “STOCK0” });
then you subscribe in constructor of another your MainViewModel to an event:
eventAggregator.GetEvent<ChangeStockEvent>().Subscribe(ShowNews);
public void ShowNews(TickerSymbolSelectedMessage msg)
{
// Handle Event
}
The Rachel Lim's simplified approach is the best approach that I've ever seen. However, if you want to create a big application, then you should read this article by Magnus Montin and at CSharpcorner with an example.
Update: For versions of Prism later than 5 CompositePresentationEvent is depreciated and completely removed in version 6, so you will need to change it to PubSubEvent everything else can stay the same.

I have done a big MVVM application with WPF. I have a lot of windows and I had the same problem. My solution maybe isn't very elegant, but it works perfectly.
First solution: I have done one unique ViewModel, splitting it in various file using a partial class.
All these files start with:
namespace MyVMNameSpace
{
public partial class MainWindowViewModel : DevExpress.Mvvm.ViewModelBase
{
...
}
}
I'm using DevExpress, but, looking your code you have to try:
namespace MyVMNameSpace
{
public partial class MainWindowViewModel : BindableBase
{
...
}
}
Second solution: Anyway, I have also a couple of different ViewModel to manage some of these windows. In this case, if I have some variables to read from one ViewModel to another, I set these variables as static.
Example:
public static event EventHandler ListCOMChanged;
private static List<string> p_ListCOM;
public static List<string> ListCOM
{
get { return p_ListCOM; }
set
{
p_ListCOM = value;
if (ListCOMChanged != null)
ListCOMChanged(null, EventArgs.Empty);
}
}
Maybe the second solution is simplier and still ok for your need.
I hope this is clear. Ask me more details, if you want.

I'm not a MVVM pro myself, but what I've worked around with problems like this is,
having a main class that has all other view models as properties, and setting this class as data context of all the windows, I don't know if its good or bad but for your case it seems enough.
For a more sophisticated solution see this
For the simpler one,
You can do something like this,
public class MainViewModel : BindableBase
{
FirstViewModel firstViewModel;
public FirstViewModel FirstViewModel
{
get
{
return firstViewModel;
}
set
{
firstViewModel = value;
}
}
public SecondViewModel SecondViewModel
{
get
{
return secondViewModel;
}
set
{
secondViewModel = value;
}
}
SecondViewModel secondViewModel;
public MainViewModel()
{
firstViewModel = new FirstViewModel();
secondViewModel = new SecondViewModel();
}
}
now you have to make another constructor for your OptionWindow passing a view model.
public SecondWindow(BindableBase viewModel)
{
InitializeComponent();
this.DataContext = viewModel;
}
this is to make sure that both windows work on the same instance of a view model.
Now, just wherever you're opening the second window use these two lines
var window = new SecondWindow((ViewModelBase)this.DataContext);
window.Show();
now you're passing the First Window's view model to the Second window, so that they work on the same instance of the MainViewModel.
Everything is done, just you've to address to binding as
<TextBlock FontSize="{Binding FirstViewModel.EditorFontSize}"></TextBlock>
<TextBlock FontSize="{Binding SecondViewModel.EditorFontSize}"></TextBlock>
and no need to say that the data context of First window is MainViewModel

In MVVM, models are the shared data store. I would persist the font size in the OptionsModel, which implements INotifyPropertyChanged. Any viewmodel interested in font size subscribes to PropertyChanged.
class OptionsModel : BindableBase
{
public int FontSize {get; set;} // Assuming that BindableBase makes this setter invokes NotifyPropertyChanged
}
In the ViewModels that need to be updated when FontSize changes:
internal void Initialize(OptionsModel model)
{
this.model = model;
model.PropertyChanged += ModelPropertyChanged;
// Initialize properties with data from the model
}
private void ModelPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
if (e.PropertyName == nameof(OptionsModel.FontSize))
{
// Update properties with data from the model
}
}

I'm new to WPF and I've come up with a solution to this and I'm curious of more knowledgeable people's thoughts about what's right and wrong with it.
I have an Exams tab and a Templates tab. In my simple proof of concept, I want each tab to "own" an Exam object, and to be able to access the other tab's Exam.
I define the ViewModel for each tab as static because if it's a normal instance property, I don't know how one tab would get the actual instance of the other tab. It feels wrong to me, though it's working.
namespace Gui.Tabs.ExamsTab {
public class GuiExam: INotifyPropertyChanged {
private string _name = "Default exam name";
public string Name {
get => _name;
set {
_name = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName="") {
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
public partial class ExamsHome : Page {
public ExamsHome() {
InitializeComponent();
DataContext = ViewModel;
}
public static readonly ExamsTabViewModel ViewModel = new ExamsTabViewModel();
}
public class ExamsTabViewModel {
public GuiExam ExamsTabExam { get; set; } = new GuiExam() { Name = "Exam from Exams Tab" };
public GuiExam FromTemplatesTab { get => TemplatesHome.ViewModel.TemplatesTabExam; }
}
}
namespace Gui.Tabs.TemplatesTab {
public partial class TemplatesHome : Page {
public TemplatesHome() {
InitializeComponent();
DataContext = ViewModel;
}
public static readonly TemplatesTabViewModel ViewModel = new TemplatesTabViewModel();
}
public class TemplatesTabViewModel {
public GuiExam TemplatesTabExam { get; set; } = new GuiExam() { Name = "Exam from Templates Tab" };
public GuiExam FromExamTab { get => ExamsHome.ViewModel.ExamsTabExam; }
}
}
And then everything is accessible in the xaml:
TemplatesHome.xaml (excerpt)
<StackPanel Grid.Row="0">
<Label Content="From Exams Tab:"/>
<Label FontWeight="Bold" Content="{Binding FromExamTab.Name}"/>
</StackPanel>
<StackPanel Grid.Row="1">
<Label Content="Local Content:"/>
<TextBox Text="{Binding TemplatesTabExam.Name, UpdateSourceTrigger=PropertyChanged}"
HorizontalAlignment="Center" Width="200" FontSize="16"/>
</StackPanel>
ExamsHome.xaml (excerpt)
<StackPanel Grid.Row="0">
<Label Content="Local Content:"/>
<TextBox Text="{Binding ExamsTabExam.Name, UpdateSourceTrigger=PropertyChanged}"
HorizontalAlignment="Center" Width="200" FontSize="16"/>
</StackPanel>
<StackPanel Grid.Row="1">
<Label Content="From Templates Tab:"/>
<Label FontWeight="Bold" Content="{Binding FromTemplatesTab.Name}"/>
</StackPanel>

WPF - Use a single Model with multiple ViewModels

How would you allow multiple viewmodels to share the same model?
I'm creating the viewmodels in an ApplicationViewModel that is used for switching between views using a DataTemplate with the selected VM.
public ApplicationViewModel()
{
//Add pages
BasePageViewModels.Add("Home Page", new HomeViewModel());
BasePageViewModels.Add("Summary Page", new SummaryViewModel());
BasePageViewModels.Add("AddTestRun Page", new AddTestRunViewModel());
//some code here
CurrentBasePageViewModel = BasePageViewModels["Home Page"];
}
I want to be able to access the same Data class from within each of the created VM's.
Ideally I'd pass in the Data class to each ViewModel with a parameter but that then causes setting DataContex within XAML to throw an error because the DataContext has no accessible constructors.
Update
I'm setting the DataContext in the other Views like so:
<UserControl.DataContext>
<viewModels:SummaryViewModel/>
</UserControl.DataContext>
but doing that creates a new instance of the ViewModel, rather than using the one bound to CurrentBasePageViewModel.

Definitelly, the solution is to pass model to viemodel's constructor.
Now, how to solve your problem with xaml?
First of all, from your question and posted code it is not clear, what's the problem. (the xaml code is missing).
I just guess, the problem is causing design time datacontext, since it requires parameterless constructor. There are two solutions:
Add parameterless constructor:
public class MyViewModel {
public MyViewModel(){
//design time ctor. Create design time data here
}
public MyViewModel(MyModel model){...}
}
Create new class for design time datacontext:
public class MyViewModelDesignTime : MyViewModel {
public MyViewModelDesignTime() : base(new MyModel()){
//design time ctor. Create design time data here
}
}
and use this class in xaml:
d:DataContext="{d:DesignInstance l:MyViewModelDesignTime, IsDesignTimeCreatable=True}"

public ApplicationViewModel()
{
//shared model
var model = new MyModel();
//Add pages
BasePageViewModels.Add("Home Page", new HomeViewModel(model));
BasePageViewModels.Add("Summary Page", new SummaryViewModel(model));
BasePageViewModels.Add("AddTestRun Page", new AddTestRunViewModel(model));
//some code here
CurrentBasePageViewModel = BasePageViewModels["Home Page"];
}
<UserControl x:Class="ApplicationView"
xmlns:vm="clr-namespace:MyApp.ViewModels"
xmlns:vw="clr-namespace:MyApp.Views">
<UserControl.Resources>
<DataTemplate DataType="{x:Type vm:HomeViewModel}">
<vw:HomeView />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:SummaryViewModel}">
<vw:SummaryView />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:AddTestRunViewModel}">
<vw:AddTestRunView />
</DataTemplate>
</UserControl.Resources>
<ContentControl Content={Binding CurrentBasePageViewModel} />
</UserControl>

try something like this:
HomeViewModel _homeViewModel;
SummaryViewModel _summaryViewModel;
public ApplicationViewModel()
{
//Add pages
_homeViewModel = new HomeViewModel();
_summaryViewModel = new SummaryViewModel();
//some code here
_homeViewModel.SomeProperty = 5;
CurrentBasePageViewModel = _homeViewModel;
}
Then some int property of your view homeViewModel will have value 5.
Also you can create property in homeViewModel that will hold reference to current ApplicationViewModel or create interface.
Example of the interface:
public interface IName
{
/// <summary>
/// Property name.
/// </summary>
string PropertyName { get; }
}
Then make ApplicationViewModel implement this interface and pass it to viewmodel. In viewModel create property. Something like:
public class HomeViewModel
{
IName _iName;
public HomeViewModel(IName name)
{
_name = name;
}
}
And your ApplicationViewModel:
public class ApplicationViewModel : IName
{
HomeViewModel _homeViewModel;
SummaryViewModel _summaryViewModel;
public ApplicationViewModel()
{
//Add pages
_homeViewModel = new HomeViewModel(this);
_summaryViewModel = new SummaryViewModel();
//some code here
_homeViewModel.SomeProperty = 5;
CurrentBasePageViewModel = _homeViewModel;
}
}