在纯XAML中的两个元素之间绘制连接线

时间:2018-07-25 09:10:41

标签: wpf xaml

我对WPF和XAML非常陌生。 我在4x4 Image上放置了两个Grid元素(例如x:Name='LHImage' x:Name='RHImage),我想用一条线将它们连接起来。

类似这样的东西:

<Line
    X1="{Binding ElementName=LHImage, Path=RenderedBoundingRect.Right}"
    Y1="{Binding ElementName=LHImage, Path=RenderedBoundingRect.Middle}"
    X2="{Binding ElementName=RHImage, Path=RenderedBoundingRect.Left}"
    Y2="{Binding ElementName=RHImage, Path=RenderedBoundingRect.Middle}"
    Stroke="Gray"
    StrokeThickness="5" Grid.ColumnSpan="4" Grid.RowSpan="4"/>

当然RenderedBoundingRect及其Left Right Middle属性不存在,应该用其他表达式代替,这正是我所要的。 在纯XAML(没有C#辅助代码)中有可能吗?

编辑: 根据要求,以下是所需结果的屏幕截图:

enter image description here

1 个答案:

答案 0 :(得分:0)

如果将所有控件都放在同一个容器中(如Canvas),则可以使用一些技巧:

<Canvas>
    <Rectangle Height="30" Width="50" Fill="Red">
        <Rectangle.RenderTransform>
            <TransformGroup>
                <!--Bound transform or absolute transform-->
                <TranslateTransform x:Name="LHImage" X="80" Y="50"/>
                <!--Relative transform-->
                <TranslateTransform X="-50" Y="-15"/>
            </TransformGroup>
        </Rectangle.RenderTransform>
    </Rectangle>
    <Rectangle Height="30" Width="50" Fill="Red">
        <Rectangle.RenderTransform>
            <TransformGroup>
                <TranslateTransform x:Name="RHImage" X="130" Y="20"/>
                <TranslateTransform X="0" Y="-15"/>
            </TransformGroup>
        </Rectangle.RenderTransform>
    </Rectangle>
    <Line
        X1="{Binding ElementName=LHImage, Path=X}"
        Y1="{Binding ElementName=LHImage, Path=Y}"
        X2="{Binding ElementName=RHImage, Path=X}"
        Y2="{Binding ElementName=RHImage, Path=Y}"
        Stroke="Gray"
    StrokeThickness="5"/>
</Canvas>

但是,如果您使用Grid并将控件放在不同的单元格中,那么您将不得不总结一些维数,而如果没有简单的Converter,这是不可能的。 因此,我想说如果没有后面的代码几乎是不可能的,但是所需的代码可能非常简短。