Why is two-way data-binding not working in WPF?

Question

I am working on a small university project where I need to read a Lua file with some tables and functions and make a shape out of it. That's done.

The problem is when I try to make it interactive. Here's my XAML:

<Window x:Class="Gemi.WPF.VentanaPrincipal"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Gemi.WPF"
        Title="GEMI - Geometría Interactiva!" Height="350" Width="525">
    <Window.Resources>
        <local:DoblesAPunto x:Key="DoblesAPunto"/>
    </Window.Resources>
    <DockPanel LastChildFill="True" Background="White">
        <Grid DockPanel.Dock="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Label Content="Figura Seleccionada: "/>
            <ComboBox Name="cbFiguras" HorizontalAlignment="Stretch" Grid.Column="1" 
                      ItemsSource="{Binding Path=Figuras}" DisplayMemberPath="Nombre" SelectionChanged="cbFiguras_FiguraSeleccionada" />
        </Grid>
        <ScrollViewer DockPanel.Dock="Bottom" Name="scrollPropiedades" 
                      Height="Auto" VerticalScrollBarVisibility="Auto">
            <DockPanel Name="dpPropiedades">
                <StackPanel Orientation="Vertical" Name="spNombres" DockPanel.Dock="Left"/>
                <StackPanel Orientation="Vertical" Name="spValores" DockPanel.Dock="Right" Margin="10, 0, 0, 0"/>
            </DockPanel>
        </ScrollViewer>
        <DockPanel LastChildFill="True">
            <Slider Name="controlZoom" DockPanel.Dock="Bottom" Value="1" 
                    Maximum="50" Minimum="0.1" Orientation="Horizontal" ToolTip="Controla el zoom de la figura"/>
            <ItemsControl x:Name="cnvFigura" ItemsSource="{Binding Puntos}">
                <ItemsControl.LayoutTransform>
                    <ScaleTransform 
                    CenterX="0" CenterY="0"
                    ScaleX="{Binding ElementName=controlZoom,Path=Value}"
                    ScaleY="{Binding ElementName=controlZoom,Path=Value}"/>
                </ItemsControl.LayoutTransform>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Path Fill="Black" local:DragCanvas.CanBeDragged="True" 
                              local:DragCanvas.Top="{Binding Y, Mode=TwoWay}" 
                              local:DragCanvas.Left="{Binding X, Mode=TwoWay}">
                            <Path.Data>
                                <EllipseGeometry RadiusX="5" RadiusY="5">
                                    <EllipseGeometry.Center>
                                        <MultiBinding Converter="{StaticResource DoblesAPunto}">
                                            <Binding Path="X" />
                                            <Binding Path="Y" />
                                        </MultiBinding>
                                    </EllipseGeometry.Center>
                                </EllipseGeometry>
                            </Path.Data>
                            <Path.ToolTip>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="X = " Grid.Column="0" Grid.Row="0"/>
                                    <TextBlock Text="{Binding X}" Grid.Column="1" Grid.Row="0"/>
                                    <TextBlock Text="Y = " Grid.Column="0" Grid.Row="1"/>
                                    <TextBlock Text="{Binding Y}" Grid.Column="1" Grid.Row="1"/>
                                </Grid>
                            </Path.ToolTip>
                        </Path>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <local:DragCanvas IsItemsHost="True"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </DockPanel>
    </DockPanel>
</Window>

The issue in question is that the binding does not update. The "Punto" object's setters are never called even if I drag the ellipses making up the DataTemplate. Any ideas?

Also, why do I seem to need to bind the center of the ellipses? If I only bind DragCanvas' Top/Bottom/Left/Right all the points are drawn at 0,0, and this induces a problem as i can't drag the points further left nor top where they initially were.

Answer 1

This might be caused because Drag-n-drop does not modify the Canvas.Left and Canvas.Top but instead uses a Transformation (Translation).

Binding to this Translation might be tricky because I expect that the drag-n-drop system adds this transformation to the transformation group. So it will not update a translation you added to the Transformations.