Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Siticone Container

Siticone Container

The SiticoneContainer is a general-purpose, high-performance container designed to group other controls with advanced styling. Unlike the specialized Cards, the Container is built for flexibility, serving as a base for custom layouts, dynamic control generation, and interactive UI sections. It features a complete gradient system, custom borders, ripple effects, and built-in drag-and-drop capabilities.

Appearance & Styling

Fundamental styling properties for background gradients, corner rounding, and shadows.

Property Type Description & Usage Example
BackgroundColor1 Color container.BackgroundColor1 = Color.White; The starting color for the background gradient.
BackgroundColor2 Color container.BackgroundColor2 = Color.WhiteSmoke; The ending color for the background gradient.
BackgroundAngle float container.BackgroundAngle = 90f; The angle of the gradient fill in degrees.
TopLeftRadius int container.TopLeftRadius = 20; Sets independent radius for the top-left corner.
Elevation int container.Elevation = 12; Material Design elevation depth (0-24). Higher numbers create larger shadows.
ShadowColor Color container.ShadowColor = Color.Black;

Advanced Borders

Customize border gradients, thickness, and specialized dash patterns.

Property Type Description & Usage Example
BorderColor1 Color container.BorderColor1 = Color.Cyan; Primary color for the border gradient.
BorderColor2 Color container.BorderColor2 = Color.Blue; Secondary color for the border gradient.
BorderWidth float container.BorderWidth = 2.5f; Width of the border stroke.
ShowBorder bool container.ShowBorder = true;
EnableCustomBorderStyle bool container.EnableCustomBorderStyle = true; Enables the use of BorderStyleEx and custom patterns.
BorderStyleEx CustomBorderStyle container.BorderStyleEx = CustomBorderStyle.Dashed; Options: Solid, Dashed, Dotted, DashDot, Custom, etc.

Visual Effects

Interactive animations that respond to user input or state changes.

Property Type Description & Usage Example
EnableRippleEffect bool container.EnableRippleEffect = true; Activates a Material Design ripple animation on click.
RippleColor Color container.RippleColor = Color.FromArgb(50, Color.White);
EnableClickEffect bool container.EnableClickEffect = true; Container slightly shrinks when clicked to provide tactile feedback.
EnableShimmerEffect bool container.EnableShimmerEffect = true; Shows a passing light effect, commonly used for skeleton loading states.
ShimmerColor Color container.ShimmerColor = Color.FromArgb(40, Color.White);
EnableHoverEffect bool container.EnableHoverEffect = true; Enables smooth transitions of color and shadow when the mouse enters the container.

Notification Badge

A built-in system for displaying numeric counts or alerts on the container.

Property Type Description & Usage Example
BadgeValue int container.BadgeValue = 5; The number to display. Setting to 0 hides the badge.
BadgeColor Color container.BadgeColor = Color.Crimson;
BadgePosition BadgePositionEx container.BadgePosition = BadgePositionEx.TopRight; Placement corner: TopLeft, TopRight, BottomLeft, BottomRight.

Advanced Features

Powerful capabilities for dynamic layouts and data-driven interfaces.

Property Type Description & Usage Example
EnableDragging bool container.EnableDragging = true; Allows the user to drag the container around its parent control.
EnableDynamicContent bool container.EnableDynamicContent = true; Enables the ContentGenerator to automatically populate the container.
DataSource object container.DataSource = myDataObject; The object containing data to be rendered inside the container.
ContentGenerator Func<object, Control> container.ContentGenerator = GenerateView; A function that transforms the DataSource into a Windows Forms Control.
IsReadonly bool container.IsReadonly = true; Blocks interactions. Can trigger a "Shake" animation if clicked.

Detailed Usage Examples

Example 1: Interactive Tile with Badge

Creates a clickable container that acts as a notification tile.

C# - Notification Tile
private SiticoneContainer CreateInboxTile()
{
                var container = new SiticoneContainer
    {
        Size = new Size(120, 120),
        
                // Styling
        BackgroundColor1 = Color.FromArgb(40, 40, 45),
        BackgroundColor2 = Color.FromArgb(20, 20, 25),
        TopLeftRadius = 15,
        TopRightRadius = 15,
        BottomLeftRadius = 15,
        BottomRightRadius = 15,
        Elevation = 8,
        
                // Interaction
        EnableHoverEffect = true,
        HoverBackColor = Color.FromArgb(50, 50, 60),
        EnableRippleEffect = true,
        RippleColor = Color.White,
        
                // Notification Badge
        BadgeValue = 3,
        BadgeColor = Color.Crimson,
        BadgePosition = BadgePositionEx.TopRight
    };

                // Add Icon/Text
                Label lbl = new Label 
    { 
        Text = "Inbox", 
        ForeColor = Color.White, 
        Dock = DockStyle.Bottom, 
        TextAlign = ContentAlignment.MiddleCenter 
    };
    container.Controls.Add(lbl);

                return container;
}

Example 2: Dynamic Content Generation

This example demonstrates the power of `ContentGenerator`. We define a data class `Product`, and the container automatically generates the UI (Image, Price, Name) based on that object.

C# - Dynamic Generation
// 1. Define Data Model
public class Product
{
                public string Name { get; set; }
                public decimal Price { get; set; }
}

private void SetupProductContainer(SiticoneContainer container)
{
                // 2. Configure Container
    container.Size = new Size(200, 100);
    container.EnableDynamicContent = true;
    container.BackgroundColor1 = Color.White;
    container.Elevation = 4;

                // 3. Define Generator Function
                // Converts data object -> UI Controls
    container.ContentGenerator = (data) =>
    {
                var product = data as Product;
        
                var layout = new FlowLayoutPanel { Dock = DockStyle.Fill, FlowDirection = FlowDirection.TopDown };
        
                var nameLbl = new Label { Text = product.Name, Font = new Font("Segoe UI", 10, FontStyle.Bold), AutoSize = true };
                var priceLbl = new Label { Text = $"${product.Price}", ForeColor = Color.Green, AutoSize = true };
        
        layout.Controls.Add(nameLbl);
        layout.Controls.Add(priceLbl);
        
                return layout;
    };

                // 4. Bind Data
    container.DataSource = new Product { Name = "Wireless Mouse", Price = 29.99m };
}

Example 3: Draggable Floating Window

Utilizes the `EnableDragging` property to create a floating tool window that the user can move around.

C# - Draggable Tool
private SiticoneContainer CreateToolWindow()
{
                var toolWindow = new SiticoneContainer
    {
        Size = new Size(180, 250),
        
                // Style as a floating window
        BackgroundColor1 = Color.FromArgb(64, 64, 64),
        Elevation = 15, // High shadow for floating effect
        BorderColor1 = Color.Gray,
        BorderWidth = 1,
        
                // Enable Movement
        EnableDragging = true,
        Cursor = Cursors.SizeAll
    };

                // Drag Event Handlers
    toolWindow.DragStarted += (s, e) => 
    {
        toolWindow.ShadowOpacity = 100; // Darken shadow while dragging
    };
    
    toolWindow.DragCompleted += (s, e) => 
    {
        toolWindow.ShadowOpacity = 50; // Restore shadow
    };

                return toolWindow;
}

Example 4: Skeleton Loading State

Simulates a data loading state using the Shimmer effect.

C# - Loading State
public void SetLoadingState(SiticoneContainer container, bool isLoading)
{
                if (isLoading)
    {
                // Clear content and show shimmer
        container.Controls.Clear();
        container.EnableShimmerEffect = true;
        container.ShimmerColor = Color.FromArgb(50, Color.White);
        container.ShimmerSpeed = 6f;
        
                // Set neutral background
        container.BackgroundColor1 = Color.LightGray;
        container.BackgroundColor2 = Color.LightGray;
    }
                else
    {
                // Disable shimmer and restore colors
        container.EnableShimmerEffect = false;
        container.BackgroundColor1 = Color.White;
        container.BackgroundColor2 = Color.WhiteSmoke;
        
                // Load actual content here...
    }
}