How to draw lines under certain widgets/UI elements?

[3dRaven]

Draw Line but under the widget (line z order?)

Yeah, the solution is simple but kind of silly. Create a different Widget Blueprint with one job, which is drawing lines. Then add this blueprint to your main blueprint, and you can change its order and make it covered by other widgets. However, if you want different lines with different Z-orders, you’ll need to create multiple widgets with lines. If I were to do it now, I would create a generic widget blueprint called something like ‘WBP_LineDrawer’, where I could draw a single line or arrays…

You can also experiment with passing in a custom LayerId in the NativePaintstrong text for the MakeLines and super call

.h

#pragma once

#include "CoreMinimal.h"
#include "Blueprint/UserWidget.h"
#include "UpgradeWidgetTree.generated.h"

class UCanvasPanel;
/**
 * 
 */
UCLASS()
class YOUR_API UUpgradeWidgetTree : public UUserWidget
{
	GENERATED_BODY()
public:	

	virtual int32 NativePaint(const FPaintArgs& Args, const FGeometry& AllottedGeometry, const FSlateRect& MyCullingRect, FSlateWindowElementList& OutDrawElements, int32 LayerId, const FWidgetStyle& InWidgetStyle, bool bParentEnabled) const override;
	
	UPROPERTY(meta = (BindWidget))
	UCanvasPanel* InnerCanvas;

	UPROPERTY(meta = (BindWidget))
	UWidget* Slot1;

	UPROPERTY(meta = (BindWidget))
	UWidget* Slot2;

	UPROPERTY(EditAnywhere, BlueprintReadWrite)
	int32 LineLayerId;
	

};

.cpp

#include "UpgradeWidgetTree.h"
#include "Components/CanvasPanelSlot.h"
#include "Blueprint/WidgetLayoutLibrary.h"
#include "Components/CanvasPanel.h"
#include "Rendering/DrawElementTypes.h"

int32 UUpgradeWidgetTree::NativePaint(const FPaintArgs& Args, const FGeometry& AllottedGeometry, const FSlateRect& MyCullingRect, FSlateWindowElementList& OutDrawElements, int32 LayerId, const FWidgetStyle& InWidgetStyle, bool bParentEnabled) const
{	
	int32 LayerID = Super::NativePaint(Args, AllottedGeometry, MyCullingRect, OutDrawElements, LayerId, InWidgetStyle, bParentEnabled);
	
	if (InnerCanvas != nullptr && Slot1 != nullptr && Slot2 != nullptr)
	{		
			UCanvasPanelSlot* CanvasSlot0 = UWidgetLayoutLibrary::SlotAsCanvasSlot(Slot1);
			UCanvasPanelSlot* CanvasSlot1 = UWidgetLayoutLibrary::SlotAsCanvasSlot(Slot2);

			FVector2D AntchorPosition = InnerCanvas->GetCachedGeometry().GetLocalSize() * CanvasSlot0->GetAnchors().Minimum;
			FVector2D Position0 = AntchorPosition + CanvasSlot0->GetPosition();
			FVector2D Position1 = AntchorPosition + CanvasSlot1->GetPosition();
												
			FSlateDrawElement::MakeLines(
				OutDrawElements,				
				LineLayerId,				
				InnerCanvas->GetPaintSpaceGeometry().ToPaintGeometry(),
				{ Position0,Position1 },
				ESlateDrawEffect::None,
				FLinearColor::Blue,
				true,
				5.0f
			);					
	}	
	return LayerID;	
}

Alignment for both boxes is set to 0.5 , 0.5
Line layer ID = 50