Develop Reference

Xamarin BindableProperty works with binding only when I don't use BindingContext

in Xamarin Forms I created a Page that contains a custom component which I want to feed a value just like this:
<c:CustomComponent Test="{Binding Test}" />
This, however, doesn't work. When I use a raw number instead of the Binding it works. The problem that I figured out was, that my custom component used a ViewModel / BindingContext. So when I remove the line where I assign my ViewModel to the BindingContext the Binding works.
why is that so and how can I use use both, the BindingContext as well as BindableProperty within my custom component? Or do I have to do everything within my code behind?
For reference some code example how I created the BindableProperty
public static readonly BindableProperty TestProperty = BindableProperty.Create(nameof(Test), typeof(int),
typeof(CustomComponent), propertyChanged: (bindable, oldVal, newVal) => {
Debug.WriteLine("TEST " + newVal);
});
public int Test {
get => (int)GetValue(TestProperty);
set => SetValue(TestProperty, value);
}

"my custom component used a ViewModel / BindingContext."
Its easier to create a reusable custom component, if it is "self-contained" - no BindingContext.
Constructor:
public CustomComponent()
{
InitializeComponent();
}
Move EVERYTHING you currently have in the component's viewmodel, into the xaml.cs code behind file.
Now in CustomComponent.xaml, give it a name (here theComponent):
<ContentView ...
x:Name="theComponent"
x:Class=...>
This comes in handy when component's xaml wants to bind to a property in itself:
<Label Text="{Binding TestString, Source={x:Reference theComponent}}" />
public string TestString
{
get => _testString;
set {
_testString = value;
OnPropertyChanged();
}
}
private string _testString = "test";
tl;dr: If component has an x:Name="theComponent" in its xaml, can use {Binding ..., Source={x:Reference theComponent}}, to refer to its own properties. No BindingContext needed.
If you want the component to have an associated ViewModel, with the above technique you don't have to set BindingContext to that VM. Do it like this:
public class MyViewModel
{
public string TestString
{
get => _testString;
set {
_testString = value;
OnPropertyChanged();
}
}
private string _testString = "test";
}
CustomComponent:
public MyViewModel VM { get; private set; }
public CustomComponent()
{
InitializeComponent();
VM = new MyViewModel();
}
Usage in xaml:
<Label Text="{Binding VM.TestString, Source={x:Reference theComponent}}" />

Binding change not pushed back to gui

I have the following code somewhere (using C# and UWP):
public static readonly DependencyProperty SupportsFineChannelProperty = DependencyProperty.Register(
"SupportsFineChannel", typeof(bool), typeof(ChannelGroupView),
new PropertyMetadata(default(bool)));
public bool SupportsFineChannel {
get { return (bool) GetValue(SupportsFineChannelProperty); }
set { SetValue(SupportsFineChannelProperty, value); }
}
and in my gui I use it with
<TextBox Text="{Binding FineChannel, Mode=TwoWay}" IsEnabled="{Binding SupportsFineChannel, Mode=TwoWay}" />
<CheckBox IsChecked="{Binding SupportsFineChannel, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">Supports Fine Channel</CheckBox>
Now I have a (for my understanding) unusual behaviour. If I load the frame while the SupportFineChannel is false, the Textbox is disabled. Check. If I do the same while the bool is true, the Textbox is enabled. Check, binding works.
Now the strange part is that the TextBox won't change its IsEnabled value if I change it trough the checkbox.
With the debugger I confirmed:
The Evaluated Binding value of the CheckBox gets changed
The binding properly propagates to the Variable in the backend which changes as expected
The evaluated textbox binding value though does not take note of the changed DepProp.
I have set the binding to OneWay and TwoWay, both do not alter this behaviour. Why does the DepProp not propagate the change back to the bindings?
EDIT
I just tested it with different properties. Fact is, no dependency property pushes values back to the gui when it changes... srsly?
EDIT2
INotifyPropertyChanged does work though.. Is there some different behaviour with DepProps on UWP that I'm not aware of?
EDIT3
It was easier than I thought to create a repro sample. So nothing crazy with my setups..
For anyone interested, here it is.
In case the link goes down sometime or you don't trust me;
I created a new UWP blank project with target version 10.0, 15063, Min Version 10.0 10586
Create a DataView and a ItemView
public class DataView : DependencyObject {
public static readonly DependencyProperty ItemStuffProperty = DependencyProperty.Register(
"ItemStuff", typeof(ObservableCollection<ItemView>), typeof(DataView),
new PropertyMetadata(default(ObservableCollection<ItemView>)));
public ObservableCollection<ItemView> ItemStuff {
get { return (ObservableCollection<ItemView>) GetValue(ItemStuffProperty); }
set { SetValue(ItemStuffProperty, value); }
}
public DataView() {
ItemStuff = new ObservableCollection<ItemView>();
}
}
public class ItemView : DependencyObject {
public static readonly DependencyProperty SupportsStuffProperty = DependencyProperty.Register(
"SupportsStuff", typeof(bool), typeof(ItemView), new PropertyMetadata(default(bool)));
public bool SupportsStuff {
get { return (bool) GetValue(SupportsStuffProperty); }
set { SetValue(SupportsStuffProperty, value); }
}
public static readonly DependencyProperty TextStuffProperty = DependencyProperty.Register(
"TextStuff", typeof(string), typeof(ItemView), new PropertyMetadata(default(string)));
public string TextStuff {
get { return (string) GetValue(TextStuffProperty); }
set { SetValue(TextStuffProperty, value); }
}
}
Add the DataView and an example Item to your codebehind
public static readonly DependencyProperty DataProperty = DependencyProperty.Register(
"Data", typeof(DataView), typeof(MainPage), new PropertyMetadata(default(DataView)));
public DataView Data {
get { return (DataView) GetValue(DataProperty); }
set { SetValue(DataProperty, value); }
}
public MainPage() {
Data=new DataView();
Data.ItemStuff.Add(new ItemView());
this.InitializeComponent();
}
Set your Datacontext to DataContext="{Binding RelativeSource={RelativeSource Self}, Path=Data}"
Add your Listbox
<ListBox ItemsSource="{Binding ItemStuff}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBox Text="{Binding TextStuff}" IsEnabled="{Binding SupportsStuff, Mode=OneWay}" />
<CheckBox IsChecked="{Binding SupportsStuff, Mode=TwoWay}"> Supports Stuff</CheckBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
???
Profit!

DepencyProperty not being update from binding on UserControl

So, I am trying to create a UserControl with some DependencyProperties so that I can reuse code. However, some properties are not being update, while others are. What is even weirder is that even for those properties that are being updated the method "set" is not being called at all.
Here is my code:
On the ViewModel:
public ICommand TestCommand = new DelegateCommand(x => MessageBox.Show("Ocorreu Evento"));
public List<string> TestList = new List<string> { "Hello","This","is","a","Test" };
On the View:
<views:CustomizedList Header="Testing"
Items="{Binding TestList}"/>
The User control view:
<StackPanel>
<Label Content="{Binding Header}" />
<ListBox ItemsSource="{Binding Items}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="Hello"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
The user control code:
public string Header
{
get { return (string)GetValue(HeaderProperty); }
set
{
MessageBox.Show("New header is " + value);
SetValue(HeaderProperty, value);
}
}
public BindingList<object> Items
{
get { return (BindingList<object>)GetValue(ItemsProperty); }
set {
SetValue(ItemsProperty, value);
Console.WriteLine("Value was set with " + value.Count + " items.");
}
}
public static readonly DependencyProperty HeaderProperty =
DependencyProperty.Register("Header", typeof(string),
typeof(ListaCustomizada));
public static readonly DependencyProperty ItemsProperty =
DependencyProperty.Register("Items", typeof(BindingList<object>),
typeof(ListaCustomizada));
The Header is showing up, but the Items are not. Not that I added some console prints to check if the methods are being called, but nothing shows up, even for the Header. I am setting the DataContext of the UserControl to be itself.
Any ideas?
EDIT:
Following #Garry Vass sugestion, I added a Callback function. The new code is:
public static readonly DependencyProperty HeaderProperty =
DependencyProperty.Register("Header", typeof(string),
typeof(ListaCustomizada), new PropertyMetadata("", ChangedCallback));
public static readonly DependencyProperty ItemsProperty =
DependencyProperty.Register("Items", typeof(BindingList<object>),
typeof(ListaCustomizada), new PropertyMetadata(new BindingList<object>(), ChangedCallback));
private static void ChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
Console.WriteLine("Dependency property is now " + e.NewValue);
}
With this I can see the value of Header changing, but there's no callback happening for Items.
EDIT:
Changed the TestList to be property instead of field, an it's type to BindingList to be consistent with the data in the user control, still same results.
public BindingList<object> TestList { get; set; }
public ViewModel()
{
TestList = new BindingList<object> { "Hello", "This", "is", "a", "Test" };
}
EDIT:
Testing more I found out that the error comes from the fact that the DP ont eh usercontrol is binded to a DP on the view, which is binded to the VM.
EDIT:
Finally got it to work. Searching a little deeper i found this link at codeproject that explains perfectly how to create usercontrols.

While it may seem counter-intuitive, the WPF binding engine basically ignores the setter and getter in your code and uses its own version which lies deep within the WPF plumbing. So any code you put there to intervene, or in your case, to inspect, will just lie unexecuted.
So why are they there at all? They are helpers at compile time and also give your Xaml something to connect to.
If you want to intervene or inspect what's happening with a Dependency Property, you can declare it like this...
#region MyProperty (DependencyProperty)
public int MyProperty
{
get { return (int)GetValue(MyPropertyProperty); }
set { SetValue(MyPropertyProperty, value); }
}
public static readonly DependencyProperty MyPropertyProperty =
DependencyProperty.Register("MyProperty", typeof(int), typeof(MainWindow),
new PropertyMetadata(0, ChangedCallback));
private static void ChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
Console.WriteLine("Dependency property is now " + e.NewValue);
}
#endregion
This declares a Dependency Property with a Property Changed call back. WPF will invoke it whenever the property is set.
You will see the changes happening in the call back method by anchoring your debugger where the Console statement is.

Create a proxy for a dependency property

I am trying to create a simple dependency property proxy. I made a custom control, it's a file picker, which is made off a textbox (name: "TextBox_FilePath") and a button showing the open file dialog.
As I am making a reusable control I'd like it to have a "SelectedFilePath" property. As the Text property seems to be perfect for my control to be the "SelectedFilePath" property, I'd just like to proxy these dependency property.
The first approach I made was:
public static readonly DependencyProperty SelectedFilePathProperty = TextBox.TextProperty;
public string SelectedFilePath
{
get { return (string) this.TextBox_FilePath.GetValue(SelectedFilePathProperty); }
set { this.TextBox_FilePath.SetValue(SelectedFilePathProperty, value); }
}
which worked, but throwed an exception when trying to bind to that property. Then I came off with:
public static readonly DependencyProperty SelectedFilePathProperty =
DependencyProperty.Register("SelectedFilePath", typeof (string), typeof (FilePicker), new PropertyMetadata(default(string)));
public string SelectedFilePath
{
get { return (string) this.TextBox_FilePath.GetValue(SelectedFilePathProperty); }
set { this.TextBox_FilePath.SetValue(SelectedFilePathProperty, value); }
}
which does work, but I've got no idea why?! Where did I specify I wanted the text property of the textbox?
What am I missing to simply proxy out that dependency property?
EDIT:
The solution with AddOwner doesn't work too, it throws an Excetion saying "binding can only be applied on a dependency property". Code:
public static readonly DependencyProperty SelectedFilePathProperty =
TextBox.TextProperty.AddOwner(typeof(FilePicker));
public string SelectedFilePath
{
get { return (string)this.TextBox_FilePath.GetValue(SelectedFilePathProperty); }
set { this.TextBox_FilePath.SetValue(SelectedFilePathProperty, value); }
}
What don't I understand?
EDIT2:
For everybody else having issues understanding the answer, I've made a little graphic

The first approach does not work because the property is registered only for the TextBox, adding a reference in another class does nothing.
The second one just creates a whole new string property.
If you really want to reuse the TextBox.TextProperty call AddOwner on it.
e.g.
public static readonly DependencyProperty SelectedFilePathProperty =
TextBox.TextProperty.AddOwner(typeof(FilePicker));
(Note that this property is registered as "Text", so you probably should just create a new property with the name you want as you did already. I would also recommend to set metadata flags to bind two-way by default if you want to have the same binding behaviour as TextBox.Text.)

This solution is a little tricky but works.
Given this user control:
<Grid>
<StackPanel>
<WpfApplication1:FilePicker SelectedFilePath ="{Binding MyProperty, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBlock Text="{Binding MyProperty}" />
</StackPanel>
</Grid>
And its viewmodel:
public class MainWindowViewModel : INotifyPropertyChanged
{
#region Implementation of INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string e)
{
var handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(e));
}
#endregion
private string _myProperty;
public string MyProperty
{
get { return _myProperty; }
set
{
_myProperty = value;
OnPropertyChanged("MyProperty");
}
}
}
XAML for FilePicker control:
<Grid>
<TextBox x:Name="TextBox_FilePath" DataContext="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type WpfApplication1:FilePicker}}}" Text="{Binding SelectedFilePath, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</Grid>
CodeBehind for FilePicker control:
public partial class FilePicker : UserControl
{
public FilePicker()
{
InitializeComponent();
}
/* private PROXY DP*/
private static readonly DependencyProperty TextProperty =
TextBox.TextProperty.AddOwner(typeof(FilePicker));
/* public DP that will fire getter/setter for private DP */
public static readonly DependencyProperty SelectedFilePathProperty =
DependencyProperty.Register("SelectedFilePath", typeof(string), typeof(FilePicker), new PropertyMetadata(default(string)));
public string SelectedFilePath
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
}
Works like a charm.

As I had issues understanding H.B.s answer I made a little graphic which helped me to understand what's going on under the hood. Here it is;
Maybe it helps someone else :)

WPF Control's Nested property's data binding

I'm trying to develop user control with some nested properties that allows to use databinding to set it. For example, I have something like this:
// Top level control
public class MyControl : Control
{
public string TopLevelTestProperty
{
get { return (string)GetValue(TopLevelTestPropertyProperty); }
set { SetValue(TopLevelTestPropertyProperty, value); }
}
public static readonly DependencyProperty TopLevelTestPropertyProperty =
DependencyProperty.Register("TopLevelTestProperty", typeof(string), typeof
(MyControl), new UIPropertyMetadata(""));
// This property contains nested object
public MyNestedType NestedObject
{
get { return (MyNestedType)GetValue(NestedObjectProperty); }
set { SetValue(NestedObjectProperty, value); }
}
public static readonly DependencyProperty NestedObjectProperty =
DependencyProperty.Register("NestedObject", typeof(MyNestedType), typeof
(MyControl), new UIPropertyMetadata(null));
}
// Nested object's type
public class MyNestedType : DependencyObject
{
public string NestedTestProperty
{
get { return (string)GetValue(NestedTestPropertyProperty); }
set { SetValue(NestedTestPropertyProperty, value); }
}
public static readonly DependencyProperty NestedTestPropertyProperty =
DependencyProperty.Register("NestedTestProperty", typeof(string), typeof
(MyNestedType), new UIPropertyMetadata(""));
}
// Sample data context
public class TestDataContext
{
public string Value
{
get
{
return "TEST VALUE!!!";
}
}
}
...
this.DataContext = new TestDataContext();
...
XAML:
<local:mycontrol x:name="myControl" topleveltestproperty="{Binding Value}" >
<local:mycontrol.nestedobject>
<local:mynestedtype x:name="myNestedControl" nestedtestproperty="{Binding Value}" />
</local:mycontrol.nestedobject>
</local:mycontrol>
It works well for property TopLevelTestProperty, but it doesn't work for NestedTestProperty.
It seems that nested bindings do not work. Can anybody help me please? Is there any way to make such binding?
I think that it happens because of my nested object has no any reference to the top level object, so it cannot be resolved using MyControl's DataContext.

H.B. right, nested control does not inherit DataContext from mycontrol.
Tyr out setting it explicitly:
<local:mycontrol x:name="myControl"
topleveltestproperty="{Binding Value}" >
<local:mycontrol.nestedobject>
<local:mynestedtype x:name="myNestedControl"
DataContext="{Binding ElementName=myControl,
Path=DataContext}"
nestedtestproperty="{Binding Value}" />
</local:mycontrol.nestedobject>
</local:mycontrol>