I recently started learning Xamarin and I stumbled across the following problem. I have a single label in my XAML file which is bound to a ViewModel property. I am using the ICommand interface to bind a tap gesture to a method in my ViewModel which is supposed to update the label's text. However, it is not updating the "Please touch me once!". I am just wondering what I am doing wrong here?
MainPage xaml:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App1"
x:Class="App1.MainPage">
<Label Text="{Binding MessageContent, Mode=TwoWay}"
VerticalOptions="Center"
HorizontalOptions="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding OnLabelTouchedCmd}" />
</Label.GestureRecognizers>
</Label>
</ContentPage>
Code-behind:
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
BindingContext = new MainPageViewModel();
}
}
ViewModel:
class MainPageViewModel : INotifyPropertyChanged
{
private string _messageContent;
public MainPageViewModel()
{
MessageContent = "Please touch me once!";
OnLabelTouchedCmd = new Command(() => { MessageContent = "Hey, stop toutching me!"; });
}
public ICommand OnLabelTouchedCmd { get; private set; }
public string MessageContent
{
get => _messageContent;
set
{
_messageContent = value;
OnPropertyChanged(value);
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
You're calling OnPropertyChanged with a wrong argument as seen here:
protected virtual Void OnPropertyChanged ([System.Runtime.CompilerServices.CallerMemberName] String propertyName)
It expects the name of the property instead of the value you're passing now. Try this instead:
public string MessageContent
{
get => _messageContent;
set
{
_messageContent = value;
OnPropertyChanged("MessageContent");
}
}
Explaination
The current code isn't working because it is passing the value of the property into OnPropertyChanged.
Instead, we need to pass the name of the property as a string into OnPropertyChanged.
Answer
We can take advantage of the CallerMemberName attribute to make the code more concise and to avoid hard-coding strings when calling OnPropertyChanged.
Adding [CallerMemberName] to the parameter of OnPropertyChanged allows you to call OnPropertyChanged() from the setter of the property, and the property name is automatically passed into the argument.
Updated Method
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
Updated ViewModel
class MainPageViewModel : INotifyPropertyChanged
{
private string _messageContent;
...
public string MessageContent
{
get => _messageContent;
set
{
_messageContent = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Also look at the ViewModelBase located here, have all your ViewModels inherit from it. You can call just OnPropertyChanged, in either of the two ways below. The first of which will just take the name of the calling member, in this case your public property.
OnPropertyChanged();
OnPropertyChanged("MyProperty");
Edit- this is in extension to Brandon's correct answer
Related
I have below WPF TextBox:
<TextBox Grid.Column="0"
Grid.Row="1"
Text="{Binding myPath, UpdateSourceTrigger=PropertyChanged}"
Margin="5,8,8,5" />
And its property in the view model is:
public string myPath
{
get => myObject.path;
set
{
// Do some comprobations before assigning the new value
if (comprobationsOk(value))
{
Uri myUri = new Uri(value);
myObject.path = myUri.LocalPath;
this.OnPropertyChanged();
}
}
}
And this is my OnPropertyChanged method in my ViewModelBase class which implements INotifyPropertyChanged:
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
As you can see, the actual view model value is transformed in the setter.
When the user starts typing in the TextBox ///my/absolute/path the property in the view model gets //my/absolute/path.
So I expect the TextBox to be updated with //my/absolute/path, but it is not and remains as ///my/absolute/path
Actually it works pretty well with a working view model.
View:
<TextBox Text="{Binding Path, UpdateSourceTrigger=PropertyChanged}" />
View model:
public class ViewModel : NotifyPropertyChangedBase
{
private string _name = string.Empty;
public string Path
{
get => _name;
set
{
// To avoid constant System.UriFormatException, we use the try method
var newValue = Uri.TryCreate(value, UriKind.Absolute, out var result) ? result.LocalPath : value;
Update(ref _name, newValue);
}
}
}
NotifyPropertyChangedBase :
public abstract class NotifyPropertyChangedBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler? PropertyChanged;
protected void Update<T>(ref T field, T newValue, [CallerMemberName] string? propertyName = null)
{
if (Equals(field, newValue))
return;
field = newValue;
OnPropertyChanged(propertyName);
}
protected virtual void OnPropertyChanged([CallerMemberName] string? propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
I'm struggeling a bit with a bindable property and the propertyChanged event not firing when new text is entered.
I've made a minimal codesample:
Xaml custom control:
<Grid xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BindingPropertyProject.CustomFlyout">
<Entry x:Name="MyEntry"/>
Codebehind:
public partial class CustomFlyout : Grid
{
public CustomFlyout()
{
InitializeComponent();
}
public string MyEntryText
{
get { return (string)GetValue(MyEntryTextProperty); }
set
{
SetValue(MyEntryTextProperty, value);
}
}
public static readonly BindableProperty MyEntryTextProperty =
BindableProperty.Create(nameof(MyEntryText), typeof(string),
typeof(CustomFlyout),
defaultValue: string.Empty,
defaultBindingMode: BindingMode.TwoWay
, propertyChanging: TextChanged);
private static void TextChanged(BindableObject bindable, object oldValue, object newValue)
{
if (bindable is CustomFlyout control)
{
control.MyEntry.Text = newValue?.ToString();
}
}
}
}
Consuming class xaml:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:BindingPropertyProject"
x:Class="BindingPropertyProject.MainPage">
<Grid>
<local:CustomFlyout MyEntryText="{Binding TextPropertyFromBindingContext, Mode=TwoWay}" HorizontalOptions="FillAndExpand" VerticalOptions="Start"/>
</Grid>
Consuming class codebehind:
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
BindingContext = this;
}
private string _textPropertyFromBindingContext = "bound";
public string TextPropertyFromBindingContext
{
get
{
return _textPropertyFromBindingContext;
}
set
{
if (_textPropertyFromBindingContext != value)
{
_textPropertyFromBindingContext = value;
OnPropertyChanged();
}
}
}
}
It binds the "bound" value just fine, but subsequent changes entered in the entry does not raise property changed.
I've tried a number of suggestions i found from googeling, but this should be fine right?
UPDATE:
Ok - so i actually got i to work by adding binding in the custom view:
<Grid xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BindingPropertyProject.CustomFlyout">
<Entry x:Name="MyEntry" Text="{Binding TextPropertyFromBindingContext }"/>
Is this really the way to do it? I mean - i could only make it work, if bindings was named EXACTLY the same in custom view, and consuming part..
i could only make it work, if bindings was named EXACTLY the same in
custom view, and consuming part..
It's not necessary to have same binding name. Please refer following code.
Custom Control
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="StackQA2XF.CustomControl.MyCustomControl">
<ContentView.Content>
<Entry x:Name="CustomEntry"/>
</ContentView.Content>
</ContentView>
public partial class MyCustomControl : ContentView
{
public static readonly BindableProperty EntryTextProperty =
BindableProperty.Create(nameof(EntryText), typeof(string), typeof(MyCustomControl), default(string), BindingMode.TwoWay);
public string EntryText
{
get { return (string)GetValue(EntryTextProperty); }
set { SetValue(EntryTextProperty, value); }
}
public MyCustomControl()
{
InitializeComponent();
CustomEntry.SetBinding(Entry.TextProperty, new Binding(nameof(EntryText), source: this));
}
}
Consuming Class
<customcontrols:MyCustomControl EntryText="{Binding TitleText}"/>
public class MainViewModel : INotifyPropertyChanged
{
private string _titleText = "Good morning";
public string TitleText
{
get
{
return _titleText;
}
set
{
_titleText = value;
OnPropertyChange(nameof(TitleText));
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChange(string propName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
}
}
Please do binding in the code for custom control and raise property change for the binding property in viewmodel.
CustomEntry.SetBinding(Entry.TextProperty, new Binding(nameof(EntryText), source: this));
OnPropertyChange(nameof(TitleText));
Please refer https://www.youtube.com/watch?v=ZViJyL9Ptqg.
I have tested this code able to get fired propertyChanged event when Entry text is changed from custom view.
It binds the "bound" value just fine, but subsequent changes entered in the entry does not raise property changed.
From Bindable Properties property changes, BindableProperty MyEntryTextProperty binding TextPropertyFromBindingContext, so the propertyChanged event will be fired when you change TextPropertyFromBindingContext, Instead of changing the value of MyEntry.
You can change TextPropertyFromBindingContext bu Button.click, then you will see the propertyChanged event will be fired.
public partial class Page3 : ContentPage, INotifyPropertyChanged
{
private string _textPropertyFromBindingContext = "bound";
public string TextPropertyFromBindingContext
{
get
{
return _textPropertyFromBindingContext;
}
set
{
if (_textPropertyFromBindingContext != value)
{
_textPropertyFromBindingContext = value;
RaisePropertyChanged("TextPropertyFromBindingContext");
}
}
}
public Page3()
{
InitializeComponent();
this.BindingContext = this;
}
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
private void btn1_Clicked(object sender, EventArgs e)
{
TextPropertyFromBindingContext = "test";
}
}
I am new in Xamarin development, so please bear if the question seems too simple. I am having a simple single string object in my C# code (Code behind). I want to bind it to a Label in XAML so that whenever the string changes, it reflects in XAML Page.
Here is my C# code
public string Name { get; set; }
public HomePage()
{
InitializeComponent();
BindingContext = this;
Name = "John";
}
Here is my XAML code
<Label Text="{Binding Name}" />
How can I do it. Am I doing anything wrong?
It is important you learn about MVVM pattern and how to perform the data binding. You can see this link: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-bindings-to-mvvm.
Basically, you can do this:
Create a ViewModel for your HomePage.
public class HomePageViewModel : INotifyPropertyChanged
{
private string name;
public string Name
{
get
{
return name;
}
set
{
name = value;
OnPropertyChanged(nameof(Name));
}
}
public HomePageViewModel()
{
// some initialization code here ...
Name = "John";
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Attach now your ViewModel to the HomePage View
public HomePageView()
{
InitializeComponent();
BindingContext = new HomePageViewModel();
}
Then in your XAML, you can have your binding like this:
<Label Text="{Binding Name}" />
Then whenever the Name changes in the ViewModel, it will be reflected in the XAML view.
In my view model:
public string MyProperty{ get; set; }
public MyViewModel()
{
MyProperty = "hello";
}
I have defined a string property.
Now, from my page, I want to bind to this property:
Text="{Binding MyProperty}"
but this is not working - no text is being show. What am I missing?
Edit:
My view model inherits from:
public class Observable : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void Set<T>(ref T storage, T value, [CallerMemberName]string propertyName = null)
{
if (Equals(storage, value))
{
return;
}
storage = value;
OnPropertyChanged(propertyName);
}
protected void OnPropertyChanged(string propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
Edit 2:
I have modified my view model:
private string _myProperty;
public string MyProperty
{
get => _myProperty;
set => Set(ref _myProperty, value);
}
public MyViewModel()
{
_myProperty = "hello";
}
and the xaml:
Text="{Binding MyProperty, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
but it's still not working.
Edit 3: I think the problem is that the Text property is a registered dependency property of a custom control:
public sealed partial class MyControl : UserControl
{
public MyControl()
{
InitializeComponent();
DataContext = this;
}
public string Text
{
get => (string)GetValue(s_textProperty);
set => SetValue(s_textProperty, value);
}
public static readonly DependencyProperty s_textProperty =
DependencyProperty.Register("Text", typeof(string), typeof(MyControl), new PropertyMetadata(null));
}
and in the control's xaml I have:
<TextBlock Text="{Binding Text}" />
This:
<MyControl Text="{Binding MyProperty}"/>
is in the page where I use the custom control.
Your class should implement INotifyPropertyChanged and haveproperty accessors like this:
public event PropertyChangedEventHandler PropertyChanged;
private string _myProperty;
public string MyProperty
{
get { return _myProperty; }
set
{
_myProperty = value;
OnPropertyChanged();
}
}
private void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
In XAML:
Text="{Binding MyProperty, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Remarks:
Mode = TwoWay - property will change both on UI and in code if changed by either one.
UpdateSourceTrigger - Reacts on the PropertyChanged event.
Also, read about DataContext :)
I recomment adding the PropertyChanged.Fody Nuget (https://www.nuget.org/packages/PropertyChanged.Fody/)
Its simple to implement it.
[AddINotifyPropertyChangedInterface]
public class MyViewModel
{
public string MyProperty { get; set; }
public MyViewModel()
{
MyProperty = "hello";
}
}
As #DavidHruška said, edit the binding in XAML too.
Your setter needs to explicitly call the Observable.Set() Method:
private string _myProperty;
public string MyProperty
{
get { return _myProperty; }
set { this.Set<string>(ref _myProperty, value); }
}
Unfortunately, autos don't implement INPC for you, so you can't use them. Microsoft had this as a feature request, but it appears to be getting turned down.
I've got a list of checkboxes bound like this.
<ListBox ItemsSource="{Binding AllThings}">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Name}"
IsChecked="{Binding Active,Mode=TwoWay}"
Checked="ToggleButton_OnChecked"
Unchecked="ToggleButton_OnUnchecked"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The binding works one-way because I can see that the boxes are checked/unchecked based on my settings from the beginning. I was expecting checking a box to update the underlying viewmodel but it doesn't happen. The breakpoint set on the OnPropertyChanged doesn't get hit. I suspect that it's got to do with the fact that I'm changing a property inside the observed property but due to ignorance I'm not sure.
class Presenter : INotifyPropertyChanged
{
private IEnumerable<Something> _allThings;
public IEnumerable<Something> AllThings
{
get { return _allThings; }
set
{
_allThings = value;
OnPropertyChanged("AllThings");
}
}
public Presenter()
{
_allThings = DataAccessor.GetThings();
}
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged(
[CallerMemberName] String propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
What can I be missing here?
As far I can see I'm doing precisely as this guy suggests. Obviously I'm missing something but it's beyond me what...
edit
As per request from #Clemens, I also implemented the interface in the Soomething class.
public class Something :INotifyPropertyChanged
{
public int Id { get; set; }
public String Name { get; set; }
public bool Active { get; set; }
public override String ToString()
{
return Name;
}
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged(
[CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
class Something must implement the INotifyPropertyChanged interface. This means that besides writing
public class Something : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
}
it also has to actually raise the PropertyChanged event when property values change, e.g.:
private string name;
public string Name
{
get { return name; }
set
{
name = value;
OnPropertyChanged();
}
}