Binding Element to Property from Inherited Data Context

Question

I have a WPF control pane with sixteen of the same child control containing a combobox that needs to be bound to a list in the Parent Control code behind. I was really struggling to get this list to bind until I found this: Binding objects defined in code-behind.

Setting DataContext="{Binding RelativeSource={RelativeSource Self}}" on the Parent Control allowed me to bind the combobox on the child control directly.

The problem is that now I want to create a Data Template to display the list items properly, but nothing I put in the Binding or Relative Source Displays anything.

ControlPane.xaml

<UserControl
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         x:Class="ControlPane"
         x:Name="CtrlPaneWpf"
         DataContext="{Binding RelativeSource={RelativeSource Self}}"
         >

ControlPane.xaml.cs

public class TwoStringClass
{
    public string string1;
    public string colorHex;
}

public ObservableCollection<TwoStringClass> TwoStringClass1
{
    get
    {
        ObservableCollection<TwoStringClass> cmbclrs = new ObservableCollection<TwoStringClass>();
        cmbclrs.Add(new TwoStringClass() { string1 = "This", colorHex = "#FF0000" });
        cmbclrs.Add(new TwoStringClass() { string1 = "That", colorHex = "#FF352E2"  });
        cmbclrs.Add(new TwoStringClass() { string1 = "The Other", colorHex = "#FFF4F612"  });
        return cmbclrs;
    }    
}

ChildControl.xaml

<UserControl
            x:Name="ChildControl"
            >
            <ComboBox x:Name="cmbFontColor" ItemsSource="{Binding TwoStringClass1}" >
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding string1}"  />
                            <Rectangle Fill="{Binding colorHex}" />
                        </StackPanel>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
</UserControl>

I know the Binding is Working because I get the correct number of (blank) items in the Combobox and can see the class name if I remove the ItemTemplate.

I can't figure out for the life of me why binding to the property name isn't working here as it does when the list comes from a control's own code behind.

There must be some other information I need to add to the TextBlock binding, but no matter what DataContext or RelativeSource I try, I always get blank items.

Clemens · Accepted Answer · 2015-05-13T16:42:49.700

1

Data binding in WPF works with public properties only, not with fields. Your item class should look like this:

public class TwoStringClass
{
    public string string1 { get; set; }
    public string colorHex { get; set; }
}

That said, there are widely accepted naming convention, according to which you should use Pascal case for property names, e.g. String1 and ColorHex.

edited May 13 '15 at 16:42

answered May 13 '15 at 16:36

Clemens

123,504
12
155
268

score 0 · Answer 2 · edited May 23 '17 at 12:14

I believe the answer to your question is the same as the answer to a question I posted recently, which was answered by StewBob. Here is my slightly modified version of his answer, which should also fix the issue you are having.

You can see my original thread here: WPF ListBox with CheckBox data template - Binding Content property of Checkbox not working

I see you added "This", "That", and "The Other" as your data source, presumably for simplicity in posting this question to SO. Please be aware that if your true underlying data source can change, when doing DataBinding, your class needs to implement INotifyPropertyChanged for the data to properly display in the UI. An example:

public class TwoStringClass: INotifyPropertyChanged
{

  private string _String1;
  private string _ColorHex;

  public string String1
  {
    get
    {
      return _String1;
    }
    set
    {
      if (value != _String1)
      {
        _String1 = value;
        NotifyPropertyChanged("String1");
      }
    }
  }

  public string ColorHex
  {
    get
    {
      return _ColorHex;
    }
    set
    {
      if (value != _ColorHex)
      {
        _ColorHex = value;
        NotifyPropertyChanged("ColorHex");
      }
    }
  }

  private void NotifyPropertyChanged(string info)
  {
    if (PropertyChanged != null)
    {
      PropertyChanged(this, new PropertyChangedEventArgs(info));
    }
  }

  public event PropertyChangedEventHandler PropertyChanged;
}

This shows the class, two properties, and the needed event and method for implementing INotifyPropertyChanged.

Just for your information. Implementing INotifyPropertyChanged is only necessary if you need a potential binding to be updated whenever the source property of the binding changes its values. As long as that isn't necessary (which seems to be the case in the question), it is perfectly valid not to implement this interface. The binding itself works well without any change notification. So your statement "your class needs to implement INotifyPropertyChanged for the data to properly display in the UI" is not true. Not implementing the interface is in no way "a bug". — Clemens, May 13 '15 at 18:44
The bug comment is in reference to a situation in which the underlying data is changing, as indicated in my comment. The original poster added strings "This", "That", and "The Other" in his question, which is likely simplified data for purposes of posting this question to SO. Someone who stumbles upon this and implements this solution without seeing any reference to this only working for a static data source is going to encounter a bug, whereas an answer calling out the difference and the reason why you may need iNotifyPropertyChanged will not result in a bug (in the application). — Bobby, May 13 '15 at 19:09

Binding Element to Property from Inherited Data Context

2 Answers2