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.
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.
// 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.
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.
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...
}
}