Siticone Expressive Tile

The SiticoneExpressiveTile is a dynamic, multi-purpose tile control designed for dashboards, menus, and high-level navigation. Unlike standard buttons, it supports 4-zone interaction detection, allowing different actions depending on where the user clicks (Top, Bottom, Left, Right, or Center). It features advanced shape morphing animations, liquid ripple effects, and extensive icon support for creating rich, interactive card-like interfaces.

Colors & Gradients

Define the visual identity of the tile across its various states (Idle, Hover, Press, Disabled).

Property	Type	Description & Usage Example
`FillColor`	Color	tile.FillColor = Color.DodgerBlue; The primary background color in the idle state.
`FillColor2`	Color	tile.FillColor2 = Color.Cyan; The secondary background color. If different from FillColor, a gradient is automatically rendered.
`GradientMode`	LinearGradientMode	tile.GradientMode = LinearGradientMode.ForwardDiagonal; Determines the direction of the gradient fill (e.g., Vertical, Horizontal).
`HoverFillColor`	Color	tile.HoverFillColor = Color.FromArgb(50, 150, 255); Background color when the mouse hovers over the tile.
`PressFillColor`	Color	tile.PressFillColor = Color.DarkBlue; Background color when the tile is actively pressed.
`RippleColor`	Color	tile.RippleColor = Color.White; The color of the expanding ink ripple effect on click.

Shape & Expressions

Control the geometry of the tile and its "expressive" animations (morphing).

Property	Type	Description & Usage Example
`BorderRadius`	int	tile.BorderRadius = 20; The corner radius in the idle state. Higher values make the tile rounder.
`EnableExpressions`	bool	tile.EnableExpressions = true; Master switch for shape morphing. If true, the tile can change its radius or squeeze when pressed.
`PressedBorderRadius`	int	tile.PressedBorderRadius = 10; The target corner radius when pressed. The tile will smoothly morph to this shape.
`SqueezeOnPress`	bool	tile.SqueezeOnPress = true; If true, the tile "squeezes" (indents) on all 4 sides when clicked, simulating physical material flex.
`SqueezeDepth`	int	tile.SqueezeDepth = 5; The pixel depth of the 4-sided squeeze effect.
`LiquidEffect`	bool	tile.LiquidEffect = true; When enabled, shape transitions (radius/squeeze) use a fluid physics model with subtle waves instead of linear interpolation.

Icons & Text

Manage the layout of text and up to 4 icons (Top, Bottom, Left, Right).

Property	Type	Description & Usage Example
`Text`	string	tile.Text = "Dashboard"; The tile caption, centered by default.
`TopIcon`	Image	tile.TopIcon = Properties.Resources.UpArrow; An icon displayed at the top edge.
`BottomIcon`	Image	tile.BottomIcon = Properties.Resources.DownArrow; An icon displayed at the bottom edge.
`LeftIcon`	Image	tile.LeftIcon = Properties.Resources.Back; An icon displayed on the left edge.
`RightIcon`	Image	tile.RightIcon = Properties.Resources.Forward; An icon displayed on the right edge.

Advanced Behavior

Settings for interaction modes, accessibility, and feedback.

Property	Type	Description & Usage Example
`IsReadOnly`	bool	tile.IsReadOnly = true; Disables normal clicks and grays out the tile. Unlike `Enabled=false`, it can still receive certain events (like shake feedback).
`EnableRipples`	bool	tile.EnableRipples = true; Toggles the expanding ink ripple effect on click.
`EnableKeyboardSupport`	bool	tile.EnableKeyboardSupport = true; Allows the tile to be triggered via Enter/Space keys when focused.
`CanShake`	bool	tile.CanShake = true; If true, the tile shakes horizontally when clicked while in ReadOnly mode.

Public Methods

Programmatic Interaction

// Simulates a full click, including visual press/release animations.
tile.PerformClickEx();

// Simulates a click with a ripple starting from a specific coordinate.
tile.PerformRippleClick(new Point(50, 50));

// Manually triggers the error shake animation.
tile.TriggerShake();

Events & Zones

The TileClicked event is the most powerful feature, providing the exact "Zone" the user interacted with.

Handling Zone Clicks

// Use TileClicked instead of Click to get Zone info
tile.TileClicked += (s, e) => 
{
                switch (e.Zone)
    {
                case TileInteractionZone.TopZone:
                MoveUp();
                break;
                case TileInteractionZone.BottomZone:
                MoveDown();
                break;
                case TileInteractionZone.LeftZone:
                GoBack();
                break;
                case TileInteractionZone.RightZone:
                GoForward();
                break;
                default: // Center
                OpenDetails();
                break;
    }
};

Detailed Usage Examples

Example 1: Dashboard Navigation Tile

A tile that acts as a central hub, using zone clicks for quick actions.

C# - Multi-Action Tile

public void SetupNavTile()
{
    tile.Text = "Sales Reports";
    tile.FillColor = Color.DarkSlateBlue;
    tile.Size = new Size(250, 150);
    
                // Add icons for quick actions
    tile.RightIcon = Properties.Resources.Next;
    tile.BottomIcon = Properties.Resources.Download;
    
                // Configure Click Logic
    tile.TileClicked += (s, e) => 
    {
                if (e.Zone == TileInteractionZone.RightZone)
                NavigateToNextReport();
                else if (e.Zone == TileInteractionZone.BottomZone)
                DownloadPDF();
                else
                OpenReportOverview();
    };
}

Example 2: Liquid "Add New" Card

A visually engaging "Add" button for lists or grids.

C# - Liquid Add Card

public void SetupAddTile()
{
    tile.Text = "+";
    tile.Font = new Font("Segoe UI", 36, FontStyle.Bold);
    tile.FillColor = Color.Transparent;
    tile.BorderColor = Color.Gray;
    tile.BorderSize = 2;
    
                // Liquid morphing effect on click
    tile.EnableExpressions = true;
    tile.LiquidEffect = true;
    tile.SqueezeOnPress = true;
    tile.SqueezeDepth = 8;
    
                // Become rounder when pressed
    tile.BorderRadius = 15;
    tile.PressedBorderRadius = 30;
}

Designer Support

The SiticoneExpressiveTile includes a powerful Smart Tag panel in Visual Studio.

24+ Themes: Instantly apply presets like "Neon Cyber", "Material Blue", or "Minimalist Black".
Clipboard Tools: Copy the exact visual style of one tile and paste it onto another with one click.
Quick Config: Easily toggle Icons, Ripples, and ReadOnly modes directly from the design surface.