Kt Panel

A modern, fully customizable panel control for WinForms. It is a container for grouping and styling related content.

🟣 PREMIUM

This component is only available in the Premium version of KimTools.

Get KimTools

kt-panel-light kt-panel-dark

🟢 DESIGNER SUPPORT

This control has full Visual Studio design-time support.
Drag it from the Toolbox onto your form, customize its properties directly in the Properties window, and KimTools will generate the corresponding code for you.

Background

Background Kt-Brush Sets the panel’s background color.

Gradient with Kt-Colors

Use KimTools Semantically named dynamic theme colors.

🔴 🟡 🟢
// ==========================================
//  Gradient Angle
// ==========================================
// Render theme gradient using tuple
// of 2 colors and angle (Optional)
panel.Background =
(
    startColor: KtColor.PRIMARY[50],
    stopColor: KtColor.SECONDARY[50],
    angle: 45
);
Auto
Light
Dark

gradient-background-light gradient-background-dark

gradient-background-light

gradient-background-dark

Gradient with System-Colors

Use System.Drawing Colors or combine with KtColors

🔴 🟡 🟢
// using KimTools.WinForms;
var panel = new KtPanel();
	
// Background supports System color,
// gradient with angle, Transparent or Empty 
panel.Background =
(
    // or "blue" | "#5F9EA0;
    startColor: Color.CadetBlue,
	
    // "rgb(95, 158, 160)" | hsl(182, 25%, 50%)
    stopColor: Color.DodgerBlue,
    angle: 45 // optional (0-360)
);
Auto
Light
Dark

system-color-gradient-light system-color-gradient-dark

system-color-gradient-light

system-color-gradient-dark

Gradient with Opacity

KtPanel Background support translucent gradient colors too 😄

🔴 🟡 🟢
// using KimTools.WinForms;
var panel = new KtPanel();
	
// Use % operator to apply transparency to Kt-Color
panel.Background =
(
    startColor: KtColor.Teal % 40, // 40% Opacity
    stopColor: KtColor.Emerald % 60 // 60% Opacity
);
Auto
Light
Dark

opacity-gradient-light opacity-gradient-dark

opacity-gradient-light

opacity-gradient-dark

Solid Color | KtColor

KtPanel Background supports plain Solid Color or KtColor with or without opacity

🔴 🟡 🟢
// using KimTools.WinForms;
var panel = new KtPanel();
	
// Use % operator to apply transparency to Kt-Color
panel.Background = Color.BlueViolet;  // Color
                                      // panel.Background = KtColor.SUCCESS;     // KtColor
                                      // panel.Background = KtColor.Blue;        // KtColor
                                      // panel.Background = KtColor.Blue % 50;   // With Opacity
                                      // panel.Background = KtColor.FromHex("#1E90FF"); //Hex
	
// Any Web Color Format
// panel.Background = KtColor.Web("rgb(95, 158, 160)"); 
// panel.Background = KtColor.Web("hsl(210, 100%, 56%)"); // HSL Too
Auto
Light
Dark

solid-background-light solid-background-dark

solid-background-light

solid-background-dark

Pattern styles

PatternStyle HatchStyle Nullable Sets the Pattern style.

Pattern Style | Color

KtPanel Background supports patterns types which blend with the panel background
set PatternStyle to null to disable patterns.

🔴 🟡 🟢
// using KimTools.WinForms;
var panel = new KtPanel();
	
// Use % operator to apply transparency to Kt-Color
panel.Background = KtColor.BASE_1; // Solid Color or Gradient
panel.PatternColor = KtColor.BASE_3;  // Solid Color or 
panel.PatternStyle = HatchStyle.LargeConfetti;
Auto
Light
Dark

background-patterns-light background-patterns-dark

background-patterns-light

background-patterns-dark

background-patterns_horizontal-light background-patterns_horizontal-dark

background-patterns_min-light background-patterns_min-dark

background-patterns_vertical-light background-patterns_vertical-dark

background-patterns_forwarddiagonal-light background-patterns_forwarddiagonal-dark

background-patterns_backwarddiagonal-light background-patterns_backwarddiagonal-dark

background-patterns_cross-light background-patterns_cross-dark

background-patterns_largegrid-light background-patterns_largegrid-dark

background-patterns_max-light background-patterns_max-dark

background-patterns_diagonalcross-light background-patterns_diagonalcross-dark

background-patterns_percent05-light background-patterns_percent05-dark

background-patterns_percent10-light background-patterns_percent10-dark

background-patterns_percent20-light background-patterns_percent20-dark

background-patterns_percent25-light background-patterns_percent25-dark

background-patterns_percent30-light background-patterns_percent30-dark

background-patterns_percent40-light background-patterns_percent40-dark

background-patterns_percent50-light background-patterns_percent50-dark

background-patterns_percent60-light background-patterns_percent60-dark

background-patterns_percent70-light background-patterns_percent70-dark

background-patterns_percent75-light background-patterns_percent75-dark

background-patterns_percent80-light background-patterns_percent80-dark

background-patterns_percent90-light background-patterns_percent90-dark

background-patterns_lightdownwarddiagonal-light background-patterns_lightdownwarddiagonal-dark

background-patterns_lightupwarddiagonal-light background-patterns_lightupwarddiagonal-dark

background-patterns_darkdownwarddiagonal-light background-patterns_darkdownwarddiagonal-dark

background-patterns_darkupwarddiagonal-light background-patterns_darkupwarddiagonal-dark

background-patterns_widedownwarddiagonal-light background-patterns_widedownwarddiagonal-dark

background-patterns_wideupwarddiagonal-light background-patterns_wideupwarddiagonal-dark

background-patterns_lightvertical-light background-patterns_lightvertical-dark

background-patterns_lighthorizontal-light background-patterns_lighthorizontal-dark

background-patterns_narrowvertical-light background-patterns_narrowvertical-dark

background-patterns_narrowhorizontal-light background-patterns_narrowhorizontal-dark

background-patterns_darkvertical-light background-patterns_darkvertical-dark

background-patterns_darkhorizontal-light background-patterns_darkhorizontal-dark

background-patterns_dasheddownwarddiagonal-light background-patterns_dasheddownwarddiagonal-dark

background-patterns_dashedupwarddiagonal-light background-patterns_dashedupwarddiagonal-dark

background-patterns_dashedhorizontal-light background-patterns_dashedhorizontal-dark

background-patterns_dashedvertical-light background-patterns_dashedvertical-dark

background-patterns_smallconfetti-light background-patterns_smallconfetti-dark

background-patterns_largeconfetti-light background-patterns_largeconfetti-dark

background-patterns_zigzag-light background-patterns_zigzag-dark

background-patterns_wave-light background-patterns_wave-dark

background-patterns_diagonalbrick-light background-patterns_diagonalbrick-dark

background-patterns_horizontalbrick-light background-patterns_horizontalbrick-dark

background-patterns_weave-light background-patterns_weave-dark

background-patterns_plaid-light background-patterns_plaid-dark

background-patterns_divot-light background-patterns_divot-dark

background-patterns_dottedgrid-light background-patterns_dottedgrid-dark

background-patterns_dotteddiamond-light background-patterns_dotteddiamond-dark

background-patterns_shingle-light background-patterns_shingle-dark

background-patterns_trellis-light background-patterns_trellis-dark

background-patterns_sphere-light background-patterns_sphere-dark

background-patterns_smallgrid-light background-patterns_smallgrid-dark

background-patterns_smallcheckerboard-light background-patterns_smallcheckerboard-dark

background-patterns_largecheckerboard-light background-patterns_largecheckerboard-dark

background-patterns_outlineddiamond-light background-patterns_outlineddiamond-dark

background-patterns_soliddiamond-light background-patterns_soliddiamond-dark

API Reference

Background Kt-Brush Sets the panel’s background color.
Border Kt-Brush Sets the panel’s border color.
BorderEdges Edges Sets the Border edges.
PatternColor Kt-Color Sets the Pattern color.
Foreground Kt-Color Sets the Foreground.
BorderStyle DashStyle Sets the panel’s border style.
PatternStyle HatchStyle Nullable Sets the Pattern style.
BorderRadius float Sets the panel’s border radius.
BorderWidth float Sets the panel’s border thickness.
BackgroundMargin Padding Sets the panel’s border Margin.
BorderMargin Padding Sets the panel’s border Margin.