Custom control Bindable property don't work with ViewModel - c#

I encounter an issue while I'm creating a Custom control in my Xamarin forms app.
I create a bindable property for the label label called "NameLabel" in this xaml file :
<Grid
x:Class="Kwikwink.Controls.SelectedGatewayFrame"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit">
<StackLayout>
<Frame >
<StackLayout Orientation="Horizontal">
<StackLayout>
...
<Label
x:Name="NameLabel"
FontFamily="InterMed"
TextColor="{StaticResource DetailTextColor}"
VerticalOptions="Center" />
</StackLayout>
...
</StackLayout>
</Frame>
</StackLayout>
</Grid>
with this code in my xaml.cs file
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class SelectedGatewayFrame : Grid
{
public static readonly BindableProperty GatewayNameProperty = BindableProperty.Create(nameof(Name),
typeof(string),
typeof(SelectedGatewayFrame),
defaultValue: string.Empty,
propertyChanged: GatewayNamePropertyChanged);
private static void GatewayNamePropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
var control = (SelectedGatewayFrame)bindable;
control.NameLabel.Text = newValue?.ToString();
}
public string Name
{
get => GetValue(GatewayNameProperty)?.ToString();
set => SetValue(GatewayNameProperty, value);
}
public SelectedGatewayFrame()
{
InitializeComponent();
}
}
And finaly a use it like this in other views:
<controls:SelectedGatewayFrame Name="Test string" />
With the string set here it work perfectly !!
My problem come when I try to bound this property to somthing in a viewmodel (public string tmp { get; set; } = "meph"; for exemple) :
like so :
<controls:SelectedGatewayFrame Name="{Binding tmp}" />
or so :
<controls:SelectedGatewayFrame Name="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:NewAccessTypeViewModel}}, Path=tmp}" />
Then I got this error that show :
No property, BindableProperty, or event found for "Name", or mismatching type between value and property.
I hope this is clear enough, thanks in advance for any help

As a summary, I posted an answer.
For the first problem:
No property, BindableProperty, or event found for "Name", or
mismatching type between value and property.
From document Create a property,we know that
Important
The naming convention for bindable properties is that the bindable
property identifier must match the property name specified in the
Create method, with "Property" appended to it.
So, you need to change GatewayNameProperty to NameProperty or change public string Name to public string GatewayName.
For example:
public static readonly BindableProperty GatewayNameProperty = BindableProperty.Create(nameof(GatewayName),
typeof(string),
typeof(SelectedGatewayFrame),
defaultValue: string.Empty,
propertyChanged: GatewayNamePropertyChanged);
public string GatewayName
{
get => GetValue(GatewayNameProperty)?.ToString();
set => SetValue(GatewayNameProperty, value);
}
For the second problem:
when have a default value in the view model it perfectly work but if i
try to set it later it stay null.
You need to implement interface INotifyPropertyChanged for your view model.
The INotifyPropertyChanged interface is used to notify clients, typically binding clients, that a property value has changed.
For exmaple:
public class NewAccessTypeViewModel: INotifyPropertyChanged
{
Gateway currentGateway;
public Gateway CurrentGateway
{
get
{
return currentGateway;
}
set
{
if (currentGateway != value)
{
currentGateway = value;
OnPropertyChange(nameof(CurrentGateway));
}
}
}
public NewAccessTypeViewModel() { CurrentGateway = null; }
public NewAccessTypeViewModel(Gateway _gateway)
{ CurrentGateway = _gateway; Console.WriteLine($"Current gateway name => {CurrentGateway.Name}");
}
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
}
And you also need to implement interface INotifyPropertyChanged for your Gateway .
public class Gateway: INotifyPropertyChanged
{
// public string Name { get; set; }
private string _name ;
public string Name
{
get
{
return _name;
}
set
{
_name = value;
OnPropertyChange(nameof(Name));
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChange(string propName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
}
}

Related

OnPropertyChange does not update binding if not creating new instance of binding object

I have had some problems with data bindings in WPF, so I have been playing around to try to figure out what is going on. But I ran into something that I do not understand, and I hope someone could explain it to me. The code below is not anything I'm trying to use, it is only for testing.
I have a simple class "Lamp" with only one string property "Name". I also override ToString(), so that it returns the name.
In a "ViewModel" class I create a "Lamp" property and a ICommand:
class ViewModel : ViewModelBase
{
private Lamp _lamp1;
public Lamp Lamp1
{
get { return _lamp1; }
set { _lamp1 = value; }// OnPropertyChanged("Lamp1"); }
}
public ICommand Lamp_click { get { return new RelayCommand(param => LampClickExecute(param)); } }
public ViewModel()
{
Lamp1 = new Lamp() { Name = "Test" };
}
private void LampClickExecute(object param)
{
var name = Lamp1.Name + "I";
//HERE IS THE QUESTION!
//Lamp1 = new Lamp() { Name = name };
Lamp1.Name = name;
OnPropertyChanged("Lamp1");
}
}
In the view, I only have a button that binds to the command, and a label that I'm binding to Lamp1:
<Button x:Name="btn_lamp" Content="Button" HorizontalAlignment="Left" Margin="859,27,0,0" VerticalAlignment="Top" Height="29" Command="{Binding Path= Lamp_click}" CommandParameter="{Binding Path=Lamp1 }"/>
<Label Content= "{Binding Lamp1}" HorizontalAlignment="Left" Margin="797,56,0,0" VerticalAlignment="Top"/>
If I in the command create a new instance of "Lamp" with a new name and call OnPropertyChanged (still in the command, it is commented away in the setter) everything is fine and the new value is shown in the view. But if I do not create a new instance, instead just changing the name of the current one, the view is not updated. I have put a breakpoint in the command to see that everytime the button is clicked, there is an "I" added to the name, nothing strange there.
What is going on behind the scenes here? Is it somehow required that the setter is called, eventhough OnPropertyChanged is called in the command?
As I said, I'm not trying to acheive anyhting specific with this code, just want this behaviour explained.
UPDATE:
My ViewModelBase looks like this:
class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
internal void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
You should use the INotifyPropertyChanged and add the code to your ViewModelBase class to update any object on the View.
{
public class ViewModelBase: INotifyPropertyChanged
{
#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
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;
}
}
}
And then your code should call the OnPropertyChanged
public Lamp Lamp1
{
get { return _lamp1; }
set { SetProperty(ref _lamp1, value; }
}
In your code you are not changing the property Lamp1. You are changing the property in the lamp class Name. If you implement INotifyPropertyChanged in you lamp class with the Name field it will update. With your current code if you changed Lamp1 to a new instance of Lamp with a different name then it would record the change because you are changing the Lamp1 field.
public class Lamp : NotifyChange { //NotifyChange is the INotifyPropertyChanged implementation in a base class
private _Name;
public Name{
get{ return _Name; }
set{
if( _Name != value ) {
_Name = value;
OnPropertyChanged( nameof( Name ) );
}
}
}
}
The property change needs to be implemented where the change is happening or it won't know that its changed. Hope that makes sense why you are not getting the update to show in your view.

Xamarin ListView MVVM DataBinding

I am having a little Problem with DataBinding to a ListView.
Because I want to have a Listview with MultiSelection I needed to implement a custom class called GenericSelectableItem which stores the Data, and if the cell IsSelected.
First, here is the View Model of the MainPage:
public class MainPageViewModel : BaseViewModel, INotifyPropertyChanged
{
private ObservableCollection<GenericSelectableItem<AudioFile>> _audiofiles = new ObservableCollection<GenericSelectableItem<AudioFile>>();
public ObservableCollection<GenericSelectableItem<AudioFile>> AudioFiles
{
get => _audiofiles ?? new ObservableCollection<GenericSelectableItem<AudioFile>>();
set
{
_audiofiles = value;
PropertyChanged(this, new PropertyChangedEventArgs(nameof(AudioFiles)));
}
}
}
The Xaml for the MainPage:
<!-- The Content -->
<ListView x:Name="listView" Grid.Row="1" HasUnevenRows="true" RowHeight="-1" ItemsSource="{Binding AudioFiles}" ItemSelected="ListView_OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<local:AudioViewCell Audiofile="{Binding Data}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
2 Helper Classes for making a multiselectable ListView:
public class GenericSelectableItem<T> : SelectableItem
{
public GenericSelectableItem(T data)
: base(data)
{
}
public GenericSelectableItem(T data, bool isSelected)
: base(data, isSelected)
{
}
// this is safe as we are just returning the base value
public new T Data
{
get => (T)base.Data;
set => base.Data = value;
}
}
public class SelectableItem : BindableObject
{
public static readonly BindableProperty DataProperty =
BindableProperty.Create(
nameof(Data),
typeof(object),
typeof(SelectableItem),
(object) null);
public static readonly BindableProperty IsSelectedProperty =
BindableProperty.Create(
nameof(IsSelected),
typeof(object),
typeof(SelectableItem),
(object)false);
public SelectableItem(object data)
{
Data = data;
IsSelected = false;
}
public SelectableItem(object data, bool isSelected)
{
Data = data;
IsSelected = isSelected;
}
public object Data
{
get => (object)GetValue(DataProperty);
set => SetValue(DataProperty, value);
}
public bool IsSelected
{
get => (bool)GetValue(IsSelectedProperty);
set => SetValue(IsSelectedProperty, value);
}
}
A Binding Example in AudioViewCell.Xaml:
<Label x:Name="LblFilename" Text="{Binding Filename}"
VerticalTextAlignment="Center"
Style="{StaticResource CellLabel}"/>
The AudioViewCell.cs
public partial class AudioViewCell : ViewCell
{
public static BindableProperty AudiofileProperty = BindableProperty.Create(
propertyName: nameof(Audiofile),
returnType: typeof(AudioFile),
declaringType: typeof(AudioViewCell),
defaultValue: null,
defaultBindingMode: BindingMode.OneWay);
public AudioFile Audiofile
{
get => (AudioFile) GetValue(AudiofileProperty);
set
{
Debug.WriteLine("Audiofile changed");
SetValue(AudiofileProperty, value);
((MenuItemViewModel) BindingContext).Audiofile = value;
}
}
public AudioViewCell()
{
InitializeComponent();
this.BindingContext = new MenuItemViewModel(SlAdditionalData, AwvWaveView);
}
}
And finally the MenuItemViewModel:
public class MenuItemViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged = delegate { };
private AudioFile _audioFile;
public AudioFile Audiofile
{
get => _audioFile;
set
{
Debug.WriteLine("Setting Audiofile");
_audioFile = value;
PropertyChanged(this, new PropertyChangedEventArgs(nameof(Audiofile)));
PropertyChanged(this, new PropertyChangedEventArgs(nameof(Filename)));
}
}
public string Filename => Audiofile?.Filename;
}
It seems that the Field Data inside GenericSelectableItem is never set so I think there is something wrong with the binding
Does anyone know a better way or why this is not working?
Thanks alot for your help!!
TL;DR Version: Taking a deep looking on your cell's and 'cellViewModel's source code I've noticed that there's a confusion on bindings handle on your code. You are treating one BindingContext that you set at the AudioViewCell's constructor but it's overridden by the one set automatically by the ListView (that runs after the constructor). So you stand with a ViewCell rendered with no data.
On this image, I tried to show what's going on with your model:
Notice that yellow circular arrow at left, it's you defining the binding context at the constructor. That's overridden later by the red arrows (set after the listview renders).
To make it works the way you've coded, follow these steps:
Get rid of the AudiofileProperty at AudiofileViewCell, you will not need it;
Create an overload to MenuItemViewModel's constructor to receive the "AudioFile" (the MenuItemViewModel class is your real BindingContext);
Override the OnBindingContextChanged method to extract the new one Data field and send it as a parameter to the constructor of a new instance of MenuItemViewModel;
Set this new Instance of MenuItemViewModel as BindingContext of your inner View (It's a StackLayout called slRoot according to your source code)
Here's the steps code:
2:
public class MenuItemViewModel : INotifyPropertyChanged
{
// ...
public void SetAudiofile(AudioFile data)
{
Audiofile = data;
}
// ...
}
3 and 4:
public partial class AudioViewCell : ViewCell
{
// ...
protected override void OnBindingContextChanged()
{
base.OnBindingContextChanged();
// * I'm not sure if it's ok create a new instance to your binding context here, the old one ca be kept on memory due it's subscription. Think about create a method to set just the Audiofile property
slRoot.BindingContext = new MenuItemViewModel( thing, thing, ((GenericSelectableItem<AudioFile>)BindingContext).Data);
}
// ...
}
I've tested and it works, but it's far from an ideal clean solution.
If your intent is to reuse this cell, I think you should expose the properties that can be or not bound, let the need of it says what will be shown. The view cell should only handle visual layout / behavior, don't matter what data is on it.
P.S.: Sorry for my bad English, I hope it can be understandable.

UWP MVVM Data Binding for dummies (textbox.text from String)

Well, having a go at MVVM with UWP template 10. I have read many pages, and although everyone tries to say its really easy, I still can't make it work.
To put it into context, OCR is being run on an image, and I would like the text to be displayed in textbox automatically.
Here is my Model:
public class TextProcessing
{
private string _ocrText;
public string OcrText
{
get { return _ocrText; }
set
{
_ocrText = value;
}
}
}
Here is my ViewModel:
public class ScanPageViewModel : ViewModelBase, INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private TextProcessing _ocrTextVM;
public ScanPageViewModel()
{
_ocrTextVM = new TextProcessing();
}
public TextProcessing OcrTextVM
{
get { return _ocrTextVM; }
set {
_ocrTextVM = value;
this.OnPropertyChanged("OcrTextVM");
}
}
public void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
Here is my View:
<TextBox x:Name="rtbOcr"
Text="{Binding OcrTextVM.OcrText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Firstly, that is not working. Could someone try to show where I am going wrong?
Then, the data is coming from a Services file, how would the Services update the value? What would be the correct code?
Thanks in advance.
Following code is cite from code.msdn (How to achieve MVVM design patterns in UWP), it will be helpful for you:
Check you code step by step.
1.ViewModel implemented interface INotifyPropertyChanged,and in property set method invoked PropertyChanged, like this:
public sealed class MainPageViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string _productName;
public string ProductName
{
get { return _productName; }
set
{
_productName = value;
if (PropertyChanged != null)
{
PropertyChanged.Invoke(this, new PropertyChangedEventArgs(nameof(ProductName)));
}
}
}
}
2.Initialize you ViewMode in you page, and set DataContext as the ViewMode, like this:
public sealed partial class MainPage : Page
{
public MainPageViewModel ViewModel { get; set; } = new MainPageViewModel();
public MainPage()
{
...
this.DataContext = ViewModel;
}
}
3.In you xaml, binding data from viewMode, like this:
<TextBox Text="{Binding Path=ProductName,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Name="ProductNameTextBox" TextChanged="ProductNameTextBox_TextChanged" />
Your OnPropertyChanged call on OcrTextVM isn't actually called in your case, since you set the value in the constructor to its backing field and bypass the property.
If you set the value via the property, it should work:
public ScanPageViewModel()
{
OcrTextVM = new TextProcessing();
}
Of course your view needs to know that ScanPageViewModel is its DataContext. Easiest way to do it is in the constructor of the code-behind of your view:
public OcrView()
{
DataContext = new ScanPageViewModel();
InitializeComponent();
}
Assuming your OCR service is returning a new TextProcessing object on usage, setting the property of OcrTextVM should suffice:
public class ScanPageViewModel : ViewModelBase, INotifyPropertyChanged
{
//...
private void GetOcrFromService()
{
//...
TextProcessing value = OcrService.Get();
OcrTextVM = value;
}
}
On a note, the OcrTextVM name doesn't really reflect what the property is doing, since it doesn't look like it's a viewmodel. Consider renaming it.
Actually, it is very easy once I manage to understand. Here is the code needed to update a TextBox.Text
In the Models:
public class DisplayText : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string _text;
public string Text
{
get { return _text; }
set
{
_text = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Text)));
}
}
}
In the XAML file:
<TextBox Text="{Binding Helper.Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" ... />
In the ViewModels:
private DisplayText _helper = new DisplayText();
public DisplayText Helper
{
get { return _helper; }
set
{
_helper = value;
}
}
Then any mod from the ViewModels:
Helper.Text = "Whatever text, or method returning a string";

Dependency property not updating the UI

I am new to the binding concept and got stuck with the following.
public sealed partial class MainPage : Page
{
Model model;
public MainPage()
{
this.InitializeComponent();
model = new Model();
this.DataContext = model;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
model.Name = "My New Name";
}
}
class Model : DependencyObject
{
public static DependencyProperty NameProperty = DependencyProperty.Register("Name", typeof(string), typeof(Model), new PropertyMetadata("My Name"));
public string Name
{
get { return (string)GetValue(NameProperty); }
set { SetValue(NameProperty, value); }
}
}
I have bound the Name property to Text property of TextView. All I need to do is, on the button click I want to update the Name value that will have to update the text box value. I thought, if I use dependency property instead of normal CLR property, I dont need to implement INotifyPropertyChanged.
But the value in the UI is not updating as expected. Am I missing something?
Thanks in advance.
There are a couple things that need to be addressed with your question. First of all, your model does not need to inherit from DependencyObject, rather it should implement INotifyPropertyChanged:
public class Model : INotifyPropertyChanged
{
string _name;
public string Name
{
get { return _name; }
set
{
if (_name != value)
{
NotifyPropertyChanged("Name");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
An object that implements INotifyProperty can then be used as a DependencyProperty in your page/window/object:
public static readonly DependencyProperty ModelProperty = DependencyProperty.Register("Model",
typeof(Model), typeof(MainWindow));
public Model Model
{
get { return (Model)GetValue(ModelProperty); }
set { SetValue(ModelProperty, value); }
}
Finally, then, you can bind your TextBox.Text property to that in the XAML:
<Grid>
<StackPanel Orientation="Vertical">
<TextBox Text="{Binding Name}"/>
<Button Click="Button_Click">Click</Button>
</StackPanel>
</Grid>
The INotifyPropertyChanged is still necessary here because there needs to be a way for the UI to know that the model object has been updated.

How to populate a combobox with access using MVVM

I'm new to C# and I'm trying to create a code using MVVM pattern, but I don't know how to populate a combobox using that pattern. Please Give me help to create the ViewModel and the binding to the xaml.
Code Model:
public int Cd_Raca
{
get;
set
{
if(Cd_Raca != value)
{
Cd_Raca = value;
RaisePropertyChanged("Cd_Raca");
}
}
}
public string Nm_Raca
{
get;
set
{
if(Nm_Raca != value)
{
Nm_Raca = value;
RaisePropertyChanged("Nm_Raca");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string property)
{
if(PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
}
Xaml:
<ComboBox x:Name="dsCmbRaca" HorizontalAlignment="Left" Margin="438,4,0,0"
VerticalAlignment="Top" Width="94" Height="19"/>
Use the ItemsSource Property and set it to an enumeration of objects. With DisplayMemberPath you can set it to a property of a single object of your list if the list is not just a list of strings.
I.e. in my sample the object of the list has a Description property for display and a Value property for the selected value.
All bindings in the sample need to be a property in your ViewModel (=DataContext).
<ComboBox DisplayMemberPath="Description" HorizontalAlignment="Left"
VerticalAlignment="Top" Width="120"
ItemsSource="{Binding myList}"
SelectedValue="{Binding mySelectedValue}" SelectedValuePath="Value" />
Edit:
The List property could look like this:
public IList<MyObject> myList { get { return new List<MyObject>();} }
The Object could look like this for example:
public class MyObject
{
public string Description { get; }
public enum Value { get;}
}
The Object is optional. You could just pass a list of strings.
Disclaimer: I hacked this in notepad. I hope it compiles.
UPDATE
Looking at your code at least from what you post your properties are not implemented correctly. You need a backing field if you code it like you have:
private int _cd_Raca;
private string _nm_Raca;
public int Cd_Raca
{
get{ return _cd_Raca;}
set
{
if(_cd_Raca != value)
{
_cd_Raca = value;
RaisePropertyChanged("Cd_Raca");
}
}
}
public string Nm_Raca
{
get{return _nm_Raca;}
set
{
if(_nm_Raca != value)
{
_nm_Raca = value;
RaisePropertyChanged("Nm_Raca");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string property)
{
if(PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
Reading your comment to my first answer seems you might have a specific use case. So if this update does not help maybe you can add some more information to your question.

Categories

Resources