Binding doesn't work when using custom control in DataTemplate

Question

I'm trying to replace a standard control inside ListView DataTemplate with a custom control, but binding doesn't seem to work properly. Here is the definition of the ListView:

<Grid>
    <ListView ItemsSource="{Binding DataItemsCollection}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="Static text" />
                    <TextBlock Text="{Binding DataItemText}" />
                    <BindingTest:CustomControl CustomText="{Binding DataItemText}" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

Where DataItemsCollection is an observable collection of type

public class DataItemClass : INotifyPropertyChanged
{
    string _dataItemText;
    public string DataItemText
    {
        get { return _dataItemText; }
        set { _dataItemText = value; Notify("DataItemText");  }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void Notify(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

And main window code looks like this:

public partial class MainWindow : Window
{
    public ObservableCollection<DataItemClass> _dataItemsCollection = new ObservableCollection<DataItemClass>
        { 
            new DataItemClass { DataItemText = "Test one" },
            new DataItemClass { DataItemText = "Test two" },
            new DataItemClass { DataItemText = "Test three" }
        };

    public ObservableCollection<DataItemClass> DataItemsCollection
    {
        get { return _dataItemsCollection; }
    }

    public MainWindow()
    {
        InitializeComponent();

        DataContext = this;
    }
}

Custom control is simple:

<StackPanel Orientation="Horizontal">
    <Label Content="Data Item:" />
    <TextBlock Text="{Binding CustomText, Mode=OneWay}" />
</StackPanel>

With CustomText defined as

    public static DependencyProperty CustomTextProperty = DependencyProperty.Register(
        "CustomText", typeof(string), typeof(CustomControl), new FrameworkPropertyMetadata("", FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

    public string CustomText
    {
        get { return (string)GetValue(CustomTextProperty); }
        set { SetValue(CustomTextProperty, value); }
    }

When I run this project I see correct text in second TextBlock in DataTemplate, but not inside of a custom control. What am I doing wrong?

max max · Accepted Answer · 2012-12-27T00:22:45

By default Binding is relative to DataContext, which is DataItemClass in your case, but CustomText property is declared in CustomControl. You need to specify relative binding source:

<TextBlock Text="{Binding Path=CustomText,
                          RelativeSource={RelativeSource Mode=FindAncestor,
                                    AncestorType=BindingTest:CustomControl}}" />

If your control is going to stay that simple, you can completely remove CustomText property and change <TextBlock Text="{Binding CustomText, Mode=OneWay}" /> to just <TextBlock Text="{Binding DataItemText} />.

Binding doesn't work when using custom control in DataTemplate

1 Answers