JanUI.WinForms
1.1.0
dotnet add package JanUI.WinForms --version 1.1.0
NuGet\Install-Package JanUI.WinForms -Version 1.1.0
<PackageReference Include="JanUI.WinForms" Version="1.1.0" />
<PackageVersion Include="JanUI.WinForms" Version="1.1.0" />
<PackageReference Include="JanUI.WinForms" />
paket add JanUI.WinForms --version 1.1.0
#r "nuget: JanUI.WinForms, 1.1.0"
#:package JanUI.WinForms@1.1.0
#addin nuget:?package=JanUI.WinForms&version=1.1.0
#tool nuget:?package=JanUI.WinForms&version=1.1.0
JanUI — WinForms Control Library
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/assets/logo_title.png" alt="JanUI Logo" width="250" /> </p>
<p align="center"> <img src="https://img.shields.io/nuget/v/JanUI.WinForms?style=flat-square&color=6366f1&label=NuGet" alt="NuGet version"/> <img src="https://img.shields.io/nuget/dt/JanUI.WinForms?style=flat-square&color=10b981&label=Downloads" alt="Downloads"/> <img src="https://img.shields.io/badge/.NET-6%20%7C%208-512BD4?style=flat-square" alt=".NET 6 | 8"/> <img src="https://img.shields.io/badge/Platform-Windows-0078D4?style=flat-square" alt="Windows"/> <img src="https://img.shields.io/badge/License-MIT-f59e0b?style=flat-square" alt="MIT License"/> </p>
<p align="center"> A modern, Bootstrap 5-inspired WinForms control library for .NET 6 and .NET 8.<br/> 21 fully custom-painted, theme-aware controls — no OS chrome, no native widget artifacts. </p>
Screenshot
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/solution_download.png" alt="JanUI Controls Overview" width="800"/> </p>
✨ Features
- 21 custom-painted controls — every control owns its GDI+ paint logic
- 3-layer theming system — user overrides → scheme tokens → JanTheme global
- 8 built-in colour schemes — Primary, Success, Danger, Warning, Info, Secondary, Light, Dark
- VS2022 designer support — full Property Grid integration, ShouldSerialize/Reset pairs
- Bootstrap 5-inspired — familiar API for web developers moving to desktop
- Multi-target —
net6.0-windowsandnet8.0-windows
📦 Installation
# NuGet Package Manager
Install-Package JanUI.WinForms
# .NET CLI
dotnet add package JanUI.WinForms
Requirements:
- .NET 6+ or .NET 8+ (Windows only)
- Add
<UseWindowsForms>true</UseWindowsForms>to your.csproj - Target must include
-windowssuffix (e.g.net8.0-windows) - Visual Studio 2022 recommended
📘 Documentations & Demo | 👉 <a href="https://msujan.netlify.app/projects/janui/docs"> Visit Website</a>
🚀 Quick Start
using JanUI.WinForms.Controls;
using JanUI.WinForms.Themes;
// Apply a global theme to all Default-scheme controls
JanTheme.Apply(ThemePreset.Dark);
// Theme a single button
myButton.ThemeScheme = ColorScheme.Success;
// Show a toast notification
JanAlert.Show(this, "Saved successfully.", JanAlertType.Success, autoDismissMs: 3000);
// Collect user input
string? name = JanInputDialog.ShowText("Enter your name:");
// Load a data table
janTable1.Columns = new List<string> { "ID", "Name", "Status" };
janTable1.LoadData(GetRows());
🎨 Theming
Every colour resolves through three layers — first non-null wins:
| Priority | Layer | How to set |
|---|---|---|
| 1 (highest) | User — per-instance explicit override | button.BackgroundColor = Color.Red |
| 2 | Scheme — full palette via ThemeScheme | button.ThemeScheme = ColorScheme.Danger |
| 3 (fallback) | JanTheme — application-wide global | JanTheme.Apply(ThemePreset.Dark) |
Built-in colour schemes
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/screenshot-schemes.png" alt="JanUI colour schemes" width="700"/> </p>
button.ThemeScheme = ColorScheme.Primary; // Bootstrap blue
button.ThemeScheme = ColorScheme.Success; // Bootstrap green
button.ThemeScheme = ColorScheme.Danger; // Bootstrap red
button.ThemeScheme = ColorScheme.Warning; // Bootstrap amber
button.ThemeScheme = ColorScheme.Info; // Bootstrap cyan
button.ThemeScheme = ColorScheme.Dark; // Dark surface
🧩 Controls
Feedback & Notifications
| Control | Description |
|---|---|
JanAlert |
Bootstrap-style inline alert + floating toast with auto-dismiss |
JanInputDialog |
Modal input dialog — Text, Number, Decimal, Password types |
JanLoaderControl |
Animated loading spinner overlay |
JanProgressBar |
Custom progress bar with sliding value label |
Input Controls
| Control | Description |
|---|---|
JanButton |
Flat-style button with hover/active states |
JanCheckBox |
Custom-painted checkbox with rounded corners |
JanComboBox |
Dropdown with single and multi-select + badge chips |
JanDatePicker |
Date selector with custom themed calendar popup |
JanDropdownMenu |
Fully-themed context menu with 8 colour schemes |
JanRadioButton |
Custom-painted radio button |
JanTextBox |
Text input with placeholder, password mask, underline style |
JanToggleButton |
On/off toggle switch |
Layout & Navigation
| Control | Description |
|---|---|
JanCard |
Gradient card container with shadow and hover effect |
JanPanel |
Rounded panel with gradient background |
JanSidebar |
Expandable navigation sidebar with header, nav, footer sections |
JanSidePanel |
Panel with independent per-corner radius |
Data Display
| Control | Description |
|---|---|
JanChart |
Chart control — Bar, Line, Spline, Area, Pie, Donut |
JanTable |
Full-featured data table with search, sort, pagination, filters |
Decorative & Utilities
| Control | Description |
|---|---|
JanCircularPictureBox |
Circular image frame with gradient border |
JanEllipseControl |
Applies rounded corners to any WinForms control via GDI32 |
JanScrollBar |
Custom scrollbar (used internally by JanTable and JanSidebar) |
📸 Control Gallery
JanButton & JanToggleButton
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanButtons.png" alt="JanButton and JanToggleButton" width="700"/> </p>
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanToggleButton.png" alt="JanButton and JanToggleButton" width="700"/> </p>
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanToggleButton2.png" alt="JanButton and JanToggleButton" width="700"/> </p>
JanTable
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanTable.png" alt="JanTable" width="700"/> </p>
JanChart
1. JanBar Chart - Grouped
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanChart1.png" alt="Jan Bar Chart - Grouped" width="700"/> </p>
2. JanBar Chart - Stacked
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanChart2.png" alt="Jan Bar Chart - Stacked" width="700"/> </p>
3. Jan Line Chart
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanChart3.png" alt="Jan Line Chart" width="700"/> </p>
4. Jan SPLine Chart
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanChart4.png" alt="Jan SPLine Chart" width="700"/> </p>
5. Jan Area Chart
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanChart5.png" alt="Jan Area Chart" width="700"/> </p>
6. Jan Pie Chart
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanChart6.png" alt="Jan Pie Chart" width="700"/> </p>
7. Jan Donut Chart
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanChart7.png" alt="Jan Donut Chart" width="700"/> </p>
JanSidebar
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanSideBar.png" alt="JanSidebar" width="700"/> </p>
JanAlert & JanInputDialog
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/alerts1.png" alt="JanAlert" width="700"/> </p>
JanAlert auto dismissible
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/alerts2.png" alt="JanAlert Auto dismise" width="700"/> </p>
JanInputDialog
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanInputDialogBox.png" alt="JanAlert Auto dismise" width="700"/> </p>
JanComboBox Multi-select & Single-select
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanComboBox.png" alt="JanComboBox multi-select & Single-select" width="700"/> </p>
JanDatePicker
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanDatePicker.png" alt="JanDatePicker and JanCard" width="700"/> </p>
JanCard
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanCard1.png" alt="JanCard" width="700"/> </p> <p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanCard2.png" alt="JanCard" width="700"/> </p> <p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanCard3.png" alt="JanCard" width="700"/> </p>
JanCheckBox
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanCheckbox.png" alt="JanCheckBox" width="700"/> </p>
JanCircularPictureBox
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanCircularPictureBox.png" alt="JanCircularPictureBox" width="700"/> </p>
JanDropdownMenu
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanDropdownMenu.png" alt="JanDropdownMenu" width="700"/> </p>
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanDropdownMenu2.png" alt="JanDropdownMenu" width="700"/> </p>
JanEllipseControl
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanEllipseControl.png" alt="JanEllipseControl" width="700"/> </p>
JanLoader
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanLoader.png" alt="JanLoader" width="700"/> </p>
JanPanel
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanPanel1.png" alt="JanPanel" width="700"/> </p>
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanPanel2.png" alt="JanPanel" width="700"/> </p>
JanProgressBar
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanProgressBar.png" alt="JanProgressBar" width="700"/> </p>
JanRadioButton
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanRadioButton.png" alt="JanRadioButton" width="700"/> </p>
JanScrollBar
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanScrollBar.png" alt="JanScrollBar" width="700"/> </p>
JanSidePanel
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanSidePanel1.png" alt="JanSidePanel" width="700"/> </p>
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanSidePanel2.png" alt="JanSidePanel" width="700"/> </p>
JanTextBox
<p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanTextBox.png" alt="JanTextBox" width="700"/> </p> <p align="center"> <img src="https://raw.githubusercontent.com/Sujan-Murugesh/JanUI.Docs/main/screenshots/JanTextBox2.png" alt="JanTextBox" width="700"/> </p>
💡 Common Patterns
Toast notification
// Success — auto-dismisses
JanAlert.Show(this, "Record saved.", JanAlertType.Success, autoDismissMs: 3500);
// Danger — persistent
JanAlert.Show(this, "Connection failed.", JanAlertType.Danger,
autoDismissMs: 0, position: JanAlertPosition.TopRight);
Sidebar navigation
var sidebar = new JanSidebar
{
Dock = DockStyle.Left,
BrandText = "MyApp",
UserName = "Sujan Perera",
UserEmail = "sujan@example.com"
};
sidebar.Items.Add(new JanSidebarNavItem { Text = "Dashboard", Key = "home" });
sidebar.Items.Add(new JanSidebarNavItem { Text = "Reports", Key = "reports" });
sidebar.NavItemClicked += (s, e) => LoadPage(e.Item.Key);
this.Controls.Add(sidebar);
Data table with search and pagination
var table = new JanTable
{
Dock = DockStyle.Fill,
ShowSearch = true,
ShowPagination = true,
StripedRows = true,
ResponsiveMode = ResponsiveMode.Fill
};
table.Columns = new List<string> { "ID", "Name", "Role", "Status" };
table.LoadData(GetUsers());
table.RowClicked += (s, e) => OpenUser(e.RowData[0]);
this.Controls.Add(table);
Multi-series chart
var chart = new JanChart { ChartType = JanChartType.Bar, Dock = DockStyle.Fill };
var revenue = chart.AddSeries("Revenue", Color.FromArgb(99, 102, 241));
revenue.Points.Add(new JanChartDataPoint("Q1", 48000));
revenue.Points.Add(new JanChartDataPoint("Q2", 62000));
revenue.Points.Add(new JanChartDataPoint("Q3", 57000));
this.Controls.Add(chart);
📐 Namespace Summary
| Namespace | Contents |
|---|---|
JanUI.WinForms.Controls |
All 21 UI controls |
JanUI.WinForms.Themes |
JanTheme, ColorScheme, SchemeToken, JanControlBase |
JanUI.WinForms.Helpers |
Shared enums, drawing utilities, extension methods |
📋 Requirements
| Requirement | Detail |
|---|---|
| .NET version | .NET 6+ or .NET 8+ (Windows only) |
| Windows Forms | <UseWindowsForms>true</UseWindowsForms> in .csproj |
| Target suffix | Must target -windows (e.g. net8.0-windows) |
| IDE | Visual Studio 2022 recommended |
| Platform | Windows only |
📄 License
MIT License — see LICENSE for details.
<p align="center"> Built with ❤️ for the WinForms community<br/> <strong>JanUI.WinForms.Controls</strong> </p>
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net6.0-windows7.0 is compatible. net7.0-windows was computed. net8.0-windows was computed. net8.0-windows7.0 is compatible. net9.0-windows was computed. net10.0-windows was computed. |
-
net6.0-windows7.0
- No dependencies.
-
net8.0-windows7.0
- No dependencies.
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
v1.0.0 — Initial release. 21 controls across Feedback,
Input, Layout, Data Display, and Utilities categories.
v1.1.0
Added:
- JanTable.ColumnDefinitions: new design-time column collection (JanTableColumn) with header text, width, sort/filter/resize/editable flags, and per-column color/font overrides. Editable directly from the Properties window via the standard collection editor.
Changed:
- JanTable.Rows is now runtime-only (LoadData, AddRow, RemoveRow, ClearRows) and no longer appears in the Properties window or supports design-time serialization, since List<string[]> isn't reliably supported by the WinForms designer's code/resource serializer.
Note: Existing code using janTable1.Columns and janTable1.Rows directly continues to work unchanged. ColumnDefinitions and Columns are independent — avoid mixing both on the same instance.