Slate, How to Make Fancy Custom SButtons

Overview

Author: Rama (talk)

In this tutorial I show you how to make some fancy custom buttons!

I show you how to use images as button background, or as the entire button!

I also show you how to use custom color and font text!

I also give you the code for how to make custom Tool Tips

Lastly I show how to make text highlight when it is hovered over :)

Enjoy!

Video

Here's a video demoing what I am showing you in this tutorial!

<youtube>https://www.youtube.com/watch?v=OfA0jTeqb0A</youtube>

.H

//Buttons
  TSharedPtr<SButton> RefreshButton;
  TSharedPtr<STextBlock> RefreshButtonText;
  TSharedPtr<SButton> ClearTileButton;

.CPP

FButtonStyle

Both of my example buttons use a special Slate Core Style.

.ButtonStyle( FCoreStyle::Get(), "NoBorder" )

Rainbow Background Button

//The button!
SAssignNew( RefreshButton, SButton )
	.ButtonStyle( FCoreStyle::Get(), "NoBorder" ) 
	.OnClicked( this, &SDDFileTree::RefreshButtonPressed )
	.HAlign( HAlign_Center )
	.VAlign( VAlign_Center )
	.ForegroundColor( FSlateColor::UseForeground() )
	[
		//Colored Background
		SNew(SBorder)
		  .Padding(FMargin(3))
			
		  //~~~ Rainbow Image for Button!!! ~~~
		  .BorderImage( FCoreStyle::Get().GetBrush("ColorSpectrum.Spectrum") )
		  [
			//Button Text!! AssignNew so can change color later
			SAssignNew(RefreshButtonText , STextBlock)
			  .Text( FString("Refresh (F5) ") )
			  .Font(FSlateFontInfo(FPaths::EngineContentDir() / TEXT("Slate/Fonts/Roboto-Bold.ttf"), 16))
			  .ColorAndOpacity(FLinearColor(1,0,1,1))
			  .HighlightColor(FLinearColor(1,1,0,1))
			  .ShadowColorAndOpacity(FLinearColor::Black)
			  .ShadowOffset(FIntPoint(1, -1))
		  ]
	]

Trash Can Button

//Resizes the image
SNew(SBox)
	.WidthOverride(64)
	.HeightOverride(64)
	[
	  //~~~ Clear Button / Trash Can ~~~
	  SAssignNew( ClearTileButton, SButton )
		.ButtonStyle( FCoreStyle::Get(), "NoBorder" ) 
		.OnClicked( this, &SDDFileTree::ClearButtonPressed )
		.HAlign( HAlign_Center )
		.VAlign( VAlign_Center )
		.ForegroundColor( FSlateColor::UseForeground() )
		[
			//Button Content Image
			TSharedRef<SWidget>( SNew( SImage ) .Image( 
				FCoreStyle::Get().GetBrush("TrashCan")
			))
		]
	]

Setting The Cursors

//Set Cursors
ClearTileButton->SetCursor(EMouseCursor::SlashedCircle);
RefreshButton->SetCursor(EMouseCursor::Hand);

Setting the Custom Tooltips

ClearTileButton->SetToolTip( 
		SNew(SToolTip)
		[
			SNew(STextBlock)
			  .Text(NSLOCTEXT("FileTree", "Clear", "Clear any currently Loaded Preview Tile!  -Rama"))
			  .Font(FSlateFontInfo(FPaths::EngineContentDir() / TEXT("Slate/Fonts/Roboto-Bold.ttf"), 12))
			  .ColorAndOpacity(FLinearColor(1,0,1,1))
			  .HighlightColor(FLinearColor(1,1,0,1))
			  .ShadowColorAndOpacity(FLinearColor::Black)
			  .ShadowOffset(FIntPoint(-2, 2))
		]
	);

RefreshButton->SetToolTip(	
		SNew(SToolTip)
		[
			SNew(STextBlock)
			  .Text( NSLOCTEXT("FileTree", "Refresh", "Refresh Directory and File Listing, updating to hard drive contents! -Rama") )
			  .Font(FSlateFontInfo(FPaths::EngineContentDir() / TEXT("Slate/Fonts/Roboto-Bold.ttf"), 12))
			  .ColorAndOpacity(FLinearColor(1,0,1,1))
			  .HighlightColor(FLinearColor(1,1,0,1))
			  .ShadowColorAndOpacity(FLinearColor::Black)
			  .ShadowOffset(FIntPoint(-2, 2))
		]
	);

Updating the Text When Highlighted

void SDDFileTree::Tick( const FGeometry& AllottedGeometry, const double InCurrentTime, const float InDeltaTime )
{
	// Call parent implementation
	SCompoundWidget::Tick( AllottedGeometry, InCurrentTime, InDeltaTime );

	
	//~~~~~~~~~~~~
	// Button Hovering
	//~~~~~~~~~~~~
	if(RefreshButtonText->IsHovered())
	{
		SetRainbowGlowColor();
		RefreshButtonText->SetForegroundColor( RainbowGlowingColor );
	}
	else
	{
		RefreshButtonText->SetForegroundColor( FLinearColor(1,0,1,1) );
	}
}

Summary

Enjoy!

Rama (talk)