Creating a UButton with a UImage inside in C++

Development Programming & Scripting UI
, , , ,
1

Good Afternoon,

I’ve been trying to construct a UButton with a UImage inside of it to display a Thumbnail. This is all being done from within the RebuildWidget() method in my extended c++ UUserWidget class.

I’ve been able to create the button and image as per the pseudo code below (I’m not at home to grab the real code, but wanted to give an example), however I’m having an issue setting the size of the image within the button. Instead the image simply sits in the middle of the button and doesn’t fill it. I’ve also tried setting the size of the image manually via SetSize and it doesn’t change.

Button1 = WidgetTree->ConstructWidget<UButton>(UButton::StaticClass(), TEXT("Button1"));
RootWidget->AddChild(Button1);
UCanvasPanelSlot* Button1Slot = Cast<UCanvasPanelSlot>(Button1->Slot);
if (Button1Slot)
{
    Button1Slot->SetSize(FVector2D(FIntPoint(100,100)));
}

Image1 =  WidgetTree->ConstructWidget<UImage>(UImage::StaticClass(), TEXT("Image1"));
Image1 ->SetColorAndOpacity(FLinearColor(1, 0, 0, 1));
Button1->AddChild(Image1);
UCanvasPanelSlot* Image1Slot = Cast<UCanvasPanelSlot>(Image1->Slot);
if (Image1Slot)
{
    Image1Slot->SetAutoSize(true);
}

Can anyone please advise?

Kind Regards,
Luke

2

I believe AutoSize makes a slot resize to the dimensions of its contents and not to the size of its parent. What you want is to change the anchors. On the UCanvasPanelSlot call SetAnchors which takes a FAnchors variable. I believe the default constructor gives you what you want - 0 margin spacing around all sides, effectively filling the parent.

3

Thanks for the advice on this.
I tried setting the Anchors as you described but I saw no difference unfortunately.

I think I’ve managed to crack it myself however and it appears I shouldn’t have been casting the Images slot to a UCanvasPanelSlot, but instead to a UButtonSlot.
Once I’d got the UButtonSlot, I was able to set both the Horizontal and Vertical alignment to Fill :slight_smile:

4

Managed to accomplish this by casting the slot to a UButtonSlot and setting Horizontal and Vertical alignment to Fill.
Code showing how this is done as below in case anyone else stumbles at the first hurdle like me:

Button1 = WidgetTree->ConstructWidget<UButton>(UButton::StaticClass(), TEXT("Button1"));
RootWidget->AddChild(Button1);

UCanvasPanelSlot* Button1Slot = Cast<UCanvasPanelSlot>(Button1->Slot);
if (Button1Slot)
{
	Button1Slot->SetSize(FVector2D(200, 200));
	Button1Slot->SetPosition(FVector2D(FIntPoint(100, 100)));
}

Image1 = WidgetTree->ConstructWidget<UImage>(UImage::StaticClass(), TEXT("Image1"));
Image1->SetColorAndOpacity(FLinearColor(1, 0, 0, 1)); // Set the image to a solid red colour as an example
Button1->AddChild(Image1);

UButtonSlot* Image1Slot = Cast<UButtonSlot>(Image1->Slot);
if (Image1Slot)
{
	Image1Slot->SetVerticalAlignment(EVerticalAlignment::VAlign_Fill);
	Image1Slot->SetHorizontalAlignment(EHorizontalAlignment::HAlign_Fill);
	Image1Slot->SetPadding(FMargin(0));
}