XAML Binding to custom control

Question

I have built a custom control and want to know how to properly bind in XAML to a property of an item in an Observable collection in the custom control. The custom control property looks like this.

Public Property MyPoints As ObservableDependencyObjectCollection(Of MyPoint)
    Get
        Return CType(GetValue(MyPointsProperty), ObservableDependencyObjectCollection(Of MyPoint))
    End Get
    Set(value As ObservableDependencyObjectCollection(Of MyPoint))
        SetValue(MyPointsProperty, value)
    End Set
End Property

MyPoint contains two properties X and Y

Full XAML

<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" xmlns:my="clr-namespace:WpfDependencyPropertyVB">

<Grid>
    <my:CustomControl1   HorizontalAlignment="Left" Margin="322,212,0,0" x:Name="CustomControl11" VerticalAlignment="Top" Width="145" Height="67">
        <my:CustomControl1.MyPoints>
            <my:MyPoint X="100" Y="{Binding Value, ElementName=Slider1}" />
        </my:CustomControl1.MyPoints>
    </my:CustomControl1>
    <Slider Height="26" HorizontalAlignment="Left" Margin="23,174,0,0" Name="Slider1" VerticalAlignment="Top" Width="273" />
    <Label Content="{Binding Value, ElementName=Slider1}" Height="41" HorizontalAlignment="Left" Margin="329,145,0,0" Name="Label1" VerticalAlignment="Top" Width="135" />
</Grid>

enter code here

In My XAML the set up looks like this:

<my:CustomControl1 x:Name="CustomControl11" >
    <my:CustomControl1.MyPoints>
        <my:MyPoint X="100" Y="{Binding Value, ElementName=Slider1}" />
    </my:CustomControl1.MyPoints>
</my:CustomControl1>

If I set a break point in my control I can see that X=100 but i don't see that Y is updated when the Slider Value changes.

Any help would be greatly appreciated.

Check the Visual Studio output window. There might be binding errors shown there. — Federico Berasategui
That is correct but i'm still not shure how to properly bind. the error I get "System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:Path=Value; DataItem=null; target element is 'MyPoint' (HashCode=16014678); target property is 'Y' (type 'Double')" — Paul
I don't understand what you're trying to do. Which item in the collection are you trying to bind to, the first or the hundredth? Is there an item in the collection? — Phil

Phil Phil · Accepted Answer · 2013-04-07T16:43:53

My solution would be to add a dependency property ThePoint to CustomControl1 and then bind the slider value to ThePoint.Y. I'm assuming that MyPoint derives from DependencyObject and that X and Y are dependency properties.

<my:CustomControl1 x:Name="theControl" />

<Slider Grid.Row="1" Value="{Binding ElementName=theControl, 
        Path=ThePoint.Y, Mode=TwoWay}"/>

You could then add PropertyChangedCallback handlers as required to add items to the collection (if that's what's required).

Alternatively you can bind to an item in the collection:

<local:MyCustomControl x:Name="theControl" />

<Slider Grid.Row="1" Value="{Binding ElementName=theControl, 
        Path=MyPoints[0].Y, Mode=TwoWay}" />

XAML Binding to custom control

1 Answers