Siticone Pinnable Panel

The SiticonePinnablePanel is an advanced container control that features a built-in "pin" mechanism. Designed to work seamlessly with SiticonePinnablePanelHost , it allows users to mark specific panels as important or "pinned". This control supports rich visual customization including vector patterns, gradients, and specific visual states for Hover and Pinned modes.

Pin Behavior

Core properties controlling the interaction and appearance of the pin mechanism. When used inside a Host control, changing IsPinned will trigger automatic reordering.

Property	Type	Description & Usage Example
`IsPinned`	bool	panel.IsPinned = true; Determines the current state. When set, it triggers the `PinStateChanged` event. If hosted, the parent container will move this panel to the appropriate section.
`AnimatePin`	bool	panel.AnimatePin = true; Enables a fade-in/fade-out animation for the pin icon when hovering over the panel.
`PinIconColor`	Color	panel.PinIconColor = Color.Gray; Color of the thumbtack icon when in the Unpinned state.
`PinnedIconColor`	Color	panel.PinnedIconColor = Color.DodgerBlue; Color of the thumbtack icon when in the Pinned state.

Appearance & Geometry

Control the shape, shadow, and borders of the panel.

Property	Type	Description & Usage Example
`BorderRadius`	int	panel.BorderRadius = 15; Rounding radius for the panel corners.
`BorderThickness`	int	panel.BorderThickness = 2;
`BorderColor`	Color	panel.BorderColor = Color.LightGray;
`ShowShadow`	bool	panel.ShowShadow = true; Renders a drop shadow behind the panel for depth.

Background Patterns

Apply vector-drawn procedural textures to the background for visual interest.

Property	Type	Description & Usage Example
`BackgroundDesign`	BackgroundPatternStyle	panel.BackgroundDesign = BackgroundPatternStyle.Grid; Selects the pattern style. Options: `None`, `Dots`, `Grid`, `DiagonalLines`, `Chevron`, `Hexagons`, `Waves`, `Circles`.
`PatternOpacity`	float	panel.PatternOpacity = 0.3f; Alpha transparency of the pattern overlay (0.0 to 1.0).
`PatternSize`	int	panel.PatternSize = 20; The scale of the pattern elements.

Visual States (Hover & Pinned)

Customize specific colors and gradients for interaction states to provide user feedback.

Property	Type	Description & Usage Example
`HoverBackgroundColor`	Color	panel.HoverBackgroundColor = Color.WhiteSmoke; Background color when mouse enters the panel.
`PinnedBackgroundColor`	Color	panel.PinnedBackgroundColor = Color.AliceBlue; Background color when `IsPinned` is true.
`PinnedBorderColor`	Color	panel.PinnedBorderColor = Color.DodgerBlue; Highlights the border to indicate active pinned state.

Events

Hooks for reacting to user interaction.

Event	Description
`PinStateChanged`	Fired whenever `IsPinned` changes value (either programmatically or via click). This is the main event used by the Host control.
`PinClicked`	Fired specifically when the user clicks the pin icon area.
`MouseEntered`	Fired when the mouse enters the panel bounds (triggers animation).

Theme Presets

Built-in configuration methods to instantly apply professional styles.

C# - Applying Themes

// Applies a clean, corporate look
siticonePinnablePanel1.ApplyModernOfficeTheme();

// Applies a dark interface style with grid patterns
siticonePinnablePanel1.ApplyDarkModeTheme();

// Applies a flat, shadow-heavy material design style
siticonePinnablePanel1.ApplyMaterialCardTheme();

// Applies soft gradients and rounded corners
siticonePinnablePanel1.ApplySoftGradientTheme();

Detailed Usage Examples

Example 1: Standalone Usage

Using the panel as a collapsible widget without a Host control.

C# - Sidebar Logic

private void pnlSidebar_PinStateChanged(object sender, EventArgs e)
{
                if (pnlSidebar.IsPinned)
    {
                // Expand and lock the sidebar
        pnlSidebar.Width = 250;
        this.Padding = new Padding(250, 0, 0, 0); // Push content
        pnlSidebar.PinnedBackgroundColor = Color.AliceBlue;
    }
                else
    {
                // Collapse to icon-only mode
        pnlSidebar.Width = 60;
        this.Padding = new Padding(60, 0, 0, 0);
    }
}

Example 2: Visual Configuration

Programmatically setting up a complex visual style with a hexagonal pattern.

C# - Advanced Styling

private void SetupTechPanel()
{
                var pnl = siticonePinnablePanel1;
    
                // Geometry
    pnl.BorderRadius = 20;
    pnl.BorderThickness = 2;
    pnl.BorderColor = Color.FromArgb(0, 255, 255); // Cyan
    
                // Background Pattern
    pnl.BackgroundDesign = SiticonePinnablePanel.BackgroundPatternStyle.Hexagons;
    pnl.PatternPrimaryColor = Color.FromArgb(30, 30, 40);
    pnl.PatternSecondaryColor = Color.FromArgb(40, 40, 50);
    pnl.PatternOpacity = 0.8f;
    pnl.PatternSize = 25;
    
                // Pin Icon Customization
    pnl.PinIconColor = Color.Cyan;
    pnl.PinnedIconColor = Color.LimeGreen;
    pnl.HoverScale = 1.5f;
    pnl.ShowPinIconBorder = true;
    pnl.PinIconBorderColor = Color.FromArgb(100, 255, 255, 255);
    
                // Pinned State Highlight
    pnl.PinnedBorderColor = Color.LimeGreen;
    pnl.PinnedBackgroundColor = Color.FromArgb(20, 40, 20);
}