I'm inexperienced, especially at MVVM, but trying to use ReactiveUI, and I'm not understanding the examples that I'm finding that demonstrate ReactiveCommand. I have used ICommand / DelegateCommand one time before, but this is different, and I'm not getting it.
What I'm trying to do is really simple. Click a button in the view, and have that execute a method in the view model. The examples that I'm finding all involve IObservable<>, and I don't get that, as they don't explanations that are geared to the total noob that I am.
Basically, I'm trying to use this as a learning experience, and what I'd ideally like to do is bind the button's Command property in xaml to a command (however that works, I don't know), which causes a method to execute. No collections, I'd just be passing a single int variable.
Thanks for the help. I really appreciate it.
Edit - Below appears code using Paul Betts' suggestions:
C#
public ReactiveCommand AddToDailyUsed { get; protected set; }
public MainPageVM()
{
Initialize();
AddToDailyUsed = new ReactiveCommand();
AddToDailyUsed.Subscribe(AddToTodayUsedAction => this.AddToDailyUsedExecuted());
}
private object AddToDailyUsedExecuted()
{
MessageBox.Show("AddToDailyUsedAction");
return null;
}
private void AddToDailyUsedAction(object obj)
{
MessageBox.Show("AddToDailyUsedAction");
}
XAML
<Button Content="{Binding Strings.add, Source={StaticResource LocalStrings}}"
Command="{Binding AddToTodayUsed}"
Margin="-5,-10, -10,-10"
Grid.Row="3"
Grid.Column="2" />
Obviously I'm missing something. I inserted break points at the AddToDailyUsedExecuted and AddToDailyUsedAction methods, and they are never reached.
Edit Constructor for code behind the view:
MainPageVM mainPageVM = new MainPageVM();
public MainPage()
{
InitializeComponent();
Speech.Initialize();
DataContext = mainPageVM;
ApplicationBar = new ApplicationBar();
TaskRegistration.RegisterScheduledTask();
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
//Shows the rate reminder message, according to the settings of the RateReminder.
(App.Current as App).rateReminder.Notify();
}
So, ReactiveCommand is itself an IObservable<object> - in this case, you can conceptualize IObservable as an Event - this Event fires when the command is invoked (i.e. when the button is pressed). So, in your constructor, you might write:
MyCommand = new ReactiveCommand();
MyCommand.Subscribe(param => this.MyCommandHasExecuted());
However, what's neat about IObservable that isn't true about regular events, is that you can use LINQ on them:
// Now, MyCommandHasExecuted only gets run when the UserName isn't null
MyCommand.Where(param => this.UserName != null)
.Subscribe(param => this.MyCommandHasExecuted());
Update: Your Xaml binds to AddToTodayUsed but your ViewModel command is called AddToDailyUsed. Could that be it?
Related
For a long time i´ve been trying to understand the correct way of dealing with bing Maps in n MVVM scenario.
I might create a map in my XAML-view like this:
<map:Map x:Name="MyMap"
Credentials="MySuperSecretCredentials"/>
I the code behind file I can easily interact with map for eaxmple like this:
private async void FindMe_Clicked()
{
_cts = new CancellationTokenSource();
CancellationToken token = _cts.Token;
// Get the location.
Geoposition pos = await _geolocator.GetGeopositionAsync().AsTask(token);
MyMap.SetView(new BasicGeoposition() { Latitude = pos.Coordinate.Latitude, Longitude = pos.Coordinate.Longitude }, 15);
}
Simply by referencing the MyMap we can do whatever we like with it in the code behind.
But how can I execute the same command my viewModel?
I guess I should start with replacing the FindMe_Clicked with a command calling a method on my viewModel? And have that method execute a method similar to the one in the code-behind. But How do I acess MyMap in the viewModel?
Maybe my VM looks like this:
public class MainViewModel
{
public RelayCommand GetLocation { get; private set; }
public MainViewModel()
{
this.GetLocation = new RelayCommand(this.FindMe());
}
public void FindMe()
{
_cts = new CancellationTokenSource();
CancellationToken token = _cts.Token;
// Get the location.
Geoposition pos = await _geolocator.GetGeopositionAsync().AsTask(token);
MyMap.SetView(new BasicGeoposition() { Latitude = pos.Coordinate.Latitude, Longitude = pos.Coordinate.Longitude }, 15);
}
}
If im not thinking about this problem all wrong what I need to do Is to pass the same instance of MyMap that exists in the view to my viewmodel somehow?
Help with this is appreciated, I would also love to see any examples of how to use bibg maps i portable class libraries or i an Mvvm-pattern if anyone has come across it somewhere. Thanks!
When following the MVVM pattern, you should never try to access elements of the View layer (e.g. the maps control) from within the Viewmodel. Instead, you'd (theoretically) create two public properties CenterLatitude and CenterLongitude and bind them to the maps control directly within XAML code:
<Map Credentials="MySuperSecretCredentials" ZoomLevel="15">
<Map.Center>
<Location Latitude="{Binding CenterLatitude}" Longitude="{Binding CenterLongitude}"/>
</Map.Center>
</Map>
It's ok to have a method FindMe within your Viewmodel, but instead of accessing the MyMapcontrol and calling SetView(...) from within there, you'd just update the two properties CenterLatitude and CenterLongitude and make sure that the PropertyChanged event is raised in order to inform the View about the changed data and to update itself.
BUT: Unfortunately, the bing map control's Center attribute does not support Data Binding - it seems that Microsoft turned this feature off intentionally for performance reasons. If you still want to keep the MVVM pattern, check out this article I've written some time ago that explains how to circumvent this restiction.
(In my experience, this workaround works quite well and does not affect performance. Just make sure that you don't update the Center property too often, meaning several times per second...)
I'm trying to implement Unity in a WPF MVVM application, but I'm missing the big picture.
At this moment I have created a bootstrapper like this:
public class MainBootstrapper : Bootstrapper<MainViewModel>
{
private UnityContainer container;
protected override void Configure()
{
container = new UnityContainer();
container.RegisterType<IServiceLocator, UnityServiceLocator>(new ContainerControlledLifetimeManager());
container.RegisterType<IWindowManager, WindowManager>(new ContainerControlledLifetimeManager());
container.RegisterType<IEventAggregator, EventAggregator>(new ContainerControlledLifetimeManager());
}
protected override object GetInstance(Type service, string key)
{
if (service != null)
{
return container.Resolve(service);
}
if (!string.IsNullOrWhiteSpace(key))
{
return container.Resolve(Type.GetType(key));
}
return null;
}
protected override IEnumerable<object> GetAllInstances(Type service)
{
return container.ResolveAll(service);
}
protected override void BuildUp(object instance)
{
container.BuildUp(instance);
}
}
How what is the best way to use this?
This code currently works:
public class MainViewModel : PropertyChangedBase
{
public MainViewModel()
{ }
[Dependency]
public Sub1ViewModel Sub1VM { get; set; }
[Dependency]
public Sub2ViewModel Sub2VM { get; set; }
}
the MainView has this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl Grid.Row="0" Name="Sub1VM" />
<ContentControl Grid.Row="1" Name="Sub2VM" />
</Grid>
First of all: the code that I shared, is this the correct way of using Unity + Caliburn?
Now let's say that my Sub1VM uses a model 'M1', but Sub2VM needs to use the same model to display information but not by making another instance of model M1. (singleton)
How does this work now? Show I use a IServiceLocator in each viewmodel constructor? Could somebody share a code sample to explain it?
First of all i agree with McDonnellDean that you should read the article about the Screens, Conductors and Composition (if i were you i would read all the articles before that too to understand how Caliburn.Micro works.). Besides that, you implemented Unity correctly and you can check Unity as IoC Container for Caliburn.Micro for more information. On the other side you are mixing two concepts here, namely Dependency Injection and MVVM. Regarding your question about the model, i would also prefer constructor injection, and if you want a single instance of the model, perhaps you can inject a Factory that creates that model for you and wrap it into two different view models and expose it through the two different properties. At last i really encourage you to read the tutorials (start here), at least the basic topics.
I don't know Unity in particular but your configuration looks correct.
As for your injection points. I would say that rather than doing property injection you should do constructor injection. What you are doing is fine, however you may want to look up screens and conductors, these allow you to add life-cycle to your ViewModels. Typically it would look like this:
Bootstrapper opens ShellViewModel
ShellViewModel takes in MainViewModel via Ctor injection as an IConductorOneActive
MainViewModel takes a collection of IScreens.
ShellViewModel calls MainViewModels activate method on MainViewModel.
See Screens, Conductors and Composition. As I stated above, your way is fine but it is a little on the manual side and means you have to wire everything by hand.
My application uses the MVVM pattern. My TextBox is bound to a property of my ViewModel (type string).
When ever the content of the TextBox changed via the user typing, I want to perform some validation.
So, currently, my code is
<TextBox Text="{Binding XmlContentAsString, UpdateSourceTrigger=PropertyChanged}" />
and my ViewModel has this property and field:
private string _xmlContentAsString;
public string XmlContentAsString
{
get { return _xmlContentAsString; }
set
{
if (_xmlContentAsString == value)
return;
_xmlContentAsString = value;
PerformValidiationLogic(value);//This is where I am unsure
}
}
Now, this works but, and I don't know why, I don't like this! It some how feels 'hacked' to include the method in the property.
Can some one please tell me if this is the correct approach when using the MVVM pattern?
There's different type of validations.
For simplistic validating string lengths or allowed characters etc you can use DataAnnotations and put the validation in attributes on your properties. You'll need to include
using System.ComponentModel.DataAnnotations;
then for example to keep string to 9 characters:
[StringLength(9)]
public string StringValue
{
get
{
return stringValue;
}
set
{
this.stringValue = value;
}
}
Then there is validation that is a bit more complex and is effectively enforcing your business logic.
There seem to be many views on how to do this. Ideally it should belong on the model, so that the validation can be reused, but obviously called via the viewmodel.
Personally I will put method calls in the property setters occasionally, to me thats the whole reason for having the ability to create setters and getters - otherwise there's very little point in having anything other than auto properties.
But if it's complex or asynchronous then you can hit issues.
I'd be very careful doing it with UpdateSourceTrigger=PropertyChanged, as that means you'll be firing it every character.
In your example, you perform validation logic on the value, but what would be the result of the validation if it fails? Typically you would want to notify the user of a validation failure. If that is the case, then I suggest IDataErrorInfo (examples can be found here:
http://codeblitz.wordpress.com/2009/05/08/wpf-validation-made-easy-with-idataerrorinfo/).
If you plan on overriding the value without notifying the user, then validating in the setter is acceptable (though still not a fan for more personal reasons).
In my opinion thats the correct approach. I would write a base class for your ViewModel that contains a method that sets the property, call PropertyChanged and validate if some validation rule is attached to that property.
For example:
public abstract class ValidableViewModel
{
private List<ValidationRule> _validationRules;
public ValidableViewModel()
{
_validationRules = new List<ValidationRule>();
}
protected virtual void SetValue<T, T2>(Expression<Func<T>> expression,
ref T2 backend, T2 value)
{
if (EqualityComparer<T2>.Default.Equals(backend, value))
return;
backend = value;
OnPropertyChanged(expression);
Validate(expression.Name, value);
}
protected void Validate(string propertyName, object value)
{
foreach(var validationRule in _validationRules)
{
if(validationRule.PropertyName == propertyName)
validationRule.Execute(value);
}
}
}
The code is not complete, there is missing a lot. But it could be a start ;-)
I personally don't advise putting so much logic in your property. I would use a command bound to an event, ie the lostfocus event of the textbox, and perform your validation there.
I would use something like this:
<TextBox Text="{Binding XmlContentAsString, UpdateSourceTrigger=PropertyChanged}">
<interactivity:Interaction.Triggers>
<interactivity:EventTrigger EventName="LostFocus">
<interactivity:InvokeCommandAction Command="{Binding LostFocusCommand, Mode=OneWay}"/>
</interactivity:EventTrigger>
</interactivity:Interaction.Triggers>
</TextBox>
then have a command in your view model that is LostFocusCommand wiht your validation logic.
I use mvvm-light and can give a more detailed example for that. (you will need to include the blend interactivity declaration at the top of your xaml)
Hi all I'm trying to get to grips with using MVVM, but I'm having a hard time :(, firstly for my question, I'm using the code provide in this MVVM article as a template for my learning.
My question is simple how do expose independent commands, in this case he has create a list of hyperlinks, but how do i create a single button that's fixed and does the same as the 'create new customer' link.
I created something like this(was added to the MainWindowViewModel.cs):
public CommandViewModel exposedCommand
{
get
{
return new CommandViewModel(
Strings.MainWindowViewModel_Command_CreateNewCustomer,
new RelayCommand(param => this.CreateNewCustomer())
);
}
}
and then in the xaml document i created a new button, this was added to the MainWindow.xaml
<Button
Content="Button"
Height="23"
HorizontalAlignment="Left"
Margin="6,303,0,0" Name="button1" VerticalAlignment="Top" Width="150"
Command="{Binding Path=exposedCommand}"
/>
I am not to sure if I'm missing something, or what I am where going wrong,
Soz if I sounding a bit naive I have only just started using MVVM and routed commands and so.
Oh another thing it does load the link it just doesn't create the tab, in other words if you would to add
Console.Writeline("HERE");
to the exposedCommand method
It would print out 'HERE' it just won't do anything when you click the button.
Thanks Any Help would be so appreciated.
Your XAML code is correct.
I also started off with Josh Smith's MVVM article.
Below is a stripped down example of how I implement Commands in my ViewModels:
public class ProjectViewModel : ViewModelBase
{
// Private variable for holding save command
private RelayCommand _saveCommand;
// Other fields here
// Constructors and properties and stuff here
// Command Property for Save button. Bind XAML to "SaveCommand"
public ICommand SaveCommand
{
get
{
if (_saveCommand == null) // Init command on first get
_saveCommand = new RelayCommand(param => this.SaveChanges(), param => this.CanSave);
return _saveCommand;
}
}
/// <summary>
/// Method called when save command is executed
/// </summary>
private void SaveChanges()
{
// Save logic here...
}
/// <summary>
/// Predicate for determining if SaveCommand is enabled
/// </summary>
private bool CanSave
{
get
{
return true; // Replace with SaveCommand predicate logic
}
}
}
If it still does not work, check you runtime output for BindingErrors. If there is a BindingError that implies that the View cannot find the SaveCommand, then your ViewModel is not correctly set to be the DataContext of the View. Let me know in the comments if this is the problem.
You can bind command to only those objects that has an implementation of ICommand interface.
In your example you are binding with view model object.
Instead of this create a property in view model that is a type of RelayCommand and bind this with button.
It should work.
The first thing that concerns me is your the code inside the getter of you property. You're returning a new object EVERY TIME the exposedCommand is accessed. That's not really recommended, you should store that in a backing property like so:
CommandViewModel _exposedCommand;
public CommandViewModel exposedCommand
{
get
{
if (_exposedCommand == null)
{
_exposedCommand = new CommandViewModel(
Strings.MainWindowViewModel_Command_CreateNewCustomer,
new RelayCommand(param => this.CreateNewCustomer()));
}
return _exposedCommand;
}
}
That being said the typical way to present your desired ICommand property is something like this:
RelayCommand _exposedCommand;
public ICommand exposedCommand
{
get
{
if (_exposedCommand == null)
_exposedCommand= new RelayCommand(param => this.CreateNewCustomer());
return _exposedCommand;
}
}
This seems like a dumb question but I have looked through the docs for prism and searched the internet and can't find an example... Here is the deal.
I am using a DelegateCommand in Prism, it is working fine except when I assign a delegate to the can execute to the CanExecute method. in another view model I have a event that takes a bool that I am publishing too and I can see that the event is firing and that the bool is getting passed to my view model with the command in it no problem but this is what I don't understand... How does can execute know that the state has changed? Here is some code for the example.
from the view models ctor
eventAggregator.GetEvent<NavigationEnabledEvent>().Subscribe(OnNavigationEnabledChange, ThreadOption.UIThread);
NavigateCommand = new DelegateCommand(OnNavigate, () => nextButtonEnabled);
Now - here is the OnNavigationEnableChange event.
private void OnNavigationEnabledChange(bool navigationState)
{
nextButtonEnabled = navigationState;
}
enter code here
Like - I am totally missing something here - how does the command know that nextButtonEnabled is no true?
If someone could point me to a working example that would be awesome.
OK - thanks!
This is why I don't use the implementation of DelegateCommand in Prism. I've always hated the callback-based approach for enabling/disabling commands. It's entirely unnecessary, and as far as I can tell, its only (and rather doubtful) 'benefit' is that it's consistent with how execution itself is handled. But that has always seemed pointless to me because execution and enabling/disabling are clearly very different: a button knows when it wants to execute a command but doesn't know when the command's status might have changed.
So I always end up writing something like this:
public class RelayCommand : ICommand
{
private bool _isEnabled;
private Action _onExecute;
public RelayCommand(Action executeHandler)
{
_isEnabled = true;
_onExecute = executeHandler;
}
public bool IsEnabled
{
get { return _isEnabled; }
set
{
_isEnabled = value;
if (CanExecuteChanged != null)
{
CanExecuteChanged(this, EventArgs.Empty);
}
}
}
public bool CanExecute(object parameter)
{
return _isEnabled;
}
public event EventHandler CanExecuteChanged;
public void Execute(object parameter)
{
_onExecute();
}
}
(If necessary you could modify this to use weak references to execute change event handlers, like Prism does.)
But to answer your question: how is the callback approach even meant to work? Prism's DelegateCommand offers a RaiseCanExecuteChanged method you can invoke to ask it to raise the event that'll cause command invokers to query your command's CanExecute. Given that you have to tell the DelegateCommand any time your enabled status changes, I don't see any meaningful benefit of a callback-based approach. (Sometimes you see a broadcast model though - arranging so that any change in status anywhere notifies all command invokers! In that case, a callback is useful because it means it doesn't matter if you don't know what actually changed. But requerying every single command seems unpleasant to me.)
Answering your question how does the command know that it is now enabled:
NavigateCommand = new DelegateCommand(OnNavigate, () => nextButtonEnabled);
This overload of the DelegateCommand constructor takes 2 parameters:
The first is the command action and the second is the CanExecute delegate that returns bool.
in your example your CanExecute action always returns nextButtonEnabled
eventAggregator.GetEvent<NavigationEnabledEvent>().Subscribe(OnNavigationEnabledChange, ThreadOption.UIThread);
triggers OnNavigationEnabledChange that changes nextButtonEnabled
this is how it works...