So I've been trying to implement the MVVM pattern within a simple WPF application that has the following structure:
MODEL
public class Foobar
{
public string Foo { get; set; }
public string Bar { get; set; }
public string DoSomethingWithFoo()
{
return "The quick brown fox";
}
public string DoSomethingWithBar()
{
return "jumps over the lazy dog.";
}
}
VIEW MODEL (BASE)
public abstract class ViewModel : INotifyPropertyChanged
{
[Conditional("DEBUG")]
[DebuggerStepThrough]
public void VerifyPropertyName(string propertyName)
{
if (TypeDescriptor.GetProperties(this)[propertyName] == null)
{
Debug.Fail("Invalid property name: " + propertyName);
}
}
protected virtual void OnPropertyChanged(string propertyName)
{
this.VerifyPropertyName(propertyName);
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
VIEW MODEL (IMPL)
public class FoobarViewModel : ViewModel
{
private readonly Foobar foobar;
public string Foo
{
get
{
return this.foobar.Foo;
}
set
{
this.foobar.Foo = value;
OnPropertyChanged("Foo");
}
}
public string Bar
{
get
{
return this.foobar.Bar;
}
set
{
this.foobar.Bar = value;
OnPropertyChanged("Bar");
}
}
private FoobarCommand fooCommand;
public FoobarCommand FooCommand
{
get
{
return fooCommand;
}
set
{
fooCommand = value;
OnPropertyChanged("FooCommand");
}
}
private FoobarCommand barCommand;
public FoobarCommand BarCommand
{
get
{
return barCommand;
}
set
{
barCommand = value;
OnPropertyChanged("BarCommand");
}
}
private void DoSomethingWithFoo()
{
if (!string.IsNullOrEmpty(this.foobar.Foo))
{
this.foobar.Foo = this.foobar.DoSomethingWithFoo();
OnPropertyChanged("Foo");
}
}
private void DoSomethingWithBar()
{
if (!string.IsNullOrEmpty(this.foobar.Bar))
{
this.foobar.Bar = this.foobar.DoSomethingWithBar();
OnPropertyChanged("Bar");
}
}
///<remarks>
/// must use the parameterless constructor to satisfy <Window.Resources>
///</remarks>
public FoobarViewModel()
{
this.foobar = new Foobar()
{
Foo = "Lorem",
Bar = "Ipsum"
}
this.fooCommand = new FoobarCommand(DoSomethingWithFoo);
this.barCommand = new FoobarCommand(DoSomethingWithBar);
};
}
COMMAND
public class FoobarCommand : ICommand
{
Action action;
public FoobarCommand(Action action)
{
this.action = action;
}
public bool CanExecute(object parameter)
{
return true;
}
public event EventHandler CanExecuteChanged;
public void Execute(object parameter)
{
this.action.Invoke();
}
}
VIEW
<Window.Resources>
<local:FoobarViewModel x:Key="FoobarViewModel" />
</Window.Resources>
<Grid DataContext="{StaticResource FoobarViewModel}">
<TextBox Name="FooTextBox" Text="{Binding Foo, Mode=TwoWay, ValidatesOnDataErrors=True}" />
<TextBox Name="BarTextBox" Text="{Binding Bar, Mode=TwoWay, ValidatesOnDataErrors=True}" />
</Grid>
The problem with this approach is, despite that the ViewModel is binding okay with the View, the Model is not reflecting such changes (meaning the Model is not notifying-back changes to its instance at the ViewModel)
I would really appreciate any bit of advice regarding this post, thanks much you guys in advance.
EDIT
Updated snippets with the missing code (thanks Pavlo and Ben)
Committed solution to a public svn repo http://nanotaboada.svn.beanstalkapp.com/dotnet/trunk/Dotnet.Samples.Rijndael/ for anyone interested in checking out the whole project.
Modified Model and ViewModel methods, added ICommand implementation. For a full working sample please checkout revision 16.
Everything looks OK except one small, but important detail. It looks like you forgot to set DataContext of your view to the instance of the view model.
<Window ...
DataContext="{StaticResource FoobarViewModel}">
Without it your bindings will fail (look in the output window of Visual Studio when under debugger and you'll see binding errors).
Also note that the values will be updated in your view model and model when the TextBox looses focus. To make it update while you type set UpdateSourceTrigger to PropertyChanged on your bindings:
<TextBox Name="FooTextBox" Text="{Binding Foo, Mode=TwoWay, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}" />
In your FooBarViewModel you are not instantiating your Model, it is left as null, since you marked it readonly, you will need to new it in a default constructor.
Related
Problem:
My Viewmodel creates a instance of a controller mycontroller and the property Busy shall be passed to the View and updated in the View based on the controller state, but my View doesn't get updated. The other property Busy2 is updated based on the current state. Bindablebase implements the I
Question:
Why the property Busy in the ViewModel is not updated? The mycontroller.Busy property is updating, but not the view.
Framework & Tools:
PRISM 6.3.0
Fody.Propertychanged
View:
<TextBlock Text="{Binding Path=Busy}"></TextBlock>
<TextBlock Text="{Binding Path=Busy2}"></TextBlock>
ViewModel:
public class Controller
{
public bool Busy { get; private set; }
public async void GetValue()
{
Busy = true;
await Task.Delay(5000);
Busy = false;
}
}
public class MyViewModel : BindableBase
{
private readonly Controller _mycontroller;
public DelegateCommand<string> RunCommand { get; private set; }
// This property is not updated in the view
public bool Busy
{
get { return _mycontroller.Busy; }
}
// Works as aspected
public bool Busy2 { get; set; }
public MyViewModel()
{
_mycontroller = new Controller();
RunCommand = new DelegateCommand<string>(Run, Canrun).ObservesProperty((() => _mycontroller.Busy));
}
private bool Canrun(string arg)
{
return _mycontroller.Busy != true;
}
private void Run(string obj)
{
Busy2 = true;
_mycontroller.GetValue();
}
}
Update:
I added the Bindablebase from Prism, because is implement the INotifyPropertyChanged, but the view is still not updated.
I refactored the code and I set a breakpoint to set { SetProperty(ref _busy, value); } and the breakpoint is never reached.
I removed the Propertychanged.Fody nuget package too.
ViewModel:
public class Controller : BindableBase
{
private bool _busy;
public bool Busy
{
get { return _busy; }
set { SetProperty(ref _busy, value); }
}
public Controller()
{
}
public void DoWork1()
{
for (var i = 0; i < 10; i++)
{
Thread.Sleep(1000);
_busy = !_busy;
Debug.WriteLine(_busy.ToString());
}
}
public void DoWork2()
{
_busy = !_busy;
}
}
public class MainWindowViewModel : BindableBase
{
private Controller mycontroller;
private string _title = "Prism Unity Application";
public DelegateCommand RunCommand { get; private set; }
public string Title
{
get { return _title; }
set { SetProperty(ref _title, value); }
}
public bool Busy
{
get { return mycontroller.Busy; }
}
public MainWindowViewModel()
{
RunCommand = new DelegateCommand(Execute);
mycontroller = new Controller();
}
private void Execute()
{
mycontroller.DoWork1();
}
}
View:
<Window x:Class="PropertytestPrism.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"
Title="{Binding Title}" Height="350" Width="525">
<StackPanel>
<Button Command="{Binding RunCommand}" Content="Run"></Button>
<TextBlock Text="{Binding Busy}"></TextBlock>
</StackPanel>
</Window>
Update 2
Failure: Missing INotifypropertychanged for the class Controller
The View is still not updated and the reason for this is my Delegatecommandmethod, which executes mycontroller.DoWork1();
Question:
Why the View is not updated? If I execute the method inside the DelegateCommandmethod?
You should implement INotifyPropertyChanged by your Controller class. Property is changed inside Controller class and this changing should be notified:
public class Controller : INotifyPropertyChanged
{
private bool _busy;
public bool Busy
{
get
{
return _busy;
}
private set
{
SetField(ref _busy, value, "Busy"); }
}
}
public async void GetValue()
{
Busy = true;
await Task.Delay(5000);
Busy = false;
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
protected bool SetField<T>(ref T field, T value, string propertyName)
{
if (EqualityComparer<T>.Default.Equals(field, value))
{
return false;
}
field = value;
OnPropertyChanged(propertyName);
return true;
}
}
Try making your bindings work like this.
<TextBlock Text="{Binding Busy,Mode=OneWay}"></TextBlock>.
By default bindings are one time and so they wont be updated even on the property changed notification.
Tried a lot of stuff, still doesn't work. Binding on the two TextBlocks don't work. Used INotifyPropertyChanged interface much like this code to no avail.
Code:
MainWindow.xaml:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ClockWatcher" xmlns:System="clr-namespace:System;assembly=mscorlib"
x:Name="clockWatcherWindow"
x:Class="ClockWatcher.MainWindow"
Title="Clock Watcher" Height="554" Width="949"
KeyDown="KeysDown" Focusable="True" Closing="SaveSession"
DataContext="{Binding SM, RelativeSource={RelativeSource Self}}">
<TextBlock x:Name="programStartBlock" Text="{Binding StartTime, BindsDirectlyToSource=True, FallbackValue=Binding sucks so much!!!, StringFormat=ProgramStarted: \{0\}, TargetNullValue=This thing is null}" Padding="{DynamicResource labelPadding}" FontSize="{DynamicResource fontSize}"/>
<TextBlock x:Name="totalTimeLabel" Text="{Binding SM.currentSession.TotalTime, StringFormat=Total Time: \{0\}}" Padding="{DynamicResource labelPadding}" FontSize="{DynamicResource fontSize}"/>
</Window>
MainWindow.xaml.cs:
public partial class MainWindow : Window
{
private const string SESSION_FILENAME = "SessionFiles.xml";
/// <summary>
/// Represents, during selection mode, which TimeEntry is currently selected.
/// </summary>
public SessionManager SM { get; private set; }
public MainWindow()
{
InitializeComponent();
SM = new SessionManager();
SM.newAddedCommentEvent += currentTimeEntry_newComment;
SM.timeEntryDeletedEvent += currentTimeEntry_delete;
SM.commentEntryDeletedEvent += entry_delete;
}
}
SessionManager.cs:
public class SessionManager : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
[NonSerialized]
private DateTime _dtStartTime;
private Session current_session;
#region Properties
public DateTime StartTime
{
get
{
return _dtStartTime;
}
private set
{
if (_dtStartTime != value)
{
_dtStartTime = value;
OnPropertyChanged("StartTime");
}
}
}
public Session CurrentSession
{
get
{
return current_session;
}
set
{
if (current_session != value)
{
OnPropertyChanged("CurrentSession");
current_session = value;
}
}
}
#endregion
public SessionManager()
{
_dtStartTime = DateTime.Now;
}
private void OnPropertyChanged([CallerMemberName] string member_name = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(member_name));
}
}
}
Session.cs:
public class Session : INotifyPropertyChanged
{
private TimeSpan total_time;
public DateTime creationDate { get; private set; }
public event PropertyChangedEventHandler PropertyChanged;
public TimeSpan TotalTime
{
get
{
return total_time;
}
set
{
if (total_time != value)
{
OnPropertyChanged("TotalTime");
total_time = value;
}
}
}
public Session()
{
creationDate = DateTime.Now;
}
private void OnPropertyChanged([CallerMemberName] string member_name = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(member_name));
}
}
}
In first TextBlock, instead of SM.StartTime, write only StartTime.
Remove ElementName from first TB.
Make CurrentSession public property, Your currentSession is private now.
In your SessionManager ctor, current_session = new Session();
Remove DataContext from XAML, use this.DataContext = SM; in your window contructor.
If you want to use DataContext in XAML,
<Window.DataContext>
<local:SessionManager />
</Window.DataContext>
The marked correct answer is definitely the better way to do it, but I just wanted to answer explaining more in detail why what you posted didn't work.
The issue is that when you wrote DataContext={Binding SM, RelativeSource={RelativeSource Self} in your MainWindow.xaml, the binding was evaluted before your line SM = new SessionManager(); was executed in your MainWindow.xaml.cs constructor.
You can see this in effect if you changed your getter for SM to:
public SessionManager SM
{
get { return new SessionManager();}
}
This basically ensures that when WPF evaluates your binding, it'll get an actual object for your SM property instead of null.
Just thought perhaps this will help understanding and reduce frustration next time :). The way you asked your question, you technically needed to implement INotifyPropertyChanged on your MainWindow class, which is a big no-no.
I have a button like this:
<Button Content="Gönder" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="932,23,0,0" Height="25" Command="{Binding Path=SetTeamList}" CommandParameter="{Binding ElementName=UrlBox, Path=Text}"/>
And at the VM, i have a method
public void SetTeamList(string Url)
{
//Some things here
}
The solution is WinForms app, so i set DataContext like this:
var view = new dTeamMapperForm();
view.DataContext = new TeamMappingVM();
elementHost1.Child = view;
Nothing happens when i click the button, no error or something. I put break point to SetTeamList method and it's not executing on button click.
Edit: I have changed the whole VM, now it looks like:
class TeamMappingVM : INotifyPropertyChanged
{
public ObservableCollection<Team> TeamList { get; set; }
public ICommand SetTeamsCommand { get; internal set; }
private string _url;
public string Url
{
get { return _url; }
set
{
_url = value;
NotifyPropertyChanged("Url");
}
}
public void SetTeamList()
{
var mapper = new TeamMapper();
TeamList = new ObservableCollection<Team>(mapper.MapTeams(Url));
}
public bool CanParseTeams()
{
return !string.IsNullOrEmpty(Url);
}
public TeamMappingVM()
{
SetTeamsCommand = new RelayCommand(SetTeamList, CanParseTeams);
}
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(String info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
}
The Command-Property of a Button expects you to Bind to an Property of type ICommand.
In your Case you tried to Bind to a method, which does not work.
Since you edited you post i will just post this as the answer:
XAML:
<Button Content="Gönder" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="932,23,0,0" Height="25" Command="{Binding Path=SetTeamsCommand }" CommandParameter="{Binding ElementName=UrlBox, Path=Text}"/>
class TeamMappingVM : INotifyPropertyChanged
{
public ObservableCollection<Team> TeamList { get; set; }
public ICommand SetTeamsCommand { get; internal set; }
private string _url;
public string Url
{
get { return _url; }
set
{
_url = value;
NotifyPropertyChanged("Url");
}
}
public void SetTeamList()
{
var mapper = new TeamMapper();
TeamList = new ObservableCollection<Team>(mapper.MapTeams(Url));
}
public bool CanParseTeams()
{
return !string.IsNullOrEmpty(Url);
}
public TeamMappingVM()
{
SetTeamsCommand = new RelayCommand(SetTeamList, CanParseTeams);
}
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(String info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
}
As a minor side note. Which was not asked. Since you are probably Using Databinding for your URL Textbox you don't need to pass it into the method via CommandParameter, Since the URL Property of your ViewMOdel represents this textbox. You want to try to seperate the view from the logic. This is a very small issue and might not have any effect, but it sort of is a bad habit to fall into.
As Xeun pointed out, a Command is not a method but an object implementing the ICommand interface. A Command implementation look like this:
class MyCommand: ICommand
{
public bool CanExecute(object parameter)
{
return true; // if your command is "enabled" otherwhise return false
}
public void Execute(object parameter)
{
// do something usefull
}
}
In this sample you should add an instance of MyCommand to your ViewModel an
bind to it.
Please notice usually you dont code commands this way.
A command usually interact with your ViewModel (ie it invokes Model methods) and inside MyCommand you have not references to the ViewModel hosting it.
(You could create a Command which hold a reference to its ViewModel, but...) Usually inside a ViewModel you use a Relay command or a Delegate command (which are basically the same thing).
I have a problem with listView initializations. The .xaml part of the listView is as below,
<ListView x:Name="categoryListView" HorizontalAlignment="Left" Width="129" Height="180"
ItemsSource="{Binding Path=RecordModel.CategoryList}"
DisplayMemberPath="RecordModel.CategoryList"
SelectedValue="{Binding Path=RecordModel.RecordTitle}"
VerticalAlignment="Top">
I have a list of String paths in RecordModel.CategoryList but I need to change the list at window initialization. Part of the view-model is below. Where can I add the code to change the list so the listView gets the changed list items at start?
public class MainWindowViewModel : ViewModelBase
{
...
private RecordModel _recordModel;
private ICommand _addCategoryCommand;
...
public MainWindowViewModel()
{
_recordModel = new RecordModel();
}
public RecordModel RecordModel
{
get { return _recordModel; }
set { _recordModel = value; }
}
...
public ICommand AddCategoryCommand
{
get
{
if (_addCategoryCommand == null)
_addCategoryCommand = new AddCat ();
return _addCategoryCommand;
}
}
public class AddCat : ICommand
{
public bool CanExecute(object parameter) { return true; }
public event EventHandler CanExecuteChanged;
public void Execute(object parameter)
{
MainWindowViewModel mainWindowViewModel = (MainWindowViewModel)parameter;
...
//Do things with mainWindowViewModel and the variables it has
}
...
This is the reason that ViewModels exist: so that they can transparently convert values from the Model to values more appropriate for binding.
You should expose a CategoryList property on the MainWindowViewModel and bind directly on that. You can then populate it by processing the values of RecordModel.CategoryList in the RecordModel property setter:
public class MainWindowViewModel : ViewModelBase
{
private RecordModel _recordModel;
public MainWindowViewModel()
{
RecordModel = new RecordModel(); // set the property not the field
}
public RecordModel RecordModel
{
get { return _recordModel; }
set {
_recordModel = value;
// populate CategoryList here from value.CategoryList
}
}
public UnknownType CategoryList { get; }
}
I am having an issue getting my model changes updated back into my viewmodel so i can display. In this example i have a label and a button, when i press the button it will execute some business logic, and should update the label on screen. However, when my model changes the view will not. Any Idea on what i am doing wrong here?
View-
<Window.DataContext>
<vm:ViewModel>
</Window.DataContext>
<Grid>
<Label Content="{Binding Path=Name}"/>
<Button Command={Binding UpdateBtnPressed}/>
</Grid>
ViewModel
public ViewModel()
{
_Model = new Model();
}
public string Name
{
get{return _Model.Name;}
set
{
_Model.Name = value;
OnPropertyChanged("Name");
}
}
public ICommand UpdateBtnPressed
{
get{
_UpdateBtn = new RelayCommand(param => UpdateLabelValue());
return _UpdateBtn;
}
private void UpdateLabelValue()
{
_Model.Name = "Value Updated";
}
Model
private string name = "unmodified string";
public string Name
{
get{return name;}
set{name = value;}
}
Try this:
private void UpdateLabelValue()
{
Name = "Value Updated";
}
It seems you've missed to implement the INotifyPropertyChanged interface.
Your model must implement INotifyPropertyChanged such as;
public class Personel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string _name;
public string Name
{
get { return _name; }
set { _name = value; OnChanged("Name");}
}
void OnChanged(string pn)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(pn));
}
}
}