Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Flow Panel

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.

ArrangeInGrid(int columns)
// Automatically arranges all child controls into a strict grid layout.
// Useful for galleries, product lists, or dashboards.
siticoneFlowPanel1.ArrangeInGrid(3); // 3 columns wide
AutoSizeToContents()
// Resizes the FlowPanel itself to perfectly fit all its child controls.
// Eliminates empty whitespace after dynamic content loading.
siticoneFlowPanel1.AutoSizeToContents();
ScrollToControl(Control, bool animate)
// 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.

C# - Gallery Setup
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.

C# - Animated List
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.

C# - Virtualized List
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.

C# - System Theme
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...
    }
}