使用 Binding 将椭圆与直线连接起来答案

【问题标题】：Use Binding to connect Ellipses with a Line使用 Binding 将椭圆与直线连接起来
【发布时间】：2010-12-16 14:14:46
【问题描述】：

我使用以下 Bindings 将两个 Ellipses 用一条线连接起来：

Line l = new Line();
l.Stroke = Brushes.Green;
l.StrokeThickness = 3;
Binding x1 = new Binding(); x1.Path = new PropertyPath(Canvas.LeftProperty);
Binding y1 = new Binding(); y1.Path = new PropertyPath(Canvas.TopProperty);
Binding x2 = new Binding(); x2.Path = new PropertyPath(Canvas.LeftProperty);
Binding y2 = new Binding(); y2.Path = new PropertyPath(Canvas.TopProperty);
x1.Source = y1.Source = e;
x2.Source = y2.Source = e1;
l.SetBinding(Line.X1Property, x1);
l.SetBinding(Line.Y1Property, y1);
l.SetBinding(Line.X2Property, x2);
l.SetBinding(Line.Y2Property, y2);
Dependencies.Children.Add(l);

这很好用，但问题是，线条是在椭圆的左上方绘制的。我想使用椭圆的中心。因此，我必须将 Ellipse#width / 2 添加到 x 属性。但是我该怎么做呢？

【问题讨论】：

标签： c# .net wpf

【解决方案1】：

您可以使用IValueConverter 更改/转换值，而Binding。

这是我做的：

Canvas Dependencies = new Canvas();
Ellipse e1 = new Ellipse() { Width = 200, Height = 200, Stroke = Brushes.Red, StrokeThickness = 1 };
Ellipse e2 = new Ellipse() { Width = 200, Height = 200, Stroke = Brushes.Red, StrokeThickness = 1 };
Line l = new Line();

l.Stroke = Brushes.Green;
l.StrokeThickness = 3;

Binding x1 = new Binding(); x1.Path = new PropertyPath(Canvas.LeftProperty); x1.Converter = new MyConverter(); x1.ConverterParameter = e1;
Binding y1 = new Binding(); y1.Path = new PropertyPath(Canvas.TopProperty); y1.Converter = new MyConverter(); y1.ConverterParameter = e1;
Binding x2 = new Binding(); x2.Path = new PropertyPath(Canvas.LeftProperty); x2.Converter = new MyConverter(); x2.ConverterParameter = e2;
Binding y2 = new Binding(); y2.Path = new PropertyPath(Canvas.TopProperty); y2.Converter = new MyConverter(); y2.ConverterParameter = e2;

x1.Source = y1.Source = e1;
x2.Source = y2.Source = e2;

l.SetBinding(Line.X1Property, x1);
l.SetBinding(Line.Y1Property, y1);
l.SetBinding(Line.X2Property, x2);
l.SetBinding(Line.Y2Property, y2);

Dependencies.Children.Add(e1);
Dependencies.Children.Add(e2);
Dependencies.Children.Add(l);

SizeChangedEventHandler act = (Object s, SizeChangedEventArgs args) =>
{
    BindingOperations.GetBindingExpressionBase(l, Line.X1Property).UpdateTarget();
    BindingOperations.GetBindingExpressionBase(l, Line.Y1Property).UpdateTarget();
    BindingOperations.GetBindingExpressionBase(l, Line.X2Property).UpdateTarget();
    BindingOperations.GetBindingExpressionBase(l, Line.Y2Property).UpdateTarget();
};

e1.SizeChanged += act;
e2.SizeChanged += act;

Canvas.SetLeft(e1, 200);
Canvas.SetTop(e1, 200);

Canvas.SetLeft(e2, 500);
Canvas.SetTop(e2, 500);

Grid2.Children.Add(Dependencies);

转换器：

public class MyConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        Ellipse e = parameter as Ellipse;
        Double d = (Double)value;

        return d + (e.ActualWidth / 2);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        Ellipse e = parameter as Ellipse;
        Double d = (Double)value;

        return d - (e.ActualWidth / 2);
    }
}

请注意，转换器仅考虑 Ellipse.Width。您需要对其进行修改以使其正常工作。

【讨论】：

【解决方案2】：

您的绑定现在取决于两个属性，Canvas.Left（或 Canvas.Top）和 Ellipse.ActualWidth（或高度）。为此，您可以使用多重绑定。请参阅以下示例：

http://www.switchonthecode.com/tutorials/wpf-tutorial-using-multibindings

但是，还有其他可能更简单的替代方案。您可以使用渲染转换将椭圆转换为宽度一半的 X 位置和高度一半的 Y 位置，以使椭圆居中于 Canvas.Left 和 canvas.Top 给出的位置

问候，科林 E。

【讨论】：