建立一个线用户控件

Question

是否可以构建一个 WPF UserControl SegmentControl，具有类似于线条形状坐标（X1，Y1）和（X2，Y2）？

我已经构建了一个自定义 Line Shape，但我需要一个 UserControl，因为我添加了一些额外的可自定义元素，例如文本和项目符号。

我编写了一些代码，但认为我需要帮助：

<UserControl>
<!-- internal Canvas; The UsrCtrl Parent is supposed to be a Canvas too -->
    <Canvas>
        <Line x:Name="line" Stroke="Black" StrokeThickness="1"></Line>
        <Label x:Name="label" Content="Paris - Moscow"/>
    </Canvas>
</UserControl>

*.cs

public partial class SegmentControl : UserControl
{
    #region dependency properties
    public static readonly DependencyProperty X1Property;

...
static void OnXYChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
{
    SegmentControl s = source as SegmentControl;
    UpdateControlPositionAndSize(s);
}

static void UpdateControlPositionAndSize(SegmentControl sc)
{
    double left = Math.Min(sc.X1, sc.X2);
    double top = Math.Min(sc.Y1, sc.Y2);

    double width = sc.X2 - sc.X1;
    double height = sc.Y2 - sc.Y1;

    Canvas.SetLeft(sc, left);
    Canvas.SetTop(sc, top);
    sc.Width = width;
    sc.Height = height;

    sc.line.X1 = sc.X1; // ??
    sc.line.Y1 = sc.Y1; // ??
    sc.line.X2 = sc.X2; // ??       
    sc.line.Y2 = sc.Y2; // ??
}

Answer 1

在您需要的点的 UserControl 上创建一个自定义 DependencyProperty 并将您的 Line 位置绑定到它怎么样？

你的 UserControl 应该是这样的：

<UserControl>
    <Canvas>
        <Line x:Name="line" Stroke="Black" StrokeThickness="1"
              X1="{Binding RelativeSource={RelativeSource AncestorType={x:Type my:SegmentControl}}, Path=StartPosition.X}"
              Y1="{Binding RelativeSource={RelativeSource AncestorType={x:Type my:SegmentControl}}, Path=StartPosition.Y}"
              X2="{Binding RelativeSource={RelativeSource AncestorType={x:Type my:SegmentControl}}, Path=EndPosition.X}"
              Y2="{Binding RelativeSource={RelativeSource AncestorType={x:Type my:SegmentControl}}, Path=EndPosition.Y}" />

        <Label x:Name="label" 
               Content="{Binding={RelativeSource RelativeSource AncestorType={x:Type my:SegmentControl}}, Path=Text}"/>
    </Canvas>
</UserControl>

你会像这样使用它：

<my:SegmentControl 
    StartPosition="{Binding Path=StartPoint}"
    EndPosition="{Binding Path=EndPoint}" 
    Text="{Binding Path=SegmentText}" />