Error binding CustomControl to Items of a ObservableCollection inside the Datatemplate of a DataGrid

Question

I have a DataGrid that have as Source an ObservableCollection of Site. I have some columns that are defined in a DataTemplate binding to properties of Site. The binding works perfectly when using builtin controls like TextBlock but I am not able to do it with a custom control. I have seen that this error appears in the console but I do not understand exactly what I have to do:

System.Windows.Data Error: 40 : BindingExpression path error: 'Port' property not found on 'object' ''TestControl' (Name='')'. BindingExpression:Path=Port; DataItem='TestControl' (Name=''); target element is 'TestControl' (Name=''); target property is 'CameraName' (type 'String')

Here I attach snippets of the code I use;

DataGrid:

<DataGrid Name="SitesList" CanUserReorderColumns="True"  
                  ItemsSource="{Binding ViewModel.Sites}"
                  PreparingCellForEdit="DataGrid_PreparingCellForEdit" 
                  >                      
<DataGrid.Resources>
    <DataTemplate x:Key="CameraTemplate">
        <Grid>
            <hv:TestControl CameraName="{Binding Path=Port}"/>
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="PortTemplate">
        <TextBox x:Name="PortTextBox"
            Text="{Binding Path=Port, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    </DataTemplate>
</DataGrid.Resources>
<DataGrid.Columns>
    <DataGridTemplateColumn Header="Camera"
                            CellTemplate="{StaticResource CameraTemplate}"
                            MinWidth="100"/>
    <DataGridTemplateColumn Header="Port"
                            CellTemplate="{StaticResource PortTemplate}"
                            MinWidth="70"/>
</DataGrid.Columns></DataGrid>

ObservableCollection:

    private ObservableCollection<Site> m_sites = new ObservableCollection<Site>();
    public ObservableCollection<Site> Sites
    {
        get
        {
            return m_sites;
        }
        set
        {
            m_sites = value;
        }
    }

Site.cs:

namespace Wizard.View
{
    public class Site: INotifyPropertyChanged
    {
        #region properties
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null) {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }
        private string m_port = "0";
        public string Port
        {
            get
            {
                return m_port;
            }
            set
            {
                m_port = value;
                NotifyPropertyChanged("Port");
            }
        }
        #endregion        
    }
}

TestControl.xaml.cs:

namespace Wizard.View.HelpersViews
{
    public partial class TestControl: UserControl
    {
        public TestControl()
        {
            InitializeComponent();
        }

        public string CameraName
        {
            get { return (string)GetValue(CameraNameProperty); }
            set {
                Console.WriteLine(value);
                SetValue(CameraNameProperty, value);
                CameraNameTextBlock.Text = value;
            }
        }

        public static readonly DependencyProperty CameraNameProperty =
            DependencyProperty.Register("CameraName",
                                        typeof(string),
                                        typeof(TestControl),
                                        new PropertyMetadata("0"));
    }
}

TestControl.xaml:

<UserControl
             x:Class="Wizard.View.HelpersViews.TestControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             DataContext="{Binding RelativeSource={RelativeSource Self}}"
             d:DesignHeight="100" d:DesignWidth="300">
    <StackPanel Orientation="Horizontal" Height="Auto" HorizontalAlignment="Left">
        <CheckBox Margin ="5,0" Name="AddCameraCheck"
                  VerticalAlignment="Center" Style="{StaticResource ConfiguratorCheckBox}" />
        <TextBlock x:Name="CameraNameTextBlock" Width="175" Text="{Binding CameraName}" />
    </StackPanel>
</UserControl>

The column Port is bound correctly but Camera is not.

Answer 1

The TextBlock in the TestControl should bind to the CameraName property of itself:

<TextBlock x:Name="CameraNameTextBlock" Width="175" Text="{Binding CameraName, 
                                       RelativeSource={RelativeSource AncestorType=UserControl}}" />

...but you should remove this for the control to inherit the DataContext from the DataGridRow:

DataContext="{Binding RelativeSource={RelativeSource Self}}"

Also the CLR wrapper of a dependency property should only call GetValue and SetValue:

public string CameraName
{
    get { return (string)GetValue(CameraNameProperty); }
    set { SetValue(CameraNameProperty, value); }
}