Custom Control drawing in front of children

[Arcnor]

I have a custom control based on ContentControl, and I'd like to be able to draw (or Render) in front of my Content, is this possible, and if so, how?

Thanks in advance!

[thevortexcloud]

Not sure I understand the problem. But I assume you could use a canvas for this?

[Arcnor]

Thanks, but no, that's not a proper solution, I'm able to draw, but I just need to do it in front of the Content for the custom control.

[AnnDevNet]

You can add a Control as a child that takes the size of your ContentControl and places itself above it with ZIndex = 1, and use Render(DrawingContext context) to draw.

[Arcnor]

Yeah, this sounds like a sensible solution, I was hoping for something less cumbersome, but might need to do this in the end, although I guess this means I'll have to use something else than ContentControl as it only has a single child. Thanks @AnnDevNet

[BAndysc]

@Arcnor since ContentControl is a TemplatedControl, you can simple create a custom Template for your control which contains a Panel and this panel contains the ContentPresenter and your custom renderer-control. So it still has a single child, but multiple descendants

[Arcnor]

Thanks @BAndysc , I'll have to read about Templates then, because I really don't understand this solution right now, but sounds really promising, thanks!

[BAndysc]

Example code:

public class CustomContentControl : ContentControl
{
    private CustomControlControlRenderer renderer;

    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
    {
        base.OnApplyTemplate(e);
        renderer = e.NameScope.Get<CustomControlControlRenderer>("PART_Renderer");
        renderer.OnRender += RenderOverlay;
    }

    public void RenderOverlay(DrawingContext context)
    {
      // do drawing here
    }
}

public class CustomControlControlRenderer : Control
{
    public event Action<DrawingContext> OnRender;

    public override void Render(DrawingContext context)
    {
        OnRender?.Invoke(context);
    }
}

and resources:

<ControlTheme TargetType="{x:Type avaloniaDemo:CustomContentControl}" x:Key="{x:Type avaloniaDemo:CustomContentControl}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
        <Panel>
          <ContentPresenter Name="PART_ContentPresenter"
                            Background="{TemplateBinding Background}"
                            BackgroundSizing="{TemplateBinding BackgroundSizing}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding CornerRadius}"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            Padding="{TemplateBinding Padding}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />
          <avaloniaDemo:CustomControlControlRenderer IsHitTestVisible="False" Name="PART_Renderer" />
        </Panel>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</ControlTheme>

(please note IsHitTestVisible=False in CustomControlControlRenderer as I guess you still want to be able to interact with components underneath)

[Arcnor]

Oh, many thanks for that, you shouldn't have bothered (still reading :D), but I really appreciate it! Will try this ASAP :)

[AnnDevNet]

Edit : My solution below is bad because the drawing is ultimately well below the content, as verified by BAndysc.

Even if there is already an accepted solution, I allow myself to give what I tested to be sure, even if the accepted solution is more versatile. It depends on the need and it might be useful to someone.

In fact, the ContentControl already draws on top of its content:

public class ContentControl2 : ContentControl
{
    private static readonly ImmutablePen penRed = new ImmutablePen(Brushes.Red, 5);

    protected override Type StyleKeyOverride => typeof(ContentControl);

    public override void Render(DrawingContext context)
    {
        base.Render(context);
        context.DrawLine(penRed, new Point(Bounds.Width, 0), new Point(0, Bounds.Height));
        context.DrawLine(penRed, new Point(0, 0), new Point(Bounds.Width, Bounds.Height));
    }
}

[BAndysc]

Not really, it draws underneath:

  <avaloniaDemo:ContentControl2>
    <Rectangle Width="50" Height="50" Fill="Blue" />
  </avaloniaDemo:ContentControl2>

[AnnDevNet]

Indeed, I was wrong because I had a gray button which ultimately has great transparency. Oops... :-)