Appearance in Windows Forms Button (SfButton)

26 Apr 2021 / 10 minutes to read

This section describes how to customize the appearance of the SfButton control.

Background

The background of the SfButton can be filled with solid color, gradient colors, or image.

BackColor

The background of the SfButton can be filled with solid color by initializing the BackColor property.

//Initialize the Gray color to the background of SfButton
sfButton1.BackColor = Color.Gray;

Gradient BackColor

The background of the SfButton can be filled with gradient colors by initializing the GradientBrush property.

//Initialize the gradient background brush to SfButton.
sfButton1.Style.GradientBrush = new BrushInfo(GradientStyle.ForwardDiagonal, Color.Green, Color.Yellow);

SfButton_img9

Background Image

The background of the SfButton can be filled with image by initialize the BackgroundImage property. The background image layout can be changed by initializing any one of ImageLayout enumeration value to BackgroundImageLayout property.

//Initializing the image value to BackgroundImage property.
this.sfButton1.BackgroundImage = Image.FromFile(@"..\..\Data\BackgroundImage.png");

//Sets the center image layout to the Background image.
this.sfButton1.BackgroundImageLayout = System.Windows.Forms.ImageLayout.Center;

SfButton_img10

Customizing Appearance based on Button State

The SfButton provide options to customize the appearance based on the button state.

Backcolor and Fore Color

The backcolor and fore color of the SfButton in hover state can be changed by using the HoverBackColor and HoverForeColor properties. Like the hover state, you can customize in pressed state, focused state, normal state, and disable state of the SfButton.

//Initializing the back color.
sfButton1.Style.BackColor = Color.Gray;

//Initializing the fore color.  
sfButton1.Style.ForeColor = Color.Black;

//Initializing the hover back color.
sfButton1.Style.HoverBackColor = Color.Gray;

//Initializing the hover fore color.
sfButton1.Style.HoverForeColor = Color.White;

//Initializing the focused back color.
sfButton1.Style.FocusedBackColor = Color.LightGray;

//Initializing the focused fore color.
sfButton1.Style.FocusedForeColor = Color.Black;

SfButton_img11

Image

The SfButton allows changing the image in hover state by using the HoverImage property. Like hover state, you can change the image in focused, disabled, and pressed states by using the FocusedImage, DisabledImage, and PressedImage properties.

//Initializing the image for SfButton default state
sfButton1.Style.Image = Image.FromFile(@"..\..\Data\DefaultImage.png");

//Initializing the hover image for SfButton.
sfButton1.Style.HoverImage = Image.FromFile(@"..\..\Data\HoverImage.png");

//Initializing the pressed image for SfButton.
sfButton1.Style.PressedImage = Image.FromFile(@"..\..\Data\PressedImage.png");

//Initializing the Focused image for SfButton.
sfButton1.Style.FocusedImage = Image.FromFile(@"..\..\Data\FocusedImage.png");

//Initializing the disabled image for SfButton.
sfButton1.Style.DisabledImage = Image.FromFile(@"..\..\Data\DisabledImage.png");

SfButton_img12

SfButton_img13

Border

The border can be changed based on the button state by using the Border, HoverBorder, FocusedBorder, PressedBorder, and DisabledBorder properties.

//Initialize the hover border
sfButton6.Style.HoverBorder = new Pen(Color.DarkGray, 2);

SfButton_img14

Animating the Image

The animation image (.gif image) can be displayed in the SfButton by enabling the AllowImageAnimation property and initialize the animation image to the Image property.

//Enable the Image animation
sfButton1.AllowImageAnimation = true;

//Initialize the animation image to SfButton.
sfButton1.Style.Image = Image.FromFile(@"..\..\Data\animationImage.gif");

SfButton_img15

Note: The SfButton does not allow you to animate the image, if the animated image set as FocusedImage, HoverImage, or PressedImage so, to show the animation image inside the button, initialize the animation image (gif image) using the Image property.

Show or Hide Focus Rectangle

A thin dotted rectangular frame can be drawn inside the SfButton when it got focus. This feature can be enabled by setting the FocusRectangleVisible property to true.

//Enable the focus rectangle for SfButton
sfButton1.FocusRectangleVisible = true;

SfButton_img16

Rounded Rectangle Button

The SfButton with rounded rectangle shape can be implemented programmatically by drawing the border using Paint event.

To draw the rounded rectangle shape for the SfButton follow the steps:

  1. Raise the Paint event of the SfButton.
//Raises the paint event of the SfButton
sfButton1.Paint += sfButton1_Paint;
  1. Calculate the rounded rectangle area for the client area of the button, and set to the region of the SfButton. Draw the border with calculated rounded rectangle area. The Paint event method is as follows.
private void sfButton1_Paint(object sender, PaintEventArgs e)
{
    //Rounded rectangle corder radius. The radius must be less than 10.
    int radius = 5;
    e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
    Rectangle rect = new Rectangle(this.sfButton1.ClientRectangle.X + 1, 
                                   this.sfButton1.ClientRectangle.Y + 1,
                                   this.sfButton1.ClientRectangle.Width - 2,
                                   this.sfButton1.ClientRectangle.Height - 2);
    sfButton1.Region = new Region(GetRoundedRect(rect, radius));
    rect = new Rectangle(rect.X + 1, rect.Y + 1, rect.Width - 2, rect.Height - 2);
    e.Graphics.DrawPath(new Pen(Color.Red), GetRoundedRect(rect, radius));
}

SfButton_img17

Refer to the following sample shows how to implement the rounded rectangle in the SfButton control.

Sample

Note: When using the previous implementation to draw the rounded rectangle, the border customization properties like Border, HoverBorder, PressedBorder, FocusedBorder, and DisabledBorder does not work.

Themes

The SfButton offers four built-in themes for professional representation as follows:

  • Office2016Colorful
  • Office2016White
  • Office2016DarkGray
  • Office2016Black

Themes can be applied to the SfButton by using the following steps:

  1. Load theme assembly
  2. Apply theme

Load theme assembly

The Syncfusion.Office2016Theme.WinForms assembly should be added as reference to set theme for the SfButton in any application.

Before applying theme to the SfButton, required theme assembly should be loaded.

using Syncfusion.WinForms.Controls;

         static class Program
    {
        /// <summary>
        /// The main entry point for the application.
        /// </summary>
        
        static void Main()
        {
            SfSkinManager.LoadAssembly(typeof(Office2016Theme).Assembly);
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            Application.Run(new Form1());
        }
    }
Imports Syncfusion.WinForms.Controls

 Friend Module Program
        ''' <summary>
        ''' The main entry point for the application.
        ''' </summary>
        Sub Main()
            SfSkinManager.LoadAssembly(GetType(Office2016Theme).Assembly)
            Application.EnableVisualStyles()
            Application.SetCompatibleTextRenderingDefault(False)
            Application.Run(New Form1())
        End Sub
    End Module

Apply theme

Appearance of the SfButton can be changed by using the ThemeName.

Office2016Colorful

This option helps to set the Office2016Colorful Theme.

// Office2016Colorful

 this.sfButton.ThemeName = "Office2016Colorful";
' Office2016Colorful 

Me.sfButton.ThemeName = "Office2016Colorful"

SfButton_o16_colorful

Office2016White

This option helps to set the Office2016White Theme.

// Office2016White

 this.sfButton.ThemeName = "Office2016White";
' Office2016White 

Me.sfButton.ThemeName = "Office2016White"

SfButton_o16_white

Office2016DarkGray

This option helps to set the Office2016DarkGray Theme.

// Office2016DarkGray

 this.sfButton.ThemeName = "Office2016DarkGray";
' Office2016DarkGray 

Me.sfButton.ThemeName = "Office2016DarkGray"

SfButton_o16_darkGray

Office2016Black

This option helps to set the Office2016Black Theme.

// Office2016Black

 this.sfButton.ThemeName = "Office2016Black";
' Office2016Black 

Me.sfButton.ThemeName = "Office2016Black"

SfButton_o16_black