We Keep Coding

Value Update notifications between ViewModels

I have a Tab Control, with an "Exams" tab and a "Templates" tab. I want to share information between the two tabs.
My background is mostly in web with React and Redux, so my instinct is to have the shared information (of model type Exam) belong to the MainWindow, probably as a window resource.
My tech lead, who is much more experienced than me -- in all things, but also in C# though he's also new to WPF), assures me that this is not the way to do it in this setting, that the tabs' ViewModels should be sharing/passing the information.
So I've set up my basic UI with a text box in the Exams tab and a label to display the contents of the text box in the Templates tab.
<Page x:Class="Gui.Tabs.ExamsTab.ExamsHome" Title="ExamsTab">
<Grid VerticalAlignment="Center">
<StackPanel>
<Label Content="EXAMS TAB" />
<TextBox Text="{Binding ExamString, UpdateSourceTrigger=PropertyChanged}"/>
<Label Content="{Binding ExamString}" />
</StackPanel>
</Grid>
</Page>
--------
<Page x:Class="Gui.Tabs.TemplatesTab.TemplatesHome" Title="TemplatesHome">
<Grid VerticalAlignment="Center">
<StackPanel>
<Label Content="TEMPLATES TAB"/>
<Label Content="Text from Exams tab:"/>
<Label BorderBrush="Red" BorderThickness="1" Content="{Binding StringFromExamsTab}"/>
</StackPanel>
</Grid>
</Page>
And I've wired up the ViewModels best I can: (the code-behind and the viewmodels are in the same file for now)
namespace Gui.Tabs.ExamsTab {
public partial class ExamsHome : Page {
public ExamsHome() {
InitializeComponent();
DataContext = ViewModel;
}
public static readonly ExamsTabViewModel ViewModel = new ExamsTabViewModel();
}
public class ExamsTabViewModel :INotifyPropertyChanged {
private string _examString = "Default exam string";
public string ExamString {
get => _examString;
set {
_examString = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = "") {
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
------
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 string StringFromExamsTab {
// needs to be notified of value change!
get => ExamsHome.ViewModel.ExamString;
}
}
}
In the Exams tab, the text-box and its corresponding label are synced up.
And, in the Templates tab, the red box says "Default exam string", but it doesn't change with the value in the text-box.
I've read that:
The XAML binding engine listens for [the PropertyChangedEvent] for each bound property on classes that implement the INotifyPropertyChanged interface
Which implies to me that as long as INotifyPropertyChanged is implemented in the Exams VM, the bindings in the Templates tab should be notified.
How can I make this work? Open to the possibility that I'm doing it entirely (or mostly) wrong.

How to make content dynamic without changing DataContext

I got a MVVM set up to switch between views. To accomodate for the design, the MainWindow holds a tabcontroller which shows a page accordingly. One of the inner pages is changed when the user presses a button. A visual representation of the setup:
I set a Presenter viewmodel to as the datacontext of StudentView to handle the button event thrown in StudentOverview. That works, but when I want to switch the view I have to set a new datacontext of a specific type. But since Presenter is my datacontext, switching it removes the button's functionality.
What I want is to change the datatemplate without relying on the datacontext.
StudentView.xaml
<Page {...}>
<Page.DataContext>
<viewModels:Presenter/>
</Page.DataContext>
<Page.Resources>
<DataTemplate x:Key="Overview" DataType="{x:Type models:StudentOverviewModel}">
<local:StudentOverview/>
</DataTemplate>
<DataTemplate x:Key="Add" DataType="{x:Type models:StudentAddModel}">
<local:AddStudentControl/>
</DataTemplate>
</Page.Resources>
<ContentPresenter Content="{Binding}"/>
</Page>
StudentView.xaml.cs
public partial class StudentView : Page
{
public StudentView()
{
InitializeComponent();
// This switches the view but disables the button
this.DataContext = new StudentOverviewModel();
if (this.DataContext is Presenter presenter)
{
presenter.PropertyChanged += (object o, PropertyChangedEventArgs e) =>
{
// This switches the view but disables the button
this.DataContext = new StudentAddModel();
};
}
}
}

I can suggest two solutions:
First solution (recommended) would be to add a SelectedContent property of type object (or any other common base type for all view models e.g., IContentModel) to the Presenter view model. Then bind the SelectedContent to the ContentPresenter.Content property:
Presenter.cs
public partial class Presenter : INotifyPropertyChanged
{
public Presenter()
{
// Set default content
this.SelectedContent = new StudentOverviewModel();
}
private object selectedContent;
public object SelectedContent
{
get => this.selectedContent;
set
{
this.selectedContent = value;
OnPropertyChanged();
}
}
// Use ICommand implementation like DelegateCommand
public ICommand LoadContentCommand => new LoadContentCommand(ExecuteLoadContent, CanExecuteLoadContent);
private void ExecuteLoadContent(object param)
{
// Do something ...
// Load the new content on Button clicked
this.SelectedContent = new StudentAddModel();
}
private bool CanExecuteLoadContent => true;
}
StudentView.xaml.cs
public partial class StudentView : Page
{
public StudentView()
{
InitializeComponent();
}
}
StudentView.xaml
<Page {...}>
<Page.DataContext>
<viewModels:Presenter/>
</Page.DataContext>
<Page.Resources>
<DataTemplate DataType="{x:Type models:StudentOverviewModel}">
<local:StudentOverview/>
</DataTemplate>
<DataTemplate ="{x:Type models:StudentAddModel}">
<local:AddStudentControl/>
</DataTemplate>
</Page.Resources>
<ContentPresenter Content="{Binding SelectedContent}"/>
</Page>
StudentOverview.xaml
<UserControl{...}>
<!--- content -->
<Button Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StudentView}}, Path=DataContext.LoadContentCommand}"/>
</UserControl>
You can safely remove the Key attribute of the DataTemplate (if the DataType is not the same) so that they will apply automatically to any matching data type (implicit DataTemplate).
Another solution would be to move the SelectedContent to StudentView and turn it into a DependencyProperty:
StudentView.xaml.cs
public partial class StudentView : Page
{
public static readonly DependencyProperty SelectedContentProperty = DependencyProperty.Register(
"SelectedContent",
typeof(object),
typeof(StudentView));
public object SelectedContent
{
get => GetValue(SelectedContentProperty);
set => SetValue(SelectedContentProperty, value);
}
public StudentView()
{
InitializeComponent();
// This switches the view without disabling the button
this.SelectedContent = new StudentOverviewModel();
if (this.DataContext is Presenter presenter)
{
presenter.PropertyChanged += (object o, PropertyChangedEventArgs e) =>
{
// This switches the view without disabling the button
this.SelectedContent = new StudentAddModel();
};
}
}
}
StudentView.xaml
<Page {...}>
<Page.DataContext>
<viewModels:Presenter/>
</Page.DataContext>
<Page.Resources>
<DataTemplate DataType="{x:Type models:StudentOverviewModel}">
<local:StudentOverview/>
</DataTemplate>
<DataTemplate ="{x:Type models:StudentAddModel}">
<local:AddStudentControl/>
</DataTemplate>
</Page.Resources>
<ContentPresenter Content="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StudentView}}, Path=SelectedContent}"/>
</Page>

Populate ListView upon changing combobox - proper MVVM implementation

My goal is: ComboxBox with list of Jira account names and ListView that will display response from query sent to jira upong selecting the user in ComboBox (because account name is the part of the query).
What I have: little knowledge of C#, WPF, MVVM and working solution (code below), but it's not MVVM in any way. So, I've read a lot of about MVVM (relayCommand, PropertyChanged, etc), but for some reason I just can't come up with the solution on how to refactor this program to MVVM. One of the biggest problem is that I cant figure out how make that request to Jira and result in a form of IQueryable fit the MVVM-pattern. I mean, where should I place it.
So, please, if anyone could hint me what should I do generally to convert this program to follow MVVM pattern or any other type of advice, I would be very grateful!
MainWindow.xamls.cs
public ObservableCollection<Issue> Issues { get; set; }
private void OnNameComboChanged(object sender, EventArgs e)
{
Issues.Clear();
string name = ((sender as ComboBox).SelectedItem as ComboBoxItem).Content as string;
Issues fetchedIssues = new Issues();
var issuesList = fetchedIssues.FetchIssues(name); // returns the list of Issues in a type of --> IQueryable<Issue>
foreach (var issue in issuesList)
{
Issues.Add(issue);
}
}
public MainWindow()
{
Issues = new ObservableCollection<Issue>();
InitializeComponent();
}
MainWindow.xaml
<Controls:MetroWindow x:Name="Main_Window" x:Class="Dull.MainWindow"
........
DataContext="{Binding RelativeSource={RelativeSource Self}}"> <!-- how I link contexts-->
<Controls:MetroWindow.RightWindowCommands>
<Controls:WindowCommands>
<ComboBox x:Name="Name" SelectionChanged="OnNameComboChanged" > <!-- Combox box with nicknames -->
<ComboBoxItem>name of the user</ComboBoxItem>
<ComboBoxItem>another name of the user</ComboBoxItem>
</ComboBox>
</Controls:WindowCommands>
</Controls:MetroWindow.RightWindowCommands>
<Grid>
<ListView x:Name="issuesListView" ItemsSource="{Binding Issues}"> <!-- ListView binded to Issues collection -->
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Summary}"
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>

There are various frameworks like Prism, Caliburn Micro, MVVMLight and many more which provide the features to write MVVM design pattern application. Few of the features which the mentioned frameworks provides
DelegateCommand or RelayCommand
ViewModelLocator
Container/Module
Event Aggregator
These features ease to write the code in MVVM design pattern. However if you don't require all these features and don't want to integrate those then don't worry about it.
Now, all the conversation in this answer is based on that you want to write for your implementation without these frameworks.
You can refer to this blog to write RelayCommand. You do require ICommand implementation if you want to segregate View from ViewModel. These commands of ViewModel can be integrated with View using Blends' Interactivity trigger (refer this sample).
All above was a pre-work for the solution of your question. Follow the steps
Create a ViewModel
The below ViewModel depicts what you require:
public class MyViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private ObservableCollection<Issue> issues = new ObservableCollection<Issue>();
public ObservableCollection<Issue> Issues { get {return issues;} }
private ObservableCollection<string> users = new ObservableCollection<string>();
public ObservableCollection<string> Users { get {return users;} }
private string user;
public string User
{
get
{
return user;
}
set
{
user = value;
NotifyPropertyChanged();
}
}
private ICommand userChangedCommand;
public ICommand UserChangedCommand
{
get
{
return userChangedCommand ?? (userChangedCommand = new RelayCommand(
x =>
{
OnUserChanged();
}));
}
}
private ICommand loadedCommand;
public ICommand LoadedCommand
{
get
{
return loadedCommand?? (loadedCommand= new RelayCommand(
x =>
{
// Write Code here to populate Users collection.
}));
}
}
private void OnUserChanged()
{
Issues.Clear();
string name = this.User;
Issues fetchedIssues = new Issues();
var issuesList = fetchedIssues.FetchIssues(name); // returns the list of Issues in a type of --> IQueryable<Issue>
foreach (var issue in issuesList)
{
Issues.Add(issue);
}
}
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
2. View Changes:
<Controls:MetroWindow x:Name="Main_Window" x:Class="Dull.MainWindow" ........
>
<i:EventTrigger EventName="Loaded" >
<i:InvokeCommandAction Command="{Binding LoadedCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<Controls:MetroWindow.RightWindowCommands>
<Controls:WindowCommands>
<ComboBox x:Name="Name" ItemsSource="{Binding Users}" SelectionChanged="OnNameComboChanged" SelectedItem="{Binding User}" > <!-- Combox box is getting user details from ViewModel -->
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged" >
<i:InvokeCommandAction Command="{Binding UserChangedCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</ComboBox>
</Controls:WindowCommands>
</Controls:MetroWindow.RightWindowCommands>
<Grid>
<ListView x:Name="issuesListView" ItemsSource="{Binding Issues}"> <!-- ListView binded to Issues collection -->
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Summary}"
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
3. Now the last part How to Bind ViewModel to View.
If you are using the mentioned frameworks then this would be trivial based on ViewModelLocator feature. However, to achieve without the frameworks, you can use one of the below approach.
1) Create the instance ViewModel and assign in the Control's InitializeComponent method (.Xaml.cs)
var vm = new MyViewModel();
this.DataContext = vm;
However this breaks the pure MVVM design pattern
2) You can create the instance in View itself
<Controls:MetroWindow x:Name="Main_Window" x:Class="Dull.MainWindow">
<Controls:MetroWindow.DataContext>
<VM:MyViewModel />
</Controls:MetroWindow.DataContext>
...............
</Controls:MetroWindow>

Two Views in one ViewModel (WPF/MVVM)

PROBLEM: Use one single viewModel with two different views.
I have a Window with a control ContentControl which is binded to a property in the DataContext, called Object MainContent {get;set;}. Base on a navigationType enum property, I assign other ViewModels to it to show the correct UserControl.
I need to merge two views into one ViewModel, and because I'm assigning a ViewModel to the ContentControl mentioned before, the TemplateSelector is not able to identify which is the correct view as both shares the same viewModel
If I assign the view instead the ViewModel to the ContentControl, the correct view is shown, however, non of the commands works.
Any Help? Thanks in advance.
SOLUTION: based on #mm8 answer and https://stackoverflow.com/a/5310213/2315752:
ManagePatientViewModel.cs
public class ManagePatientViewModel : ViewModelBase
{
public ManagePatientViewModel (MainWindowViewModel inMainVM) : base(inMainVM) {}
}
ViewHelper.cs
public enum ViewState
{
SEARCH,
CREATE,
}
MainWindowViewModel.cs
public ViewState State {get;set;}
public ManagePatientViewModel VM {get;set;}
private void ChangeView(ViewState inState)
{
State = inState;
// This is need to force the update of Content.
var copy = VM;
MainContent = null;
MainContent = copy;
}
public void NavigateTo (NavigationType inNavigation)
{
switch (inNavigationType)
{
case NavigationType.CREATE_PATIENT:
ChangeView(ViewState.CREATE);
break;
case NavigationType.SEARCH_PATIENT:
ChangeView(ViewState.SEARCH);
break;
default:
throw new ArgumentOutOfRangeException(nameof(inNavigationType), inNavigationType, null);
}
}
MainWindow.xaml
<DataTemplate x:Key="CreateTemplate">
<views:CreateView />
</DataTemplate>
<DataTemplate x:Key="SearchTemplate">
<views:SearchView/>
</DataTemplate>
<TemplateSelector x:Key="ViewSelector"
SearchViewTemplate="{StaticResource SearchTemplate}"
CreateViewTemplate="{StaticResource CreateTemplate}"/>
<ContentControl
Grid.Row="1"
Content="{Binding MainContent}"
ContentTemplateSelector="{StaticResource ViewSelector}" />
TemplateSelector.cs
public class TemplateSelector : DataTemplateSelector
{
public DataTemplate SearchViewTemplate {get;set;}
public DataTemplate CreateViewTemplate {get;set;}
}
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if (!(item is SelectLesionViewModel vm))
{
return null;
}
switch (vm.ViewType)
{
case ViewState.CREATE:
return CreateViewTemplate;
case ViewState.SEARCH:
return SearchViewTemplate;
default:
return null;
}
}
}

How is the TemplateSelector supposed to know which template to use when there are two view types mapped to a single view model type? This makes no sense I am afraid.
You should use two different types. You could implement the logic in a common base class and then define two marker types that simply derive from this implementation and add no functionality:
public class ManagePatientViewModel { */put all your code in this one*/ }
//marker types:
public class SearchPatientViewModel { }
public class CreatePatientViewModel { }
Also, you don't really need a template selector if you remove the x:Key attributes from the templates:
<DataTemplate DataType="{x:Type viewModels:SearchPatientViewModel}">
<views:SearchPatientView />
</DataTemplate>
<DataTemplate DataType="{x:Type viewModels:CreatePatientViewModel}">
<views:CreatePatientView />
</DataTemplate>
...
<ContentControl
Grid.Row="1"
Content="{Binding MainContent}" />

Maybe the requirement is to switch out the views and retain the one viewmodel.
Datatemplating is just one way to instantiate a view.
You could instead set the datacontext of the contentcontrol to the instance of your viewmodel and switch out views as the content. Since views are rather a view responsibility such tasks could be done completely in the view without "breaking" mvvm.
Here's a very quick and dirty approach illustrating what I mean.
I build two usercontrols, UC1 and UC2. These correspond to your various patient views.
Here's the markup for one:
<StackPanel>
<TextBlock Text="User Control ONE"/>
<TextBlock Text="{Binding HelloString}"/>
</StackPanel>
I create a trivial viewmodel.
public class OneViewModel
{
public string HelloString { get; set; } = "Hello from OneViewModel";
}
My mainwindow markup:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel>
<Button Content="UC1" Click="UC1_Click"/>
<Button Content="UC2" Click="UC2_Click"/>
</StackPanel>
<ContentControl Name="parent"
Grid.Column="1"
>
<ContentControl.DataContext>
<local:OneViewModel/>
</ContentControl.DataContext>
</ContentControl>
</Grid>
The click events switch out the content:
private void UC1_Click(object sender, RoutedEventArgs e)
{
parent.Content = new UC1();
}
private void UC2_Click(object sender, RoutedEventArgs e)
{
parent.Content = new UC2();
}
The single instance of oneviewmodel is retained and the view shown switches out. The hellostring binds and shows ok in both.
In your app you will want a more sophisticated approach to setting that datacontext but this sample is intended purely as a proof of concept to show you another approach.
Here's the working sample:
https://1drv.ms/u/s!AmPvL3r385QhgpgMZ4KgfMWUnxkRzA

Binding ViewModel to ContentControl as its DataContext

I want to change UserControls on button clicks (I'm not going to complicate here, so I'll only mention important parts). So idea was to bind ViewModels of those UserControls to ContentControl, and than associate them Views using DataTemplates.
Here's the code:
<Window x:Class="Project.MainWindow">
<Window.Resources>
<DataTemplate DataType="{x:Type UserControl:ViewUserControlViewModel}" >
<UserControl:ViewUserControl/>
</DataTemplate>
<DataTemplate DataType="{x:Type UserControl:EditUserControlViewModel}" >
<UserControl:EditUserControl/>
</DataTemplate>
</Window.Resources>
<Grid>
<ContentControl DataContext="{Binding UserControlViewModel}" />
<Button Content="View" Click="ChangeToView()"/>
<Button Content="Edit" Click="ChangeToEdit()"/>
</Grid>
</Window>
ViewModel:
public class MainWindowViewModel : DependencyObject
{
public DependencyObject UserControlViewModel
{
get { return (DependencyObject)GetValue(UserControlViewModelProperty); }
set { SetValue(UserControlViewModelProperty, value); }
}
public static readonly DependencyProperty UserControlViewModelProperty =
DependencyProperty.Register("UserControlViewModel", typeof(DependencyObject), typeof(MainWindowViewModel), new PropertyMetadata());
public MainWindowViewModel()
{
UserControlViewModel = new EditUserControlViewModel();
}
}
But theres a problem. When I start project, I only see buttons but not any UserControls. What did I do wrong?

If your Window.DataContext is properly set to MainWindowViewModel this should do the job
<ContentControl Content="{Binding UserControlViewModel}" />

When doing mvvm your viewmodel should implement INotifyPropertyChanged and not inherit from DependencyObject.
public class MainWindowViewModel : INotifyPropertyChanged
{
private object _currentWorkspace; //instead of object type you can use a base class or interface
public object CurrentWorkspace
{
get { return this._currentWorkspace; }
set { this._currentWorkspace = value; OnPropertyChanged("CurrentWorkspace"); }
}
public MainWindowViewModel()
{
CurrentWorkspace= new EditUserControlViewModel();
}
//todo: to switch the workspace, create DelegeCommand/RelayCommand and set the CurrentWorkspace
//if you don't know about these commands let me know and i post it
public ICommand SwitchToViewCommand {get{...}}
public ICommand SwitchToEditCommand {get{...}}
}
xaml: you should set the Content Property to your CurrentWorkspace.
<ContentPresenter Content="{Binding UserControlViewModel}" />
<Button Content="View" Comamnd="{Binding SwitchToViewCommand}"/>
<Button Content="Edit" Comamnd="{Binding SwitchToEditCommand}"/>
! Don't forget to set the DataContext for your window to your MainWindowViewModel instance.

First of all you should post the code of your UserControl since (in your code snippet above) it's responsible for displaying some data.
Second you are not binding anything in your code.
Third your implementation of the ViewModel is wrong. You don't need to subclass a DependencyObject but instead implement the INotifyPropertyChanged interface in order to establish a ViewModel that is capable of notifying your View.
Fourth I don't know what you are doing with
<ContentControl DataContext="{Binding UserControlViewModel}" />
maybe you can explain further ?
Fifth when implementing the MVVM patterm (what you currently not do) you should avoid using events like the click event and instead use Commands.
(I know that's not a real answer yet, but I don't wanted to write in comment syntax)