如何在XAML中定义的Canvas的子UIElement上方的画布上显示drawingvisual

Question

因此，我在来自画布的类中的VisualCollection视觉对象中有一个drawingvisual标记。

public class OverlayCanvas:Canvas
{
    VisualCollection visuals;

    DrawingVisual MarkerVisual = new DrawingVisual();
}

在xaml中，我定义了一个拖动选择边框，希望也可以绘制它。

             Components:OverlayCanvas 
                >

                <Border 
                    x:Name="dragSelectionBorder"
                    BorderBrush="White"
                    BorderThickness="0"
                    CornerRadius="1"
                    Visibility="Collapsed"
                    />
             </Components:OverlayCanvas>

如何同时显示两者？

通常，我会覆盖它们，但是是否必须在xaml中定义画布的所有子项并将它们添加到VisualCollection？ 如果我只是重写这两个方法，则在render调用getvisualchild时，它仅绘制标记DrawingVisual，但不会获取xaml中定义的项目。

protected override Visual GetVisualChild(int index)
{
  return visuals[index];
}
protected override int VisualChildrenCount
{
  get
  {
    return visuals.Count;
  }
}

我想也许我可以使用Panel.Children.Add，但是它需要一个UIElement。 然后，我认为也许正确的方法只是Visual.AddVisualChild，所以我在Canvas中的set marker事件上运行了此代码。

    {
    MarkerVisual = new DrawingVisual();
    using (DrawingContext dc = MarkerVisual.RenderOpen())
    {
      dc.DrawLine(MarkerPen, new Point(MouseHorizontalPositionInPixels, YPositionForStartOfVerticalAxisLines),
        new Point(MouseHorizontalPositionInPixels, ActualHeight));
    }
    this.AddVisualChild(MarkerVisual);

但是，在这种情况下，将显示画布中以xaml定义的UIelements，而不显示标记drawingvisual。

Answer 1

将Visual转换为UIElement将允许Panel.Children.Add ...，所以也许添加一个带有RenderTargetBitmap的Image ，该Image又可以包含DrawingVisual 。 所以像这样：

DrawingVisual MarkerVisual = new DrawingVisual();
Loaded += (sender, args) => {
    DrawingContext drawingContext = MarkerVisual.RenderOpen();
    drawingContext.DrawText(text, new Point(2, 2));
    drawingContext.Close();

    RenderTargetBitmap bmp = new RenderTargetBitmap(180, 180, 120, 96, PixelFormats.Pbgra32);
    bmp.Render(drawingVisual);

    Image image = new Image();
    image.Source = bmp;
    this.Children.Add(image);
};

Answer 2

最终，我决定WPF不想让我的画布同时包含uielements和它自己的视觉集合。 可以将添加到Children中的Elements并将其放置在Loaded Event上您自己的可视集合中。 但是，我从“儿童”中删除的用于处理自己的物品似乎并不会随着更改而自动更新，因此很可能并非易事。 拥有一个用于所有绘图视觉效果的容器元素，并使用grid.zindex像这样放置它要容易得多：

             <Grid
                Grid.ZIndex="3"
                Grid.Row="0"
                Grid.RowSpan="2"
                Grid.Column="0"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                x:Name="dragSelectionGrid"
                Visibility ="Visible"
                >
                <Components:MarkerElement 
                  Grid.ZIndex="1"
                  VerticalAlignment="stretch"
                  HorizontalAlignment="stretch"
                  />
                <Canvas x:Name="dragSelectionCanvas"
                        Grid.ZIndex="2"
                        >
                  <Border 
                    x:Name="dragSelectionBorder"
                    BorderBrush="White"
                    BorderThickness="0"
                    CornerRadius="1"
                    Visibility="Collapsed"
                    />
                </Canvas>
              </Grid>