在不同的布局容器上画一条线答案

【问题标题】：Draw a line across different layout-containers在不同的布局容器上画一条线
【发布时间】：2013-01-14 23:21:57
【问题描述】：

我正在构建一个 C# WPF 应用程序，在我的一个 XAML 视图中，我需要使用一条线连接位于不同容器中的两个控件。

这是我的简化布局伪代码：

<DockPanel>
   <Grid DockPanel.Dock="Top">
      <Button Name="Button1" />
   </Grid>
   <UniformGrid Columns="3" DockPanel.Dock="Bottom">
      <StackPanel>
         <Button Name="ButtonA" />
      </StackPanel>
      <StackPanel>
         <Button Name="ButtonB" />
      </StackPanel>
      <StackPanel>
         <Button Name="ButtonC" />
      </StackPanel>
   </UniformGrid>
</DockPanel>

我的要求是通过 Line 将 Button1 连接到 ButtonA、B 或 C，但我不知道如何。根据我的研究，人们通常使用 Canvas 并连接托管在该 Canvas 中的控件，并使用附加属性 Canvas.SetTop 和 Canvas.SetLeft 将控件定位在容器内。我尝试用 Canvas 包裹我的 DockPanel，但没有成功。

我的问题是：是否可以绘制连接不同类型布局的控件的线？（在我的情况下是 DockPanel-Grid-UniformGrid）或实现此目的的替代或更标准的方法。我也尝试让我的控制位置相对于 DockPanel，但也没有工作......

提前致谢

【问题讨论】：

你在正确的轨道上。在中放置带有
问题是，如果我在我的 UniformGrid 中放置一个 Canvas 并在那里画线，它不会到达我在上部网格中的 Button1 控件，因为它超出了边界...
这篇文章给出了有趣的想法，我明天试试：msdn.microsoft.com/en-us/magazine/ff646962.aspx

标签： c# wpf layout

【解决方案1】：

根据 Charles Petzold 'Thinking outside the grid' 文章，我最终得到了这样的结构：

<UserControl ... >
  <Grid ... >
    <local:SimpleUniformGrid ... >
      <Button ... />
      <Button ... />
      ...
    </local:SimpleUniformGrid>

    <Canvas>
      <Path ... /> 
      <Path ... />
      <Path ... />
    </Canvas>
  </Grid>
</UserControl>

关键段落是这个：

“在处理 LayoutUpdated 事件时，你不想做任何会导致另一个布局传递并让你陷入无限递归的事情。这就是 Canvas 派上用场的地方：因为它总是报告零大小与其父级相同，您可以在不影响布局的情况下更改 Canvas 中的元素。”

除此之外，我还使用了他的 Dragable Objects article 中的 Denis Vuyka MyThumb 课程

创建线时的起点和终点可以使用 this article 中解释的 GeneralTransform 类来确定：

    GeneralTransform transform = thumb.TransformToAncestor(this);
    Point rootPoint = transform.Transform(new Point(0, 0));

这里的关键教训是了解 Canvas 不占用 Grid 内的任何空间，因此您可以将其用作存储路径/LineGeometry 的容器，并在视图中的任何坐标处显示它们，无论来源/目标控件属于不同的容器。

【讨论】：