Specific binding in C#/WPF

That's me again with my bindings :)

Here is the problem, I need to have on my GRID two controls connected with a LINE. So I can move with mouse one of the controls around GRID and LINE, that conne开发者_如何学编程ct this two controls must replace immediately while moving.

Any ideas? I thought that calculate new X1,Y1,X2,Y2 of the LINE on every 1px move impossible and very speedless... So I think that there is the way to create BINDINGS for LINE's X1,Y1,X2,Y2, such as:

x1={Binding firstCtrl.Position.X+firstCtrl.Width/2}

But such binding is very hard (for me) even in XAML, but I need to create such binding dynamically in C# code.

Need your advice again, how to create such binding in C# or there is another way to realize my idea?

P.S."I don't need whole code for that, just description and, maybe, simple example of code."

Thanks a lot.

You could use a MultiValueConverter to gather the points of interest and return the X or Y point as needed.

Here is a good blog post discussing their use.

Try this:

<Window x:Class="WpfApplication1.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">
<Window.Resources>
    <ResourceDictionary>
        <ControlTemplate x:Key="template1">
            <Ellipse Width="30" Margin="-15 -15" Height="30" Fill="Black"/>
        </ControlTemplate>
    </ResourceDictionary>
</Window.Resources>

<Canvas Name="myCanvas">
    <Thumb Name="myThumb" DragDelta="onDragDelta" Canvas.Left="0" Canvas.Top="30" Template="{StaticResource template1}"/>
    <Thumb Name="myThumb2" DragDelta="onDragDelta" Canvas.Left="400" Canvas.Top="30" Template="{StaticResource template1}"/>
    <Line X1="{Binding ElementName=myThumb,Path=(Canvas.Left)}" Y1="{Binding ElementName=myThumb,Path=(Canvas.Top)}" X2="{Binding ElementName=myThumb2,Path=(Canvas.Left)}" Y2="{Binding ElementName=myThumb2,Path=(Canvas.Top)}" Stroke="Black" />
</Canvas>

code behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Controls.Primitives;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        void onDragDelta(object sender, DragDeltaEventArgs e)
        {
            var i = sender as UIElement;
            if (i != null)
            {
                Canvas.SetLeft(i, Canvas.GetLeft(i) + e.HorizontalChange);
                //Canvas.SetTop(myThumb, Canvas.GetTop(myThumb) + e.VerticalChange);
            }
        }
    }
}

EDIT:

Explanation: this has two draggable circles (x-axis only) and a line connecting both. I've created a binding for the X-Num,Y-Num properties and bound them to the Canvas.Top/Left attached properties of the thumb objects (using ElementName Binding). This places both ends of the line in the 0,0 coords of each object. So I used a negative margin to put the circle's center in 0,0.

Hope that helps.