Siticone Skeleton Container

The SiticoneSkeletonContainer is a specialized WinForms container control designed to create high-fidelity loading states. Instead of using generic spinners, it overlays a shimmering or pulsing "skeleton" animation directly over your form's layout. It automatically scans its child controls to generate "bones" that match the size and position of your UI elements, creating a seamless transition from loading to content.

Configuration

Properties that control the fundamental behavior of the skeleton animation.

Property	Type	Description & Usage Example
`IsLoading`	bool	skeleton.IsLoading = true; The master switch. When true, the skeleton overlay appears and animation begins. When false, the overlay disappears, revealing the actual controls.
`AnimationMode`	SkeletonAnimationMode	skeleton.AnimationMode = SkeletonAnimationMode.Shimmer; Defines the visual style: • Shimmer: A gradient wave moves across the bones (Standard). • Pulse: The bones fade in and out (Subtle).
`AnimationInterval`	int	skeleton.AnimationInterval = 20; The update interval in milliseconds. Lower values create smoother animations but consume more CPU.

Visual Customization

Properties to match the skeleton style to your application's theme.

Property	Type	Description & Usage Example
`SkeletonColor`	Color	skeleton.SkeletonColor = Color.LightGray; The base background color of the "bones" (inactive state).
`HighlightColor`	Color	skeleton.HighlightColor = Color.WhiteSmoke; For Shimmer: The color of the wave moving across. For Pulse: The color it fades towards.
`BorderRadius`	int	skeleton.BorderRadius = 4; The roundness of the bone corners in pixels. Matches UI elements like rounded buttons or cards.
`AutoCirclePictureBoxes`	bool	skeleton.AutoCirclePictureBoxes = true; If true, any `PictureBox` or `SiticonePictureBox` found inside the container will be drawn as a perfect circle, regardless of BorderRadius. Ideal for user avatars.

Virtual Mode

Virtual Mode allows the skeleton to simulate content even when the container is physically empty. This is useful for "initial load" scenarios where no controls exist yet.

Property	Type	Description & Usage Example
`UseVirtualMode`	bool	skeleton.UseVirtualMode = true; If true, when the container has no visible controls, it will draw a fake list of items instead of showing a blank screen.
`VirtualItemCount`	int	skeleton.VirtualItemCount = 5; The number of fake rows to generate in Virtual Mode.
`VirtualItemHeight`	int	skeleton.VirtualItemHeight = 60; The vertical height (in pixels) of each fake row.

Methods

AddIgnoredControl(Control c)

// Marks a specific control to be ignored by the skeleton overlay.
// This is useful for "Cancel" buttons or headers that should remain visible
// and interactive even while the rest of the form is loading.
siticoneSkeletonContainer1.AddIgnoredControl(btnCancel);

The control will remain visible on top of the skeleton overlay. Internally sets the control's Tag property to "ignore".

Events

Customize the behavior and rendering of the skeleton animation.

Events Wiring & Descriptions

// 1. StateChanged Event
// Fires whenever IsLoading is toggled.
// Useful for syncing other UI elements.
skeleton.StateChanged += (s, e) => 
{
                if (e.IsLoading) 
        lblStatus.Text = "Fetching data...";
                else 
        lblStatus.Text = "Ready";
};

// 2. DrawBone Event
// The most powerful event.
// Fires before every single "bone" is drawn.
// Allows you to customize the shape or color of specific items, or draw them manually.
skeleton.DrawBone += (s, e) => 
{
                // Example: Force a specific button to be drawn as a circle
                if (e.SourceControl == btnUserAvatar)
    {
                // Draw a circle instead of the default rounded rectangle
        e.Graphics.FillEllipse(Brushes.LightGray, e.Bounds);
                // Important: Tell the container we handled the drawing
        e.Handled = true;
    }
};

// 3. AnimationTick Event
// Fires on every frame of the animation timer.
// Use this if you need to synchronize external custom painting with the skeleton loop.
skeleton.AnimationTick += (s, e) => 
{
                // Custom logic here
};

Designer Support

The control comes with extensive Smart Tag support in Visual Studio.

Feature	Description
`Preview Mode`	Toggling `IsLoading` via the Smart Tag instantly previews the animation in the Visual Studio designer, allowing you to fine-tune colors without running the app.
`Undo/Redo`	All changes made via Smart Tags fully support Visual Studio's Undo/Redo stack (Ctrl+Z / Ctrl+Y).
`Categorization`	Properties are organized into Configuration, Visual Style, and Virtual Mode for quick access.

Detailed Usage Examples

Example 1: Basic Async Loading

Wrapping a login form with a skeleton loader during authentication.

C# - Async Login

private async void BtnLogin_Click(object sender, EventArgs e)
{
                // 1. Start Loading Animation
    skelContainer.IsLoading = true;
                try 
    {
                // 2. Perform long-running task
                var user = await AuthService.LoginAsync(txtUser.Text, txtPass.Text);
                // 3. Update UI with real data
        lblWelcome.Text = $"Welcome, {user.Name}";
    }
                finally
    {
                // 4. Stop Animation (reveals the actual controls)
        skelContainer.IsLoading = false;
    }
}

Example 2: Virtual Mode for Lists

Simulating a list of 10 items before the data is fetched from the database.

C# - Virtual List

public UserListForm()
{
    InitializeComponent();
                // Configure Virtual Mode
    skelList.UseVirtualMode = true;
    skelList.VirtualItemCount = 10;
                // Draw 10 fake rows
    skelList.VirtualItemHeight = 70;
                // Start immediately
    skelList.IsLoading = true;
    
                LoadData();
}

private async void LoadData()
{
                var data = await Repo.GetUsersAsync();
                // Populate real controls
                foreach(var item in data) 
    {
                // Add user controls to the panel...
    }
    
                // Turning off IsLoading automatically disables Virtual Mode drawing
                // and shows the newly added real controls.
    skelList.IsLoading = false;
}