需要将文本块添加到组框并在图形控件中加载数据时清除

Question

我正在创建一个图形控件。我正在做的添加 x 和 y 轴计数标签的操作是 将文本块添加到每个计数标记并显示与该计数标记相关的值。

但是当我需要从数据库加载数据并再次重新绘制文本块并刷新图形区域时，我无法删除旧的文本块，它们仍然位于图形窗格上。

为了克服这个问题，我想将文本块放在组框旁边，当重新绘制图形窗格以删除组框元素并再次放置它们时。

这种方法正确吗？ 请告诉我如何在类后面的代码中将元素放入组框中？ 请告诉我他们是否有其他解决方案来解决我的问题。

问候， 兰加纳。

Answer 1

在 WPF 中，大多数问题都有多种解决方案。我将讨论解决您的问题的三种可能的解决方案 - 您描述的一个和其他两个。您可以决定哪一个最适合您。

解决方案 1：使用 TextBlock 对象显示标签

听起来您有一个 Canvas，并且为每个刻度添加一个 TextBlock标记。如果性能不是太重要并且您不能使用数据绑定，那么这是一个可行的解决方案。

在这种情况下，有两种方法可以删除 TextBlock：

1. 您可以保留一个 List，其中包含上次创建标签时创建的 TextBlock 的所有 Textblocks 列表。每当您重新创建标签时，请运行此列表并从包含面板（画布）中删除列表上的每个 TextBlock

2. 您可以创建一个新的 Canvas 并将 TextBlock 放在其上，然后在重新标记时删除整个 Canvas。

下面是第二种技术的示例，因为它的效率稍高一些：

class MyGraphBuilder
{
  Canvas _labelCanvas;
  ...
  void AddLabels()
  {
    // Remove old label canvas, if any
    if(_labelCanvas!=null)
      _graphCanvas.Children.Remove(_labelCanvas);

    // Add new label canvas
    _labelCanvas = new Canvas();
    _graphCanvas.Children.Add(_labelCanvas);

    // Create labels
    foreach(...)
    {
      ...
      _labelCanvas.Add(new TextBlock ...
    }
    ...

  }
}

解决方案 2：使用数据绑定

在 WPF 中，您无需编写一行代码即可创建许多图表！ WPF 内置的数据绑定足以创建相对复杂的条形图等。

下面是使用数据绑定创建简单条形图的示例：

<ItemsControl ItemsSource="{Binding myData}">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <DockPanel>
        <TextBlock Width="50" Text="{Binding Label}"/>
        <Rectangle VerticalAlignment="{Stretch}" Width="{Binding Value}">
          <Rectangle.LayoutTransform>
            <ScaleTransform ScaleX="10" /> <!-- Scale factor here, can be binding too -->
          </Rectangle.LayoutTransform>
        </Rectangle>
        <TextBlock Text="{Binding Value}" FontSize="8"/>
      </DockPanel>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

可以通过使用水平布置的第二个 ItemsControl 将数字标签添加到水平轴，并且其数据模板具有固定宽度并显示数字和刻度线。

解决方案 3：使用低级绘图类

通过构造 DrawingGroup 对象并添加 GeometryDrawing 和 GlyphRunDrawing 对象来构建图形到它，然后将 DrawingGroup 放入 DrawingVisual 中，并将其添加到您的主 Panel 中。

对于共享给定画笔和笔的每组项目，您应该使用一个 GeometryDrawing 或 GlyphRunDrawing。例如，如果您的轴和刻度线的颜色和宽度都相同，则为所有轴和刻度线创建一个 GeometryDrawing，但如果每个刻度线颜色不同，则创建多个 GeometryDrawing代码>对象。

您将为每个GeometryDrawing 创建一个Geometry 对象。为了获得最佳效率，它应该是 StreamGeometry，但其他 Geometry 类也可以很好地工作，可能更易于使用，并且可以在 XAML 中初始化。您可能已经熟悉创建 PathGeometry 或 EllipseGeometry，因此我将重点介绍创建 StreamGeometry。您可以通过在 using() 语句中调用 Open 方法，然后写入返回的上下文来完成此操作。下面是一个示例：

Geometry BuildAxesAndTicksGeometry()
{
  // First create geometry
  var geometry = new StreamGeometry();
  using(var context = geometry.Open())
  {
    // Horizontal axis
    context.BeginFigure(new Point(0,0), false, false);
    context.LineTo(new Point(_width, 0), true, false);

    // Vertical axis
    context.BeginFigure(new Point(0,0), false, false);
    context.LineTo(new Point(0, _height), true, false);

    // Horizontal ticks
    for(int i=0; i<_nTicksHorizontal; i++)
    {
      context.BeginFiture(new Point(i * _tickSpacing, -10), false, false);
      context.LineTo(new Point(i * _tickSpacing, 10), true, false);
    }
    // Do same for vertical ticks
  }

  // Now add it to a drawing
  return new GeometryDrawing { Geometry = geometry, Stroke = _axisPen };
}

Drawing BuildDrawing()
{
  var mainDrawing = new DrawingGroup();
  mainDrawing.Add(BuildAxesAndTicksGeometry());
  ... // Add other drawings, including one or more for the data
  return mainDrawing;
}

void UpdateDrawing()
{
  myDrawingVisual.Drawing = BuildDrawing();  // where myDrawingVisual is defined in the XAML
}

解决方案比较

对于大多数情况，我会推荐解决方案 2 或 3，原因如下：

• 如果图形足够简单，可以使用数据绑定，那么它将为您节省大量时间。采用解决方案 2。
• 如果图形无法通过数据绑定完成，则使用 Drawing 对象大约与任何其他技术一样简单，并且可以执行得更好。采用解决方案 3。

在您的情况下，如果您已经在解决方案 1 中投入了大量工作，那么您可能希望坚持使用它，即使它可能不是最好的。