Siticone Dashboard Card

The SiticoneDashboardCard is a highly customizable container control designed specifically for building modern analytical dashboards. It features independent corner radii, rich gradient backgrounds, pattern overlays, and extensive border styling options (including Morse Code and Railroad dashes). It is double-buffered and composited for high-performance rendering.

Geometry & Radius

Configure the physical shape of the card using independent corner control.

Property	Type	Description & Usage Example
`TopLeftRadius`	int	card.TopLeftRadius = 20; Radius of the top-left corner in pixels.
`TopRightRadius`	int	card.TopRightRadius = 20;
`BottomRightRadius`	int	card.BottomRightRadius = 20;
`BottomLeftRadius`	int	card.BottomLeftRadius = 20;

Border Styling

Advanced border control with gradients, smoothing, and over 15 distinct dash styles.

Property	Type	Description & Usage Example
`BorderColor`	Color	card.BorderColor = Color.DimGray; The solid color of the border (used if GradientMode is None).
`BorderThickness`	float	card.BorderThickness = 2.5f; Width of the border in pixels.
`BorderDashStyle`	SiticoneDashStyle	card.BorderDashStyle = SiticoneDashStyle.MorseCode; The pattern of the border line. Options include: `Solid`, `Dot`, `Railroad`, `MorseCode`, `ChainLink`, etc.
`EnableBorderSmoothing`	bool	card.EnableBorderSmoothing = true; Applies anti-aliasing to border lines for a smoother look.
`BorderGradientMode`	GradientMode	card.BorderGradientMode = GradientMode.Horizontal; Direction of the gradient on the border stroke.
`BorderStartColor`	Color	card.BorderStartColor = Color.Cyan;
`BorderEndColor`	Color	card.BorderEndColor = Color.Magenta;

Background & Patterns

Style the card interior with gradients and overlay patterns.

Property	Type	Description & Usage Example
`BackgroundGradientMode`	GradientMode	card.BackgroundGradientMode = GradientMode.ForwardDiagonal; Direction of the background fill. Options: `None`, `Horizontal`, `Vertical`, `ForwardDiagonal`, `BackwardDiagonal`, `Radial`.
`BackgroundStartColor`	Color	card.BackgroundStartColor = Color.FromArgb(30, 30, 30);
`BackgroundEndColor`	Color	card.BackgroundEndColor = Color.Black;
`BackgroundPattern`	BackgroundPatternDbfx	card.BackgroundPattern = BackgroundPatternDbfx.Dots; Overlays a pattern (e.g., Dots) on top of the background color/gradient.
`PatternOpacity`	float	card.PatternOpacity = 0.3f; Transparency of the pattern overlay (0.0 to 1.0).
`PatternSize`	int	card.PatternSize = 12; Size (in pixels) of the pattern tile elements.

Performance

Options to optimize rendering for complex layouts.

Property	Type	Description & Usage Example
`UltraFastPerformance`	bool	card.UltraFastPerformance = true; When true, disables gradients and patterns. Uses solid colors for instant rendering. Ideal for data grids containing hundreds of cards.

Enumerations

SiticoneDashStyle Enum

public enum SiticoneDashStyle
{
    Solid, Dash, Dot, DashDot, DashDotDot, 
    LongDash, FineDot, WideDash, LooseDash, 
    Railroad, MorseCode, ChainLink, DottedLine, 
    HeavyDash, MicroDash, AlternatingDash
}

Detailed Usage Examples

Example 1: Basic Dashboard Metric

A simple card layout for displaying a single KPI (Key Performance Indicator).

C# - KPI Card

private SiticoneDashboardCard CreateKPICard()
{
                var card = new SiticoneDashboardCard
    {
        Size = new Size(250, 120),
                // Geometry
        TopLeftRadius = 15,
        TopRightRadius = 15,
        BottomLeftRadius = 15,
        BottomRightRadius = 15,
        
                // Styling
        BorderThickness = 1.5f,
        BorderColor = Color.LightGray,
        BackgroundStartColor = Color.White,
        BackgroundGradientMode = GradientMode.None
    };

                // Add Child Controls
                var lblTitle = new Label 
    { 
        Text = "TOTAL REVENUE", 
        ForeColor = Color.Gray, 
        Location = new Point(20, 20),
        AutoSize = true
    };
    
                var lblValue = new Label 
    { 
        Text = "$45,200", 
        ForeColor = Color.Black, 
        Font = new Font("Segoe UI", 24, FontStyle.Bold),
        Location = new Point(15, 45),
        AutoSize = true
    };

    card.Controls.Add(lblTitle);
    card.Controls.Add(lblValue);
    
                return card;
}

Example 2: Premium Gradient Card

Uses gradients on both the background and border to create a high-end look.

C# - Premium Gradient

private SiticoneDashboardCard CreatePremiumCard()
{
                return new SiticoneDashboardCard
    {
        Size = new Size(300, 150),
        
                // Background Gradient (Dark Blue to Purple)
        BackgroundGradientMode = GradientMode.ForwardDiagonal,
        BackgroundStartColor = Color.FromArgb(40, 20, 60),
        BackgroundEndColor = Color.FromArgb(20, 20, 40),
        
                // Border Gradient (Neon look)
        BorderGradientMode = GradientMode.Horizontal,
        BorderStartColor = Color.Cyan,
        BorderEndColor = Color.Magenta,
        BorderThickness = 3.0f,
        
                // Custom Corners
        TopLeftRadius = 30,
        BottomRightRadius = 30,
        TopRightRadius = 5,
        BottomLeftRadius = 5
    };
}

Example 3: Patterned Background

Demonstrates using the pattern overlay feature for texture.

C# - Patterned Texture

private SiticoneDashboardCard CreateTexturedCard()
{
                return new SiticoneDashboardCard
    {
        Size = new Size(200, 200),
        
                // Base Color
        BackgroundStartColor = Color.FromArgb(240, 240, 240),
        
                // Pattern Configuration
        BackgroundPattern = BackgroundPatternDbfx.Dots,
        PatternOpacity = 0.2f, // Subtle visibility
        PatternSize = 8,       // Density of dots
        
                // Dotted Border to match
        BorderColor = Color.DarkGray,
        BorderDashStyle = SiticoneDashStyle.FineDot,
        BorderThickness = 2f
    };
}

Example 4: "Midnight Slate" Theme Programmatically

Replicates the "Midnight Slate" theme available in the designer smart tags via code.

C# - Theming

public void ApplyMidnightTheme(SiticoneDashboardCard card)
{
    card.BackgroundGradientMode = GradientMode.Vertical;
    card.BackgroundStartColor = Color.FromArgb(45, 52, 54);
    card.BackgroundEndColor = Color.FromArgb(30, 30, 30);
    
    card.BorderColor = Color.FromArgb(80, 80, 80);
    card.BorderThickness = 1.0f;
    card.BorderDashStyle = SiticoneDashStyle.Solid;
    
    card.TopLeftRadius = 10;
    card.TopRightRadius = 10;
    card.BottomLeftRadius = 10;
    card.BottomRightRadius = 10;
}

Designer Support

The control includes extensive design-time support via Smart Tags. You can access 18 pre-built themes (such as "Arctic White", "Ocean Breeze", "Tech Noir") directly from the Visual Studio designer by clicking the smart tag arrow on the control.

Copy/Paste Settings: The designer also supports copying the visual settings of one card to the clipboard and pasting them onto another, enabling rapid dashboard prototyping.