WPF 画布和网格覆盖

Question

我有一个表示数据的Grid，我需要在其上覆盖一个Canvas来布局一些线条。这个Canvas位于它自己的UserControl内部。

问题是Canvas及其内容应该在Grid调整宽度和高度时自动调整大小。

我将Canvas放置在ViewBox中，但没有起作用。当Grid调整大小时，Canvas没有调整大小。这个Canvas的目的是在网格上覆盖类似标尺的功能。

期待您的解决方案。

编辑：

我不能使用样式替换画布，因为网格显示的信息与画布不同。就像图表中有不同大小的条形柱（在我的情况下是网格），而日期则是覆盖层中的线条（就像甘特图一样）。

我的代码：

    taxCanvas = new TimeAxis();
    Grid.SetRowSpan(taxCanvas, GRightMain.RowDefinitions.Count);
    Grid.SetColumnSpan(taxCanvas, GRightMain.ColumnDefinitions.Count);

    Grid.SetColumn(taxCanvas, 0);
    Grid.SetRow(taxCanvas, 0);


    Grid.SetZIndex(taxCanvas, -1);

    taxCanvas.Height = GRight.ActualHeight;
    taxCanvas.Width = GRight.ActualWidth;

    GRightMain.Children.Add(taxCanvas);

TimeAxis是我的画布用户控件，GRightMain是一个网格，它在同一行和列中容纳了我的画布和内容网格（Gright）。

希望这可以帮助您。

- user200851

Answer 1

在我看来，使用画布绝对是错误的方法。

我强烈建议查阅 Adorners。您可以创建一个自定义装饰器来完成这个任务。

Adorner 基本上是一个“非交互式窗口”，它位于所有 UIElements 的顶部。它允许您执行任何操作（创建控件、绘制图形等），这些操作将显示在控件本身的顶部。

想象一下一个木制咖啡桌，上面放着一块透明玻璃。如果您在透明玻璃上画画，仍然可以透过它看到咖啡桌。唯一的区别是您实际上可以直接伸手通过咖啡桌上的透明玻璃触摸到木头本身。

我不喜欢发布 MSDN 链接...但是...在这种情况下，这是一个很好的起点：

http://msdn.microsoft.com/en-us/library/ms743737.aspx

编辑：

我匆忙地把一些东西拼凑在一起。希望这有所帮助？

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:loc="clr-namespace:WpfApplication1"
        Title="MainWindow" Height="350" Width="525">
  <Grid>
     <loc:GridWithRulerxaml></loc:GridWithRulerxaml>
     <Button Height="20" Width="50" >Click me</Button>
     <TextBox Width="150" Height="25" HorizontalAlignment="Left">This is a text box</TextBox>
  </Grid>
</Window>

用户控件：

<UserControl x:Class="WpfApplication1.GridWithRulerxaml"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
  <Grid>

  </Grid>
</UserControl>

用户控件代码后台：

using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;

namespace WpfApplication1
{
  /// <summary>
  /// Interaction logic for GridWithRulerxaml.xaml
  /// </summary>
  public partial class GridWithRulerxaml : UserControl
  {
    public GridWithRulerxaml()
    {
      InitializeComponent();

      //Loaded event is necessary as Adorner is null until control is shown.
      Loaded += GridWithRulerxaml_Loaded;

    }

    void GridWithRulerxaml_Loaded(object sender, RoutedEventArgs e)
    {
      var adornerLayer = AdornerLayer.GetAdornerLayer(this);
      var rulerAdorner = new RulerAdorner(this);
      adornerLayer.Add(rulerAdorner);
    }
  }
}

最终的装饰器本身：

using System.Windows;
using System.Windows.Documents;
using System.Windows.Media;

namespace WpfApplication1
{
  public class RulerAdorner : Adorner
  {
    private FrameworkElement element;
    public RulerAdorner(UIElement el) : base(el)
    {
      element = el as FrameworkElement;
    }

    protected override void OnRender(System.Windows.Media.DrawingContext drawingContext)
    {
      base.OnRender(drawingContext);

      double height = element.ActualHeight;
      double width = element.ActualWidth;

      double linesHorizontal = height/50;
      double linesVertical = width/50;

      var pen = new Pen(Brushes.RoyalBlue, 2) { StartLineCap = PenLineCap.Triangle, EndLineCap = PenLineCap.Triangle };

      int offset = 0;

      for (int i = 0; i <= linesVertical; ++i)
      {
        offset = offset + 50;
        drawingContext.DrawLine(pen, new Point(offset, 0), new Point(offset, height));
      }

      offset = 0;

      for (int i = 0; i <= linesHorizontal; ++i)
      {
        offset = offset + 50;
        drawingContext.DrawLine(pen, new Point(0, offset), new Point(width, offset));
      }
    }
  }
}

如果您想让我更详细地解释代码，请告诉我。

我确认这将在主页面上方绘制一个网格。 您仍应该能够与下面的内容交互。

- tronious

Answer 2

你可以使用绑定（binding）来“绑定”Canvas和Grid的大小。因此，当Grid调整大小时，Canvas也会自动调整大小。

此外，如果需要计算边框偏移量等距离，则可以使用Converter进行绑定。

在WPF中使用绑定始终是一个好主意，因此请确保您知道它的基本原理。

总之，在代码后端（C＃/VB）的Size-Event中始终可以这样做。只需确定一个控件的大小并将其设置为另一个控件的大小即可。例如，获取Grid的actualHeight属性并将其设置为Canvas的height属性。

也许这会给你一些想法： http://blogs.msdn.com/bencon/archive/2006/05/10/594886.aspx 或者 http://www.switchonthecode.com/tutorials/wpf-tutorial-binding-converters

- TalkingCode

Answer 3

你想做什么？如果你只是想给整个网格添加网格线，你可以通过设置样式 像这样 来实现。或者你可以使用 装饰器。它们用于装饰/装饰单独图层上的元素。关于装饰器的好处是，尽管它们在单独的图层上，但它们与所装饰的元素保持同步（大小、位置、转换）。

- bitbonk