Access a custom controls bindable properties from its xaml - xaml

I want to declare a bindable property in my custom view and link it to the corresponding viewmodel.
I use the MVVM pattern and want to separate ui logic and data logic from eachother. So I keep my status and other data in the viewmodel and update my view according to viewmodel data changes.
This of course should be done by data binding.
Lets say I got the following xaml ...
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:MyApp.Views.Controls"
x:Class="MyApp.Views.Controls.MyView"
x:DataType="controls:MyViewVm">
<!--TODO: Content-->
</ContentView>
... with this code behind ...
using System.Runtime.CompilerServices;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace MyApp.Views.Controls
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MyView : ContentView
{
public static readonly BindableProperty StatusProperty = BindableProperty.Create(nameof(Status), typeof(MyStatus), typeof(MyView));
public MyStatus Status
{
get => (MyStatus)GetValue(StatusProperty);
set => SetValue(StatusProperty, value);
}
public MyView()
{
InitializeComponent();
}
protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
base.OnPropertyChanged(propertyName);
switch (propertyName)
{
case nameof(Status):
// TODO: Do styling ...
break;
}
}
}
}
... and this viewmodel and status enum:
namespace AbrechnungsApp.Views.Controls
{
public class MyViewVm : ViewModelBase
{
public MyStatus Status { get; set; }
}
public enum MyStatus
{
Enabled,
Disabled,
Readonly
}
}
Now the question is:
How do I link my viewmodels Status property to my views Status bindable property?

I typically create a helper property to cast BindingContext to the appropriate VM class:
private MyViewVm VM => (MyViewVm)BindingContext;
Then get/set VM properties in the bindable property:
public static readonly BindableProperty StatusProperty =
BindableProperty.Create(
nameof(Status), typeof(MyStatus), typeof(MyView),
propertyChanged: (binding, old, new) =>
{
// Needed if your XAML uses two-way binding.
Status = new;
});
public MyStatus Status
{
get => VM.Status;
set => VM.Status = value;
}

Related

NotifyPropertyChange fired but UI field not updated in Xamarin.Forms

I'm currently refactoring a few abstraction layers into a Xamarin app in order to break the "monolithic" structure left by the previous dev, but something has gone awry. In my ViewModel, I have a few properties that call NotifyPropertyChange in order to update the UI whenever a value is picked from a list. Like so:
public Notifier : BindableObject, INotifyPropertyChanged
{
//...
protected void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Had to create a middle layer due to my specific needs
public interface ISomeArea
{
DefinicaoServicoMobile TipoPasseio { get; set; }
}
-
public class SomeAreaImpl : Notifier, ISomeArea
{
//...
protected DefinicaoServicoMobile _tipoPasseio;
public DefinicaoServicoMobile TipoPasseio
{
get => _tipoPasseio;
set
{
if (_tipoPasseio != value)
{
_tipoPasseio = value;
NotifyPropertyChanged(nameof(TipoPasseio));
}
}
}
}
The actual bound view model:
public MyViewModel : BaseViewModel, ISomeArea
{
private SomeAreaImpl someArea;
//...
public MyViewModel()
{
// This is meant to provide interchangable areas across view models with minimal code replication
someArea = new SomeAreaImpl();
}
public DefinicaoServicoMobile TipoPasseio
{
get => someArea.TipoPasseio;
set => someArea.TipoPasseio = value;
}
}
And the .xaml snippet:
<renderers:Entry
x:Name="TxtTipoPasseio"
VerticalOptions="Center"
HeightRequest="60"
HorizontalOptions="FillAndExpand"
Text="{Binding TipoPasseio.DsPadrao}"
/>
The renderer opens a list allowing the user to choose whichever "TipoPasseio" they want, and supposedly fill the textbox with a DsPadrao (standard description). Everything works, even the reference to TipoPasseio is held after being selected (I know this because should I bring up the list a second time, it will only display the selected DsPadrao, giving the user the option to clean it. If he does, a third tap will show all the options again.
I might have screwed up in the abstraction, as I don't see the setter for myViewModel.TipoPasseio being called, tbh
Any ideas?
Let's reason through what Xamarin knows (as best as we can, since you didn't include all of the relevant code):
You have a data context having the type MyViewModel
That view model object has a property named TipoPasseio, having type DefinicaoServicoMobile
The type DefinicaoServicoMobile has a property named DsPadrao
It is that last property that is bound to the Entry.Text property.
In a binding, any observable changes to values forming the source or path for the binding will cause the runtime to update the target property for the binding (Entry.Text) and thus result in a change in the visual appearance (i.e. new text being displayed).
Note the key word observable. Here are the things I see which are observable by Xamarin:
The data context. But this doesn't change.
That's it.
With respect to the value of the MyViewModel.TipoPasseio property, there's nothing in the code you posted showing this property changing. But if it did, it doesn't look like MyViewModel implements INotifyPropertyChanged, so Xamarin wouldn't have a way to observe such a change.
On that second point, you do implement INotifyPropertyChanged in the SomeAreaImpl type. But Xamarin doesn't know anything about that object. It has no reference to it, and so has no way to subscribe to its PropertyChanged event.
Based on your statement:
I don't see the setter for myViewModel.TipoPasseio being called
That suggests that the TipoPasseio property isn't being changed. I.e. while you wouldn't be providing notification to Xamarin even if it did change, it's not changing anyway.
One property that does seem to be changing is the DsPadrao property (after all, it's the property that's actually providing the value for the binding). And while you don't provide enough details for us to know for sure, it seems like a reasonable guess that the DefinicaoServicoMobile doesn't implement INotifyPropertyChanged, and so there's no way for Xamarin to ever find out the value of that property might have changed either.
In other words, of all the things that Xamarin can see, the only one that it would be notified about of a change is the data context. And that doesn't seem to be what's changing in your scenario. None of the other values are held by properties backed by INotifyPropertyChanged.
Without a complete code example, it's impossible to know for sure what the right fix is. Depending on what's changing and how though, you need to implement INotifyPropertyChanged for one or more of your types that don't currently do so.
As it turns out, I wasn't firing the NotifyPropertyChanged of the correct object. Both MyViewModel and SomeAreaImpl implemented INotifyPropertyChanged per the Notifier class as BaseViewModel also extends from Notifier but that ended up ommited in my question. Having figured that out, here's an working (and complete) example:
public Notifier : BindableObject, INotifyPropertyChanged
{
//...
protected void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Specifics about DefinicaoServicoMobile are negligible to this issue
public interface ISomeArea
{
//...
DefinicaoServicoMobile TipoPasseio { get; set; }
Task SetServico(ServicoMobile servicoAtual;
//...
}
For the sake of clarification
public abstract class BaseViewModel : Notifier
{
protected abstract Task SetServico(ServicoMobile servicoAtual);
public async Task SetServico()
{
//...
await SetServico(servicoAtual);
//...
}
}
Changed a couple of things here. It no longer extends from Notifier, which was kinda weird to begin with. Also this is where I assign TipoPasseio
public class SomeAreaImpl : ISomeArea
{
//...
protected DefinicaoServicoMobile _tipoPasseio;
// I need to call the viewModel's Notifier, as this is the bound object
private BaseViewModel viewModel;
public AreaServicosDependentesImpl(BaseViewModel viewModel)
{
this.viewModel = viewModel;
}
public DefinicaoServicoMobile TipoPasseio
{
get => _tipoPasseio;
set
{
if (_tipoPasseio != value)
{
_tipoPasseio = value;
viewModel.NotifyPropertyChanged(nameof(TipoPasseio));
}
}
}
//Assigning to the property
public async Task SetServico(ServicoMobile servicoAtual, List<DefinicaoServicoMobile> listDefinicaoServico)
{
//...
TipoPasseio = listDefinicaoServico
.FirstOrDefault(x => x.CdServico == servicoAtual.TpPasseio.Value);
//...
}
}
Changes to the view model:
public MyViewModel : BaseViewModel, ISomeArea
{
private SomeAreaImpl someArea;
//...
public MyViewModel()
{
someArea = new SomeAreaImpl(this);
}
public DefinicaoServicoMobile TipoPasseio
{
get => someArea.TipoPasseio;
set => someArea.TipoPasseio = value;
}
protected override async Task SetServico(ServicoMobile servicoAtual)
{
//...
someArea.SetServico(servicoAtual, ListDefinicaoServico.ToList());
//...
}
}
View model binding
public abstract class BaseEncerrarPontoRotaPage : BasePage
{
private Type viewModelRuntimeType;
public BaseEncerrarPontoRotaPage(Type viewModelRuntimeType)
{
this.viewModelRuntimeType = viewModelRuntimeType;
}
private async Task BindContext(PontoRotaMobile pontoRota, ServicoMovelMobile servicoMovel, bool finalizar)
{
_viewModel = (BaseViewModel)Activator.CreateInstance(viewModelRuntimeType, new object[] { pontoRota, UserDialogs.Instance });
//...
await _viewModel.SetServico();
//...
BindingContext = _viewModel;
}
public static BaseEncerrarPontoRotaPage Create(EnumAcaoServicoType enumType)
{
Type pageType = enumType.GetCustomAttribute<EnumAcaoServicoType, PageRuntimeTypeAttribute>();
Type viewModelType = enumType.GetCustomAttribute<EnumAcaoServicoType, ViewModelRuntimeTypeAttribute>();
return (BaseEncerrarPontoRotaPage)Activator.CreateInstance(pageType, new object[] { viewModelType });
}
}
Page instantiation is performed in some other view model, not related to the structure presented here
private async Task ShowEdit(bool finalizar)
{
await Task.Run(async () =>
{
var idAcaoServico = ServicoMobileAtual.DefinicaoServicoMobile.IdAcaoServico;
var page = BaseEncerrarPontoRotaPage.Create((EnumAcaoServicoType)idAcaoServico);
await page.BindContext(PontoRotaAtual, ServicoMovelMobileAtual, finalizar);
BeginInvokeOnMainThread(async () =>
{
await App.Navigation.PushAsync(page);
});
});
}
Codebehind:
public partial class MyPage : BaseEncerrarPontoRotaPage
{
public NormalUnidadePage() { }
public MyPage(Type viewModelType) : base(viewModelType)
{
InitializeComponent();
//Subscription to show the list
TxtTipoPasseio.Focused += TxtTipoPasseio_OnFocused;
//...
}
}
XAML
<views:BaseEncerrarPontoRotaPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:My.Name.Space.;assembly=Phoenix.AS"
x:Class="My.Name.Space.MyPage">
//...
<renderers:Entry
x:Name="TxtTipoPasseio"
VerticalOptions="Center"
HeightRequest="60"
HorizontalOptions="FillAndExpand"
Text="{Binding TipoPasseio.DsPadrao}"/>
//...
</views:BaseEncerrarPontoRotaPage>
I know could propagate an event from the AreaImpl classes in order to fire the Notify event in the view model, but right now I'm satisfied with this solution.

Image source based on properties value in Xamarin.Forms

I've got a custom MyCachedImage that inherits from FFImageLoading.Forms.CachedImage, which is used in a ListView to display images.
The source of this image is composed by 2 properties: a custom object as entity and an integer as size.
Let's say if entity is a "city" object and size is 10 then the image source will be "http://..../city/10/image.png"
Image source must be setted only when both properties are valorized.
So, my answer is, how and when create the source url?
MyCachedImage.vb
public class MyCachedImage : CachedImage
{
public static readonly BindableProperty EntityProperty =
BindableProperty.Create(nameof(Entity), typeof(MyObject), typeof(MyCachedImage));
public MyObject Entity
{
get { return (MyObject)GetValue(EntityProperty); }
set { SetValue(EntityProperty, value); }
}
public static readonly BindableProperty SizeProperty =
BindableProperty.Create(nameof(Size), typeof(int), typeof(MyCachedImage), defaultValue: 0);
public int Size
{
get { return (int)GetValue(SizeProperty); }
set { SetValue(SizeProperty, value); }
}
public MyCachedImage()
{
??? set source here?
}
protected override void OnBindingContextChanged()
{
??? set source here?
}
}
MyPage.xaml
<ListView ....>
....
<control:MyCachedImage Size="10"
Entity="{Binding MyObject}"
WidthRequest="40"
HeightRequest="40" />
....
</ListView>
I was wondering on when create that string and I found the right solution.
The OnBindingContextChanged is called when all properties are setted, so:
protected override void OnBindingContextChanged()
{
base.OnBindingContextChanged();
if (_source == string.Empty)
{
Source = Helpers.ImageHelper.UriFromEntity(Entity, ImageSize);
}
}

Issue with bindings on attached properties in Xamarin.Forms

EDIT: Please, do not post answers on how to implement gestures in Xamarin.Forms - read the entire post first.
I'm creating a swipe gesture handlers as effects using the attached properties (as described in Xamarin guides). Skipping the approach discussion I have a strange issue with attached properties implementation.
Long story short (code below) - XAML bindings to attached properties are not working. The Set\Get...Command methods in my static class are not executed at all. I don't see any Debug.WriteLine() result in app output. The debugger doesn't hit the breakpoints set there as well. The same with ...CommandPropertyChanged() handler.
This is my class for the properties handling:
namespace Core.Effects
{
public static class Gesture
{
public static readonly BindableProperty SwipeLeftCommandProperty =
BindableProperty.CreateAttached("SwipeLeftCommand", typeof(ICommand), typeof(Gesture), null, propertyChanged: SwipeLeftCommandPropertyChanged);
public static readonly BindableProperty SwipeRightCommandProperty =
BindableProperty.CreateAttached("SwipeRightCommand", typeof(ICommand), typeof(Gesture), null, propertyChanged: SwipeRightCommandPropertyChanged);
public static ICommand GetSwipeLeftCommand(BindableObject view)
{
Debug.WriteLine("GetSwipeLeftCommand");
return (ICommand) view.GetValue(SwipeLeftCommandProperty);
}
public static void SetSwipeLeftCommand(BindableObject view, ICommand value)
{
Debug.WriteLine("SetSwipeLeftCommand");
view.SetValue(SwipeLeftCommandProperty, value);
}
public static ICommand GetSwipeRightCommand(BindableObject view)
{
Debug.WriteLine("GetSwipeRightCommand");
return (ICommand) view.GetValue(SwipeRightCommandProperty);
}
public static void SetSwipeRightCommand(BindableObject view, ICommand value)
{
Debug.WriteLine("SetSwipeRightCommand");
view.SetValue(SwipeRightCommandProperty, value);
}
private static void SwipeLeftCommandPropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
Debug.WriteLine("SwipeLeftCommandPropertyChanged");
// ...
}
private static void SwipeRightCommandPropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
Debug.WriteLine("SwipeRightCommandPropertyChanged");
// ...
}
// ...
}
}
and here is how I use it in XAML:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:effects="clr-namespace:Core.Effects"
x:Class="Core.Pages.RequestDetailsPage">
<ContentPage.Content>
<StackLayout Spacing="0"
Padding="0"
VerticalOptions="FillAndExpand"
effects:Gesture.SwipeLeftCommand="{Binding NavigateToPreviousRequestCommand}"
effects:Gesture.SwipeRightCommand="{Binding NavigateToNextRequestCommand}">
I have corresponding commands in my view model (MVVM implemented with FreshMvvm framework):
namespace Core.PageModels
{
public class RequestDetailsPageModel : FreshBasePageModel
{
public IRelayCommand NavigateToNextRequestCommand;
public IRelayCommand NavigateToPreviousRequestCommand;
IRelayCommand is my type deriving from ICommand. The BindingContext is properly set by FreshMvvm (works well in other places on this view).
Any clue what might be wrong?
I have done sample repo on GitHub, Check Below Link.
https://github.com/softlion/XamarinFormsGesture
https://github.com/tkowalczyk/SimpleCustomGestureFrame
http://arteksoftware.com/gesture-recognizers-with-xamarin-forms/
My mistake was pretty simple (and pretty hard to track either). Bindings do not operate on fields but on properties:
namespace Core.PageModels
{
public class RequestDetailsPageModel : FreshBasePageModel
{
public IRelayCommand NavigateToNextRequestCommand {get; set;}
public IRelayCommand NavigateToPreviousRequestCommand {get; set;}

XamlParseException Failed to assign to property. Binding not working with attached property

I want to create custom text box with attached property for Windows Store app. I am following this solution. Now it uses hard coded value as property value but I want to set value using binding, but it's not working. I tried to search a lot but didn't helped me any solution.
The exception details is like this
An exception of type 'Windows.UI.Xaml.Markup.XamlParseException'
occurred in CustomTextBox.exe but was not handled in user code
WinRT information: Failed to assign to property
'CustomTextBox.Input.Type'.
MainPage.xaml
<!-- local:Input.Type="Email" works -->
<!-- local:Input.Type="{Binding SelectedTextboxInputType}" not working -->
<TextBox x:Name="txt" local:Input.Type="{Binding SelectedTextboxInputType}" Height="30" Width="1000" />
<ComboBox x:Name="cmb" ItemsSource="{Binding TextboxInputTypeList}" SelectedItem="{Binding SelectedTextboxInputType}" Height="30" Width="200"
Margin="451,211,715,527" />
MainPage.xaml.cs
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
DataContext = new ViewModel();
}
}
Input.cs
//InputType is enum
public static InputType GetType(DependencyObject obj)
{
return (InputType)obj.GetValue(TypeProperty);
}
public static void SetType(DependencyObject obj, InputType value)
{
obj.SetValue(TypeProperty, value);
}
public static readonly DependencyProperty TypeProperty =
DependencyProperty.RegisterAttached("Type", typeof(InputType), typeof(TextBox), new PropertyMetadata(default(InputType), OnTypeChanged));
private static void OnTypeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (e.NewValue is InputType)
{
var textBox = (TextBox)d;
var Type = (InputType)e.NewValue;
if (Type == InputType.Email || Type == InputType.URL)
{
textBox.LostFocus += OnLostFocus;
}
else
{
textBox.TextChanged += OnTextChanged;
}
}
}
ViewModel.cs
public class ViewModel : BindableBase
{
public ViewModel()
{
TextboxInputTypeList = Enum.GetValues(typeof(InputType)).Cast<InputType>();
}
private InputType _SelectedTextboxInputType = InputType.Currency;
public InputType SelectedTextboxInputType
{
get { return _SelectedTextboxInputType; }
set { this.SetProperty(ref this._SelectedTextboxInputType, value); }
}
private IEnumerable<InputType> _TextboxInputTypeList;
public IEnumerable<InputType> TextboxInputTypeList
{
get { return _TextboxInputTypeList; }
set { this.SetProperty(ref this._TextboxInputTypeList, value); }
}
}
This is a pretty common mistake. The problem is, binding targets cannot be CLR properties in XAML. It's just the rules. A binding source can be a CLR property, just fine. The targets simply must be dependency properties.
We all get the error! :)
I describe the whole thing here: http://blogs.msdn.com/b/jerrynixon/archive/2013/07/02/walkthrough-two-way-binding-inside-a-xaml-user-control.aspx
Best of luck.
Incorrect
public static readonly DependencyProperty TypeProperty =
DependencyProperty.RegisterAttached("Type", typeof(InputType), typeof(TextBox), new PropertyMetadata(default(InputType), OnTypeChanged));
Correct
public static readonly DependencyProperty TypeProperty =
DependencyProperty.RegisterAttached("Type", typeof(InputType), typeof(Input), new PropertyMetadata(default(InputType), OnTypeChanged));

Custom Entity object property doesn't update in Silverlight DataGrid

I have a Silverlight Application with Domain Service.
Entity Object (Part Of) :
[EdmEntityTypeAttribute(NamespaceName="MiaoulisModel", Name="AbroadTravel")]
[Serializable()]
[DataContractAttribute(IsReference=true)]
public partial class AbroadTravel : EntityObject
{
/// <summary>
/// No Metadata Documentation available.
/// </summary>
[EdmScalarPropertyAttribute(EntityKeyProperty=false, IsNullable=true)]
[DataMemberAttribute()]
public global::System.String Description
{
get
{
return _Description;
}
set
{
OnDescriptionChanging(value);
ReportPropertyChanging("Description");
_Description = StructuralObject.SetValidValue(value, true);
ReportPropertyChanged("Description");
OnDescriptionChanged();
}
}
private global::System.String _Description;
partial void OnDescriptionChanging(global::System.String value);
partial void OnDescriptionChanged();
Here is my Partial Classe with Custom Property :
public partial class AbroadTravel : INotifyPropertyChanged
{
[DataMember]
public String ShortDescription
{
get
{
if (this.Description == null)
{
return this.Description;
}
if (this.Description.Contains("\n"))
{
var index = this.Description.IndexOf("\n");
if (index < 50)
{
return this.Description.Substring(0, index) + " [...]";
}
}
if (this.Description.Length >= 50)
{
return this.Description.Substring(0, 50) + " [...]";
}
return this.Description;
}
}
}
In my DataGrid, I have :
<c1:Column x:Name="dgcDescription" Binding="{Binding Path=ShortDescription}" Width="4*" />
And a RichTextBox with :
<c1:C1RichTextBox Text="{Binding Path=Description, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
When I update the RichTextBox which the Description value, the DataGrid with the ShortDescription does not update.
Any Idea ? (I do not use MVVM, I use the Code Behind)
You need to tell the UI that the property ShortDescription (an autocalculated property) has changed, when you change the property Description.
In order to do that, you need to raise the PropertyChanged-Event for the property ShortDescription when the property Description changed. Otherwise has the UI now chance to know that the property ShortDescription has changed and that it should update the binding.
In CodeBehind (in Silverlight-Client-Project) you can do it like so:
public partial class AbroadTravel
// omitted your code
partial void OnDescriptionChanged(){
RaisePropertyChanged("ShortDescription");
}
}