View source for Slate, How to Make Fancy Custom SButtons

==Overview==

''Author:'' [[User:Rama|Rama]] ([[User talk: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==

<syntaxhighlight lang="cpp">
//Buttons
  TSharedPtr<SButton> RefreshButton;
  TSharedPtr<STextBlock> RefreshButtonText;
  TSharedPtr<SButton> ClearTileButton;
</syntaxhighlight>

==.CPP==

===FButtonStyle===

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

<syntaxhighlight lang="cpp">
.ButtonStyle( FCoreStyle::Get(), "NoBorder" ) 
</syntaxhighlight>

===Rainbow Background Button===

<syntaxhighlight lang="cpp">
//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))
		  ]
	]
</syntaxhighlight>

===Trash Can Button===

<syntaxhighlight lang="cpp">
//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")
			))
		]
	]
</syntaxhighlight>

===Setting The Cursors===

<syntaxhighlight lang="cpp">
//Set Cursors
ClearTileButton->SetCursor(EMouseCursor::SlashedCircle);
RefreshButton->SetCursor(EMouseCursor::Hand);
</syntaxhighlight>

===Setting the Custom Tooltips ===
	
<syntaxhighlight lang="cpp">
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))
		]
	);
</syntaxhighlight>

===Updating the Text When Highlighted===

<syntaxhighlight lang="cpp">
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) );
	}
}
</syntaxhighlight>

==Summary==

Enjoy!

[[User:Rama|Rama]] ([[User talk:Rama|talk]])

[[Category:Code]]