There is something under the hood that I don't understand with ObservesCanExecute on DelegateCommand in prism.
It has something to see with AutoProperties ... I think
I have a View with a button which is bound to a DelegateCommand in my viewmodel.
For some reasons, in my view, I catch the the CanExecuteChanged event like this :
MyButton.Command.CanExecuteChanged += Command_CanExecuteChanged;
The question is, in my viewmodel, when I use autoproperties to declare IsEnabled, the event in the view is not fired. It is like if ObservesCanExecute doesn't work anymore. Is it normal ? Is there something I'm doing wrong ? I thought that AutoProperties and Properties were exactly the same ...
Here is my ViewModel :
public class MainPageViewModel : ViewModelBase
{
// VERSION 1 - It Works
private bool _isEnabled = true;
public bool IsEnabled
{
get { return _isEnabled; }
set { SetProperty(ref _isEnabled, value); }
}
// VERSION 2 - Don't works
// public bool IsEnabled {get; set; } = true;
public DelegateCommand MyCommand { get; set; } = null;
public MainPageViewModel(INavigationService navigationService)
: base(navigationService)
{
Title = "Main Page";
MyCommand = new DelegateCommand(Execute).ObservesCanExecute(() => IsEnabled);
}
private void Execute()
{
IsEnabled = !IsEnabled;
}
}
ObservesCanExecuteChanged relies on INotifyPropertyChanged of the class containing the observed property.
This raises the event in case of a change and thus works
private bool _isEnabled = true;
public bool IsEnabled
{
get { return _isEnabled; }
set { SetProperty(ref _isEnabled, value); }
}
while this raises no event and does not work, as you observed:
public bool IsEnabled { get; set; }
I thought that AutoProperties and Properties were exactly the same
That's just plain wrong. An "AutoProperty" is a "Property", but that's it concerning the similarities. They may look alike from the outside of a class, but a property can just do anything, while an auto property is just a overly complicated field.
Related
I have a new Xamarin Forms 5 app and I'm having trouble with data binding.
First, I display a message that tells the user how many items are in his list. Initially, this is 0. It's displayed by DisplayMessage property of the view model.
Then, the Init() method gets called and once the API call is finished, there are some items in MyList. I put break points to make sure that the API call works and I end up with some data in MyList property.
Because I change the value of message in my Init() method, I was expecting the message to change and display the number of items in the list but it's not changing even though I have some items in MyList.
I created a new ViewModel that looks like this:
public class MyViewModel : BaseViewModel
{
public List<MyItem> MyList { get; set; } = new List<MyItem>();
string message = "You have no items in your list... ";
public string DisplayMessage
{
get => message;
set
{
if(message == value)
return;
message = value;
OnPropertyChanged();
}
}
public async void Init()
{
var data = await _myService.GetData();
if(data.Count > 0)
message = $"You have {data.Count} items in your list!";
MyList = data;
}
}
My MainPage code behind looks like this:
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MainPage : ContentPage
{
MyViewModel _vm;
MainPage()
{
InitializeComponent();
_vm = new MyViewModel();
this.BindingContext = _vm;
}
protected override void OnAppearing()
{
base.OnAppearing();
_vm.Init();
}
}
I didn't change anyting in the base view model, except I added my service and it looks like this:
public class BaseViewModel : INotifyPropertyChanged
{
public IMyApiService MyApi => DependencyService.Get<IMyApiService>();
bool isBusy = false;
public bool IsBusy
{
get { return isBusy; }
set { SetProperty(ref isBusy, value); }
}
string title = string.Empty;
public string Title
{
get { return title; }
set { SetProperty(ref title, value); }
}
protected bool SetProperty<T>(ref T backingStore, T value,
[CallerMemberName] string propertyName = "",
Action onChanged = null)
{
if (EqualityComparer<T>.Default.Equals(backingStore, value))
return false;
backingStore = value;
onChanged?.Invoke();
OnPropertyChanged(propertyName);
return true;
}
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
var changed = PropertyChanged;
if (changed == null)
return;
changed.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
}
I'd appreciatae someone telling me where my mistake is. Thanks.
Without seeing the Xaml, I can't 100% answer, but here are a couple of things I see:
You are setting the "message" through the field, not the property. Since you are setting the field directly the OnPropertyChanged event isn't firing so the UI isn't getting notified that the value has changed.
I am guessing you are binding "MyList" to some sort of CollectionView or something? If it's a readonly view, using a List is ok as the collection is never updated. However, if you plan on adding or removing items at runtime, it needs to be an "ObservableCollection" for the same reason as above, the UI isn't notified of new items in a List, but an ObservableCollection will notify the UI of changes to it, so it can update.
Is what Jason mentions above in his comment. The MyList property should be setup like the other properties with the OnPropertyChanged.
I'm changing the label in the class constructor and it works fine, the label is updated ("0"). I'm also trying to update the label when I click in a button, but it's not working ("X"). I noticed debugging that the label value is updated, PropertyChanged is triggered, but the view doesn't change.
public class HomeViewModel : ViewModelBase
{
string playerA;
public string PlayerA
{
get
{
return playerA;
}
set
{
playerA = value;
this.Notify("playerA");
}
}
public ICommand PlayerA_Plus_Command
{
get;
set;
}
public HomeViewModel()
{
this.PlayerA_Plus_Command = new Command(this.PlayerA_Plus);
this.PlayerA = "0";
}
public void PlayerA_Plus()
{
this.PlayerA = "X";
}
}
public abstract class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void Notify(string propertyName)
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
The name of the parameter passed in your PropertyChangedEventArgs is wrong. You are using "playerA" but the name of the (public) property is "PlayerA" (uppercase "P"). Change this.Notify("playerA"); to this.Notify("PlayerA"); or even better:
Notify(nameof(PlayerA));
You can completely get rid of passing the name of the param by adding a [CallerMemberName] attribute to the Notify() method.
protected void Notify([CallerMemberName] string propertyName = null)
This allows you to just call Notify() without parameters and the name of the changed property will automatically be used.
I am new into MVVMCross(Xamarin.iOS). So, I could be in wrong direction. If somebody can point me in right direction or point out what I am doing wrong.
I have already taken a look over "CustomerManagement" and "Collection" sample of MVVMCross.
Basically I am trying to create Settings screen.
I have one custom UITableViewCell with one text field. See my code below. "EntryTF" is IBOutleted. "EntryTF" is binded with "FirstName" property of Model. Setting value to "FirstName" is reflecting on UI. But if user enter something to textfield doesn't save to model. In short cell is not updating viewmodel/model.
Please note that I want to keep binding out of cell class. So, I can reuse this cell for other models or fields.
public partial class PlainEntryCell : UITableViewCell
{
public static readonly UINib Nib = UINib.FromName ("PlainEntryCell", NSBundle.MainBundle);
public static readonly NSString Key = new NSString ("PlainEntryCell");
public PlainEntryCell (IntPtr handle) : base (handle)
{
// this.DelayBind (() => {
// this.AddBindings(new Dictionary<object,string> ())
// });
}
public static PlainEntryCell Create ()
{
return (PlainEntryCell)Nib.Instantiate (null, null) [0];
}
public string CaptionText {
get {
return EntryTF.Text;
}
set {
EntryTF.Text = value;
}
}
}
My View Model:
public class RegisterViewModel: MvxViewModel
{
private RegisterModel _registerModel;
public RegisterViewModel ()
{
_registerModel = new RegisterModel ();
_registerModel.FirstName = "Test";
}
public RegisterModel Customer {
get { return _registerModel; }
set {
_registerModel = value;
RaisePropertyChanged ("Customer");
}
}
}
Model:
public class RegisterModel:MvxNotifyPropertyChanged
{
private string _firstName;
public string FirstName {
get { return _firstName; }
set {
_firstName = value;
RaisePropertyChanged ("FirstName");
}
}
public string LastName { get; set; }
public string PhoneNum { get; set; }
public string Email { get; set; }
public string Pin { get; set; }
}
TableView Source:
public class RegisterTableViewSource: MvxTableViewSource
{
RegisterView _registerView;
public RegisterTableViewSource (UITableView tableView, RegisterView registerView)
: base (tableView)
{
_registerView = registerView;
tableView.RegisterNibForCellReuse (PlainEntryCell.Nib,
PlainEntryCell.Key);
//tableView.RegisterNibForCellReuse (UINib.FromName ("DogCell", NSBundle.MainBundle), DogCellIdentifier);
}
protected override UITableViewCell GetOrCreateCellFor (UITableView tableView, Foundation.NSIndexPath indexPath, object item)
{
var cell = TableView.DequeueReusableCell (PlainEntryCell.Key, indexPath);
cell.Bind (_registerView, "CaptionText Customer.FirstName");
return cell;
//return (UITableViewCell)TableView.DequeueReusableCell (PlainEntryCell.Key, indexPath);
}
public override nint RowsInSection (UITableView tableview, nint section)
{
return 2;
}
}
Update:
Still not able to get the answer.
In above code I want to bind "EntryTF" with property of model. But I want to keep binding outside class. So, CaptionText property is not necessary if someone can point out direct way of binding to "EntryTF"
Is not there a way of creating BindableProperty just like Xamarin Forms? I feel MVVMCross is matured framework so, why there is not a solution of this kind of simple things.
I would also love to here if there is any simple/other way of achieving the same things.
I have also looked MTD but didn't find much useful for custom cell and it is also need good amount of my learning.
Basically I am trying to create Settings screen.
Take a look at using monotouch dialog, mt.d, with MvvmCross, Use Mvvmcross Binding with MonoTouch.Dialog (Lists and Commands)
That StackOverflow question/answer will get you started using mt.d with mvvmcross. I use it for basic settings screens in my applications.
Cell Isn't Updating
I wrote an article on using custom cells with MvvmCross, see
http://benjaminhysell.com/archive/2014/04/mvvmcross-custom-mvxtableviewcell-without-a-nib-file/
I have found it easier not to use nib files and fully describe my UI in code.
It looks like in your public partial class PlainEntryCell : UITableViewCell you don't ever bind the cell to the ViewModel. You have that commented out. I would try something like, while adding http://slodge.blogspot.com/2013/07/playing-with-constraints.html to your application for layout:
public PlainEntryCell()
{
CreateLayout();
InitializeBindings();
}
UILabel captionText;
private void CreateLayout()
{
SelectionStyle = UITableViewCellSelectionStyle.None;
Accessory = UITableViewCellAccessory.DisclosureIndicator;
captionText = new UILabel();
ContentView.AddSubviews(captionText);
ContentView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
const int vPadding = 10;
const int hPadding = 20;
ContentView.AddConstraints(
captionText.AtTopOf(ContentView).Plus(vPadding),
captionText.AtLeftOf(ContentView).Plus(hPadding),
captionText.Width().EqualTo(UIScreen.MainScreen.Bounds.Width / 2)
);
private void InitializeBindings()
{
this.DelayBind(() =>
{
var set = this.CreateBindingSet<PlainEntryCell, RegisterViewModel();
set.Bind(captionText).To(vm => vm.CaptionText);
set.Apply();
});
}
}
Your custom cell needs to implement INotifyPropertyChanged to allow the ViewModel to be notified of a value change in your cell properties.
public partial class PlainEntryCell : UITableViewCell, INotifyPropertyChanged
{
public static readonly UINib Nib = UINib.FromName ("PlainEntryCell", NSBundle.MainBundle);
public static readonly NSString Key = new NSString ("PlainEntryCell");
public PlainEntryCell (IntPtr handle) : base (handle)
{
// this.DelayBind (() => {
// this.AddBindings(new Dictionary<object,string> ())
// });
}
public static PlainEntryCell Create ()
{
return (PlainEntryCell)Nib.Instantiate (null, null) [0];
}
public string CaptionText {
get {
return EntryTF.Text;
}
set {
EntryTF.Text = value;
RaisePropertyChanged("CaptionText");
}
}
#region INotifyPropertyChanged implementation
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void RaisePropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
handler(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
}
I am using MVVM in one of the app. I have created different project for Model, View and View Model.
I need to navigate to another XAML from ViewModel. I found some solution using MVVM light. Is there any way of implementing navigation from view model without using MVVM light.
Simple as that,
IF you want to navigate from page1 to page2,
private void MoveToPage2FromPage1()
{
NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));
}
How to perform page navigation on Windows Phone 8
You can store current page url on a notify property of Shared ViewModel in App. After that, it is easy to catch the change of this url and navigate to the correct url by observing it.
public class AppViewModel : INotifyPropertyChanged
{
public string CurrentPageURL { get; set; }
private string _currentPageURL;
public string CurrentPageURL
{
get { return _currentPageURL;}
set
{
if (_currentPageURL==value)
return; // to prevent reload the same page.
_currentPageURL = value;
NotifyPropertyChangedCurrentPageURL
}
}
// INotifyPropertyChanged implementations
public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged(String info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
}
// Store in static singleton instance of AppViewModel
public class App : Application
{
private static Lazy<AppViewModel> _ViewModel=new Lazy<ViewModel>();
public static AppViewModel ViewModel { get { return _ViewModel.Value; } }
....
public App()
{
AppViewModel.PropertyChanged=(s,a) =>
{
if (a.PropertyName=="CurrentPageURL")
{
NavigationService.Navigate(new Uri(AppViewModel.CurrentPageURL, UriKind.Relative));
};
}
}
}
// Usage sample
public class Page1ViewModel
{
private btnMoveNextPage_Click(object s, EventHandler a) {
App.ViewModel.CurrentURL="~/Page2.xaml";
}
}
In Prism Silverlight5, I have a shell which is divided into two vertical regions(leftRegion,rightRegion) & there are 2 views in Module1 i.e. (View1,View2). In leftRegion I have a View1 loaded which has a button. I want to dynamically load View2 on rightRegion using ViewModel & MEF.ViewModel code is :
[Export(typeof(LeftViewViewModel))]
public class LeftViewViewModel:ViewModelBase,IViewModel
{
[Import]
public IRegionManager CullingRegion { get; set; }
[ImportingConstructor]
public LeftViewViewModel(LeftView view)
:base(view)
{
LoadCommand = new DelegateCommand(LoadControl,CanLoadControl);
}
private void LoadControl()
{
CullingRegion.RegisterViewWithRegion("RightRegion", typeof(RightView));
}
protected bool CanLoadControl()
{
return true;
}
public DelegateCommand LoadCommand { get; set; }
}
LeftView.xaml.cs is :
[Import]
public ViewModels.IViewModel ViewModel
{
get { return (IViewModel) DataContext; }
set { DataContext = value; }
}
IModule implementation is :
[ModuleExport(typeof(CullingModuleModule1))]
public class CullingModuleModule1:IModule
{
[Import]
public IRegionManager CullingRegion { get; set; }
public void Initialize()
{
CullingRegion.RegisterViewWithRegion("ShellContentRegion", typeof (Container));
CullingRegion.RegisterViewWithRegion("LeftRegion", typeof(LeftView));
}
}
First of,I think your ViewModel should not be referenced by a View.
You may need to review View Injection with MEF.
As I've seen in multiple posts :
[Export]
public class YourViewClassName : UserControl
{
public YourViewClassName()
{
}
[Import]
public ILeftViewModel
{
get { return (ILeftViewModel )DataContext; }
set { DataContext = value; }
}
}
[Export(typeof(LeftViewViewModel))]
public class LeftViewViewModel : ILeftViewModel //ILeftViewModel inherits from IViewModel
{
public LeftViewViewModel()
{
}
}
Inside Module Initializer :
CullingRegion.Regions[YourRegionName].Add(ServiceLocator.Current.GetInstance<YourViewClassName>());
Hope it helps