WPF：如何绑定线UI元素？ [英] WPF: how to bind lines to UI elements?

问题描述

我用这种方法将线结合到中心两个ScatterViewItems：

I use this method to bind a Line to the center of two ScatterViewItems:

private void BindLineToScatterViewItems(Shape line, ScatterViewItem origin, ScatterViewItem destination)
        {
            // Bind line.(X1,Y1) to origin.ActualCenter
            BindingOperations.SetBinding(line, Line.X1Property, new Binding { Source = origin, Path = new PropertyPath("ActualCenter.X") });
            BindingOperations.SetBinding(line, Line.Y1Property, new Binding { Source = origin, Path = new PropertyPath("ActualCenter.Y") });

            // Bind line.(X2,Y2) to destination.ActualCenter
            BindingOperations.SetBinding(line, Line.X2Property, new Binding { Source = destination, Path = new PropertyPath("ActualCenter.X") });
            BindingOperations.SetBinding(line, Line.Y2Property, new Binding { Source = destination, Path = new PropertyPath("ActualCenter.Y") });
        }

但现在我想从底部从一个ScatterViewItem绑定到另一个ScatterViewItem的顶部：

But now I'd like to bind it from the bottom from one ScatterViewItem to the top of the another ScatterViewItem:

我怎样才能做到这一点？

How can I achieve that?

推荐答案

您可以：

1. 使用的IValueConverter ，是以视图项目和转换器参数的边界矩形指定方计算中心的。

1. Use a IValueConverter that takes the bounding rectangle of the view item and a converter parameter to specify the side to calculate the center from.

public enum MidpointSide { None, Left, Top, Right, Bottom }

public class MidpointConverter : IValueConverter
{
    private bool returnY;
    public MidpointConverter(bool returnY)
    {
        this.returnY = returnY;
    }

    public object Convert(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        var scatter = value as ScatterViewItem;
        var side = (MidpointSide)parameter;
        var center = scatter.ActualCenter;
        var halfW = scatter.ActualWidth / 2.0;
        var halfH = scatter.ActualHeight / 2.0;

        Point point = null;
        switch (side)
        {
        case MidpointSide.Left:
            point = new Point(center.X - halfW, center.Y);
            break;
        case MidpointSide.Top:
            point = new Point(center.X, center.Y - halfH);
            break;
        case MidpointSide.Right:
            point = new Point(center.X + halfW, center.Y);
            break;
        case MidpointSide.Bottom:
            point = new Point(center.X, center.Y + halfH);
            break;
        default:
            return null;
        }

        return this.returnY ? point.Y : point.X;
    }

    public object ConvertBack(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

你可以使用该转换器将是：

The converter you would use would be:

var x = new MidpointConverter(false), y = MidpointConverter(true);

BindingOperations.SetBinding(line, Line.X1Property,
    new Binding { Source = origin, Converter = x, ConverterParameter = MidpointSide.Bottom });
BindingOperations.SetBinding(line, Line.Y1Property,
    new Binding { Source = origin, Converter = y, ConverterParameter = MidpointSide.Bottom });

// Definitely more heavyweight than just changing the `ZIndex`
// You run into the problem that you can't bind the 'start' and 'end'
// of a line, only X1/Y1 and X2/Y2 making this converter involved

请同 ActualCenter 绑定，而是使 zIndex的低于矩形线的。使用这种方法将可能让你不必检测，如果有一个 ScatterViewItem 的动作中需要更改转换器中使用的侧这样的方式。

Keep the same ActualCenter bindings, but make the ZIndex of the line below that of the rectangles. Using this approach will likely keep you from having to detect if one ScatterViewItem moves in such a way that needs to change the side used in the converter.

这篇关于WPF：如何绑定线UI元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！