Siticone Flow Panel
The SiticoneFlowPanel is an advanced upgrade to the standard FlowLayoutPanel, engineered for modern, high-performance applications.
It introduces features like smooth scrolling, layout animations, UI virtualization for handling large collections,
and automatic DPI scaling, making it the perfect container for dynamic lists, galleries, and responsive forms.
Performance & Virtualization
Core features designed to keep your application responsive even with hundreds of child controls.
| Property | Type | Description & Usage Example |
|---|---|---|
EnableVirtualization |
bool | flowPanel.EnableVirtualization = true; Only renders controls currently visible in the viewport. Crucial for lists with 100+ items. |
VirtualizationThreshold |
int | flowPanel.VirtualizationThreshold = 50; The minimum number of child controls required before virtualization logic activates. |
EnableLayoutCaching |
bool | flowPanel.EnableLayoutCaching = true; Caches control positions to prevent recalculation during minor updates, boosting rendering speed. |
Behavior & Animation
Settings to control scrolling fluidity and layout transitions.
| Property | Type | Description & Usage Example |
|---|---|---|
EnableSmoothScrolling |
bool | flowPanel.EnableSmoothScrolling = true; Replaces the jerky default scroll with a smooth, interpolated animation. |
EnableAnimations |
bool | flowPanel.EnableAnimations = true; Animates controls sliding into new positions when added, removed, or reordered. |
EnableDragDrop |
bool | flowPanel.EnableDragDrop = true; Allows users to reorder child controls by dragging them with the mouse. |
Layout & Spacing
Fine-tune how child controls are arranged within the panel.
| Property | Type | Description & Usage Example |
|---|---|---|
ItemSpacing |
int | flowPanel.ItemSpacing = 10; Sets a uniform margin (gap) between all child controls automatically. |
EnableWrapping |
bool | flowPanel.EnableWrapping = true; If true, items flow to the next line/column. If false, they continue in a single direction. |
EnableSnapToGrid |
bool | flowPanel.EnableSnapToGrid = true; Forces child controls to align to a virtual grid for pixel-perfect layouts. |
GridSize |
int | flowPanel.GridSize = 20; The size of the grid cells used for snapping. |
System & Scaling
Built-in support for modern display requirements and theming.
| Property | Type | Description & Usage Example |
|---|---|---|
EnableAutoScale |
bool | flowPanel.EnableAutoScale = true; Automatically resizes child controls based on the monitor's DPI settings (e.g., 100%, 125%, 150%). |
IsTrackingTheme |
bool |
flowPanel.IsTrackingTheme = true;
Monitors Windows system theme changes (Light/Dark mode) and fires the SystemThemeChanged event.
|
EnableTransparency |
bool | flowPanel.EnableTransparency = true; Allows the background of the panel to be fully transparent, showing controls behind it. |
Extension Methods
Helper methods included with the control to simplify complex layout tasks.
// Automatically arranges all child controls into a strict grid layout.
// Useful for galleries, product lists, or dashboards.
siticoneFlowPanel1.ArrangeInGrid(3); // 3 columns wide
// Resizes the FlowPanel itself to perfectly fit all its child controls.
// Eliminates empty whitespace after dynamic content loading.
siticoneFlowPanel1.AutoSizeToContents();
// Smoothly scrolls the panel until the target control is visible.
var target = siticoneFlowPanel1.Controls[15];
siticoneFlowPanel1.ScrollToControl(target, true);
Events
| Event | Description |
|---|---|
SystemThemeChanged |
Fired when the Windows OS theme switches (e.g., Light to Dark). Useful for updating UI colors in real-time. |
ItemDragging |
Fired when a user starts dragging a child control (requires EnableDragDrop = true). |
DpiChanged |
Fired when the application window moves to a monitor with a different DPI scale. |
VirtualizationStateChanged |
Fired when virtualization activates or deactivates based on the item count threshold. |
Detailed Usage Examples
Example 1: Smooth Scrolling Gallery
Creates an image gallery that scrolls smoothly, ideal for touch or modern mouse interactions.
private void InitializeGallery()
{
siticoneFlowPanel1.EnableSmoothScrolling = true;
siticoneFlowPanel1.ItemSpacing = 15;
siticoneFlowPanel1.AutoScroll = true;
// Add 50 sample images
for (int i = 0; i < 50; i++)
{
var picBox = new PictureBox
{
Size = new Size(150, 150),
SizeMode = PictureBoxSizeMode.Zoom,
BackColor = Color.WhiteSmoke,
BorderStyle = BorderStyle.FixedSingle
};
// Load image async or form resources...
siticoneFlowPanel1.Controls.Add(picBox);
}
}
Example 2: Animated Todo List
Items slide into place when added, creating a polished, interactive feel.
private void btnAddTodo_Click(object sender, EventArgs e)
{
// Ensure animations are ON
siticoneFlowPanel1.EnableAnimations = true;
var item = new CheckBox
{
Text = txtNewTask.Text,
Font = new Font("Segoe UI", 12),
AutoSize = true,
Padding = new Padding(5)
};
// When added, the control will slide up from the bottom
siticoneFlowPanel1.Controls.Add(item);
// Scroll to the new item smoothly
siticoneFlowPanel1.ScrollToControl(item, true);
}
Example 3: High-Performance Data Grid
Using virtualization to handle a massive list of custom user controls without freezing the UI.
private void LoadLargeDataset()
{
// Enable performance features
siticoneFlowPanel1.EnableVirtualization = true;
siticoneFlowPanel1.VirtualizationThreshold = 100; // Start optimizing after 100 items
siticoneFlowPanel1.EnableLayoutCaching = true;
siticoneFlowPanel1.SuspendLayout();
for (int i = 0; i < 1000; i++)
{
var card = new UserCardControl
{
UserName = $"User {i}",
Status = "Active"
};
siticoneFlowPanel1.Controls.Add(card);
}
siticoneFlowPanel1.ResumeLayout();
}
Example 4: Theme-Aware Layout
Automatically adjusting background colors when the user switches Windows themes.
private void SetupThemeTracking()
{
siticoneFlowPanel1.IsTrackingTheme = true;
siticoneFlowPanel1.SystemThemeChanged += OnThemeChanged;
}
private void OnThemeChanged(object sender, SystemThemeChangedEventArgs e)
{
if (e.NewTheme == SystemTheme.Dark)
{
siticoneFlowPanel1.BackColor = Color.FromArgb(30, 30, 30);
// Update child controls for dark mode...
}
else
{
siticoneFlowPanel1.BackColor = Color.White;
// Update child controls for light mode...
}
}