Kt Shapes

A versatile shape renderer supporting circles, ovals, squares, rectangles, polygons (3 to 16 sides), and lines with independent fill opacity, border, rotation, and side-count control.

🟣 PREMIUM

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

Get KimTools

kt-shapes-light kt-shapes-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.

🔴 🟡 🟢
var shape = new KtShapes();
Shape Shapes Sets the shape to be drawn.

Circle (Shapes.Circle)

Draws a smooth anti-aliased circle inscribed perfectly within equal control dimensions.

🔴 🟡 🟢
var panel = CreateContainerPanel(120, 120);
	
var circle = new KtShapes
{
    Width = 70,
    Height = 70,
    Margin = new Padding(5),
    Shape = KtShapes.Shapes.Circle,
    FillColor = KtColor.PRIMARY % 50,
    BorderColor = KtColor.PRIMARY,
    BorderThickness = 2,
    FillShape = true
};
	
panel.Controls.Add(circle);
Auto
Light
Dark

shapes-circle-light shapes-circle-dark

shapes-circle-light

shapes-circle-dark

Oval (Shapes.Oval)

Draws an ellipse that dynamically stretches to match rectangular control dimensions.

🔴 🟡 🟢
var panel = CreateContainerPanel(150, 120);
	
var oval = new KtShapes
{
    Width = 100,
    Height = 65,
    Margin = new Padding(5),
    Shape = KtShapes.Shapes.Oval,
    FillColor = KtColor.SECONDARY % 50,
    BorderColor = KtColor.SECONDARY,
    BorderThickness = 2,
    FillShape = true
};
	
panel.Controls.Add(oval);
Auto
Light
Dark

shapes-oval-light shapes-oval-dark

shapes-oval-light

shapes-oval-dark

Square (Shapes.Square)

Draws an equilateral 4-sided box with centered geometry.

🔴 🟡 🟢
var panel = CreateContainerPanel(120, 120);
	
var square = new KtShapes
{
    Width = 70,
    Height = 70,
    Margin = new Padding(5),
    Shape = KtShapes.Shapes.Square,
    FillColor = KtColor.SUCCESS % 50,
    BorderColor = KtColor.SUCCESS,
    BorderThickness = 2,
    FillShape = true
};
	
panel.Controls.Add(square);
Auto
Light
Dark

shapes-square-light shapes-square-dark

shapes-square-light

shapes-square-dark

Rectangle (Shapes.Rectangle)

Draws a four-sided polygon scaled to custom width and height bounds.

🔴 🟡 🟢
var panel = CreateContainerPanel(150, 120);
	
var rect = new KtShapes
{
    Width = 100,
    Height = 65,
    Margin = new Padding(5),
    Shape = KtShapes.Shapes.Rectangle,
    FillColor = KtColor.WARNING % 50,
    BorderColor = KtColor.WARNING,
    BorderThickness = 2,
    FillShape = true
};
	
panel.Controls.Add(rect);
Auto
Light
Dark

shapes-rectangle-light shapes-rectangle-dark

shapes-rectangle-light

shapes-rectangle-dark

Line (Shapes.Line)

Renders a vector stroke across the control’s diagonal plane.

🔴 🟡 🟢
var panel = CreateContainerPanel(120, 120);
	
var line = new KtShapes
{
    Width = 70,
    Height = 70,
    Margin = new Padding(5),
    Shape = KtShapes.Shapes.Line,
    BorderColor = KtColor.CONTENT,
    BorderThickness = 4,
    FillShape = false
};
	
panel.Controls.Add(line);
Auto
Light
Dark

shapes-line-light shapes-line-dark

shapes-line-light

shapes-line-dark

Sides integer Sets the number of sides (minimum 16) for a polygon.

Triangle (Sides = 3)

Renders a 3-sided regular polygon shape with transparent fill to emphasize the border.

🔴 🟡 🟢
var panel = CreateContainerPanel(120, 120);
	
var triangle = new KtShapes
{
    Width = 70,
    Height = 70,
    Margin = new Padding(5),
    Shape = KtShapes.Shapes.Polygon,
    Sides = 3,
    FillColor = KtColor.Rose[60] % 50,
    BorderColor = KtColor.Rose[60],
    BorderThickness = 2,
    FillShape = true
};
	
panel.Controls.Add(triangle);
Auto
Light
Dark

shapes-polygon-triangle-light shapes-polygon-triangle-dark

shapes-polygon-triangle-light

shapes-polygon-triangle-dark

Quadrilateral / Diamond (Sides = 4)

Renders a 4-sided regular polygon shape with emphasized borders.

🔴 🟡 🟢
var panel = CreateContainerPanel(120, 120);
	
var quad = new KtShapes
{
    Width = 70,
    Height = 70,
    Margin = new Padding(5),
    Shape = KtShapes.Shapes.Polygon,
    Sides = 4,
    FillColor = KtColor.PRIMARY % 50,
    BorderColor = KtColor.PRIMARY,
    BorderThickness = 2,
    FillShape = true
};
	
panel.Controls.Add(quad);
Auto
Light
Dark

shapes-polygon-quad-light shapes-polygon-quad-dark

shapes-polygon-quad-light

shapes-polygon-quad-dark

Pentagon (Sides = 5)

Renders a 5-sided regular polygon shape with emphasized borders.

🔴 🟡 🟢
var panel = CreateContainerPanel(120, 120);
	
var pentagon = new KtShapes
{
    Width = 70,
    Height = 70,
    Margin = new Padding(5),
    Shape = KtShapes.Shapes.Polygon,
    Sides = 5,
    FillColor = KtColor.SUCCESS % 50,
    BorderColor = KtColor.SUCCESS,
    BorderThickness = 2,
    FillShape = true
};
	
panel.Controls.Add(pentagon);
Auto
Light
Dark

shapes-polygon-pentagon-light shapes-polygon-pentagon-dark

shapes-polygon-pentagon-light

shapes-polygon-pentagon-dark

Hexagon (Sides = 6)

Renders a 6-sided regular polygon shape with emphasized borders.

🔴 🟡 🟢
var panel = CreateContainerPanel(120, 120);
	
var hexagon = new KtShapes
{
    Width = 70,
    Height = 70,
    Margin = new Padding(5),
    Shape = KtShapes.Shapes.Polygon,
    Sides = 6,
    FillColor = KtColor.WARNING % 50,
    BorderColor = KtColor.WARNING,
    BorderThickness = 2,
    FillShape = true
};
	
panel.Controls.Add(hexagon);
Auto
Light
Dark

shapes-polygon-hexagon-light shapes-polygon-hexagon-dark

shapes-polygon-hexagon-light

shapes-polygon-hexagon-dark

Heptagon (Sides = 7)

Renders a 7-sided regular polygon shape with emphasized borders.

🔴 🟡 🟢
var panel = CreateContainerPanel(120, 120);
	
var heptagon = new KtShapes
{
    Width = 70,
    Height = 70,
    Margin = new Padding(5),
    Shape = KtShapes.Shapes.Polygon,
    Sides = 7,
    FillColor = KtColor.SECONDARY % 50,
    BorderColor = KtColor.SECONDARY,
    BorderThickness = 2,
    FillShape = true
};
	
panel.Controls.Add(heptagon);
Auto
Light
Dark

shapes-polygon-heptagon-light shapes-polygon-heptagon-dark

shapes-polygon-heptagon-light

shapes-polygon-heptagon-dark

Octagon (Sides = 8)

Renders an 8-sided regular polygon shape with emphasized borders.

🔴 🟡 🟢
var panel = CreateContainerPanel(120, 120);
	
var octagon = new KtShapes
{
    Width = 70,
    Height = 70,
    Margin = new Padding(5),
    Shape = KtShapes.Shapes.Polygon,
    Sides = 8,
    FillColor = KtColor.ERROR % 50,
    BorderColor = KtColor.ERROR,
    BorderThickness = 2,
    FillShape = true
};
	
panel.Controls.Add(octagon);
Auto
Light
Dark

shapes-polygon-octagon-light shapes-polygon-octagon-dark

shapes-polygon-octagon-light

shapes-polygon-octagon-dark

FillShape Boolean Sets a value indicating whether shapes will be filled upon drawing.

Wireframe Outline (FillShape = false)

Disables interior shape filling so only the border path is drawn.

🔴 🟡 🟢
var panel = CreateContainerPanel(120, 120);
	
var outline = new KtShapes
{
    Width = 70,
    Height = 70,
    Margin = new Padding(5),
    Shape = KtShapes.Shapes.Circle,
    FillColor = KtColor.Transparent,
    BorderColor = KtColor.PRIMARY,
    BorderThickness = 3,
    FillShape = false
};
	
panel.Controls.Add(outline);
Auto
Light
Dark

shapes-outline-light shapes-outline-dark

shapes-outline-light

shapes-outline-dark

Angle float Sets the angle to be used when drawing polygons and lines.

Rotation (Angle)

Applies a center-point rotation matrix using degree values (e.g. Angle = 45).

🔴 🟡 🟢
var panel = CreateContainerPanel(120, 120);
	
var rotated = new KtShapes
{
    Width = 70,
    Height = 70,
    Margin = new Padding(5),
    Shape = KtShapes.Shapes.Polygon,
    Sides = 5,
    Angle = 45,
    FillColor = KtColor.PRIMARY % 50,
    BorderColor = KtColor.PRIMARY,
    BorderThickness = 2,
    FillShape = true
};
	
panel.Controls.Add(rotated);
Auto
Light
Dark

shapes-rotation-light shapes-rotation-dark

shapes-rotation-light

shapes-rotation-dark

BorderColor Kt-Color Sets the shape border color.
BorderThickness integer Sets the shape border thickness.

Heavy Border (BorderThickness)

Scales the stroke width up to heavy lines using inset pen alignment.

🔴 🟡 🟢
var panel = CreateContainerPanel(120, 120);
	
var thick = new KtShapes
{
    Width = 70,
    Height = 70,
    Margin = new Padding(5),
    Shape = KtShapes.Shapes.Square,
    FillColor = KtColor.PRIMARY % 50,
    BorderColor = KtColor.PRIMARY,
    BorderThickness = 6,
    FillShape = true
};
	
panel.Controls.Add(thick);
Auto
Light
Dark

shapes-border-light shapes-border-dark

shapes-border-light

shapes-border-dark

API Reference
FillColor Kt-Color Sets the shape fill color.
BorderColor Kt-Color Sets the shape border color.
Shape Shapes Sets the shape to be drawn.
FillShape Boolean Sets a value indicating whether shapes will be filled upon drawing.
BorderThickness integer Sets the shape border thickness.
Sides integer Sets the number of sides (minimum 16) for a polygon.
Angle float Sets the angle to be used when drawing polygons and lines.
Previous Kt • Select Next Kt • Slider