Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Tile Button

Siticone TileButton

The SiticoneTileButton is a comprehensive UI control designed for dashboard-style applications. It combines the functionality of a button with the visual richness of a tile, offering built-in support for icons, notifications (badges), loading states, tooltips, and advanced gradients.

Colors & Appearance

Control the fundamental visual style including background colors, gradients, borders, and shadows.

Property Type Description & Usage Example
BaseColor Color tile.BaseColor = Color.FromArgb(50, 150, 215); The primary background color in the resting state.
HoverColor Color tile.HoverColor = Color.FromArgb(70, 170, 235); The background color when the mouse pointer is over the control.
ForeColor Color tile.ForeColor = Color.White; The color of the button text.
UseGradient bool tile.UseGradient = true; Enables a gradient fill instead of a solid color.
GradientDirection LinearGradientMode tile.GradientDirection = LinearGradientMode.ForwardDiagonal; Direction of the gradient fill (Vertical, Horizontal, etc.).
ShowBorder bool tile.ShowBorder = true; Draws a border around the tile.
BorderWidth float tile.BorderWidth = 2f; Thickness of the border.

Text Shadows

Options to enhance text readability via drop shadows.

Property Type Description & Usage Example
ShowTextShadow bool tile.ShowTextShadow = true; Enables a shadow effect behind the button text.
ShadowColor Color tile.ShadowColor = Color.Black;
ShadowOpacity float tile.ShadowOpacity = 0.5f; Transparency of the shadow (0.0 to 1.0).
ShadowOffset Point tile.ShadowOffset = new Point(2, 2); Distance of the shadow from the text.
ShadowDepth int tile.ShadowDepth = 2; Intensity of the text shadow effect.

Corner Styling

Customize the geometry of the tile. Each corner can be individually adjusted to create unique shapes (e.g., leaf, pill, tab).

Property Type Description & Usage Example
TopLeftRadius float tile.TopLeftRadius = 15f;
TopRightRadius float tile.TopRightRadius = 15f;
BottomLeftRadius float tile.BottomLeftRadius = 15f;
BottomRightRadius float tile.BottomRightRadius = 15f;

Icon & Layout

Configuration for the image displayed alongside the text.

Property Type Description & Usage Example
Icon Image tile.Icon = Properties.Resources.DashboardIcon; The image to display.
IconSize Size tile.IconSize = new Size(32, 32); Display dimensions of the icon.
IconAlignment ContentAlignment tile.IconAlignment = ContentAlignment.TopCenter; Position of the icon relative to the tile bounds.
IconPadding int tile.IconPadding = 10; Spacing between the icon and the text.
IconMargin Padding tile.IconMargin = new Padding(5); Outer margin around the icon.

Animations & Ripples

Settings for interactive feedback animations.

Property Type Description & Usage Example
EnableRipple bool tile.EnableRipple = true; Toggles the expanding circular wave effect on click.
RippleColor Color tile.RippleColor = Color.White;
RippleSpeed float tile.RippleSpeed = 20f; Pixels per frame expansion speed.
RippleOpacity float tile.RippleOpacity = 0.2f;
ColorTransitionSpeed float tile.ColorTransitionSpeed = 0.15f; Speed of the background color fade on hover (0.05 to 0.3).
RippleFadeStart float tile.RippleFadeStart = 0.7f; Point in animation when ripple begins to fade out (0-1).
MaxRipples int tile.MaxRipples = 100; Maximum number of simultaneous ripple effects.

Notification Badge

An integrated system for displaying counts or alerts on the tile.

Property Type Description & Usage Example
ShowBadge bool tile.ShowBadge = true; Shows or hides the notification badge.
BadgeText string tile.BadgeText = "5"; The text/number displayed inside the badge.
BadgeColor Color tile.BadgeColor = Color.Red;
BadgePosition Point tile.BadgePosition = new Point(180, 10); Custom coordinates for the badge. Automatically managed on resize.
BadgeFont string tile.BadgeFont = "Segoe UI"; Font family name used for the badge text.

Loading State

Built-in support for asynchronous operation feedback.

Property Type Description & Usage Example
IsLoading bool tile.IsLoading = true; Replaces the content with a spinning loading indicator.
LoadingColor Color tile.LoadingColor = Color.White;

Tooltip Integration

The control includes its own tooltip manager for rich hover descriptions.

Property Type Description & Usage Example
TooltipText string tile.TooltipText = "View detailed reports"; The text shown when hovering.
TooltipBackColor Color tile.TooltipBackColor = Color.Black;
TooltipForeColor Color tile.TooltipForeColor = Color.White;
TooltipFont Font tile.TooltipFont = new Font("Segoe UI", 9f); Font used for the tooltip text.
TooltipInitialDelay int tile.TooltipInitialDelay = 500; Delay in milliseconds before tooltip appears.
TooltipAutoPopDelay int tile.TooltipAutoPopDelay = 5000; Duration tooltip remains visible in milliseconds.
TooltipReshowDelay int tile.TooltipReshowDelay = 100; Delay before showing tooltip again after hiding.
TooltipAlwaysShow bool tile.TooltipAlwaysShow = true; Whether tooltip should always be shown when hovering.

State Management

Features for managing button state and persistence.

Property Type Description & Usage Example
IsToggled bool tile.IsToggled = true; Indicates whether the button is in a toggled state.
PersistState bool tile.PersistState = true; Enables the button to maintain its state across sessions.

Accessibility Features

Properties for improving accessibility and screen reader support.

Property Type Description & Usage Example
AccessibleName string tile.AccessibleName = "Dashboard Button"; The name of the button that will be read by screen readers.
AccessibleDescription string tile.AccessibleDescription = "Navigates to the main dashboard view"; Detailed description of the button's purpose for screen readers.

Designer & Smart Tags

The `SiticoneTileButton` features a robust Smart Tag menu in the Visual Studio Designer. This allows you to quickly apply preset themes or copy styles between buttons.

CopySettings()
Copies all button settings except Name and Location to an in-memory clipboard. Useful for quickly applying the same style to multiple buttons.
PasteSettings()
Pastes all previously copied button settings to the selected button. Maintains consistent styling across your UI.
Reset Control
Available in the designer's context menu. Forces a complete refresh of the control and refreshes the designer UI.

Available Themes (Smart Tag)

  • Modern Blue: Standard material blue with ripples.
  • Flat Material: Flat design, no borders or shadows.
  • Dark: Dark gray background with borders, suitable for dark mode UIs.
  • Gradient Blue: Diagonal gradient fill.
  • Green Success: Standard success color palette.
  • Red Alert: Standard error/alert color palette.
  • Orange Warning: Vibrant orange for warning indicators.
  • Glass: Translucent background with borders.
  • Neon: Dark background with bright cyan text and glowing borders.
  • Minimal Light: Light theme with minimal styling.
  • Pastel: Soft colors with large corner radii.

Detailed Examples

Example 1: Dashboard Navigation Tile

Creates a large tile for a main dashboard menu, featuring an icon at the top and text at the bottom.

C# - Dashboard Tile
private SiticoneTileButton CreateDashboardTile()
{
                var tile = new SiticoneTileButton();
    tile.Size = new Size(150, 150);
    tile.Text = "Analytics";
    tile.Font = new Font("Segoe UI", 12f, FontStyle.Bold);
    
                // Layout
    tile.Icon = Properties.Resources.AnalyticsGraph;
    tile.IconSize = new Size(64, 64);
    tile.IconAlignment = ContentAlignment.TopCenter;
    tile.IconPadding = 20;
    
                // Styling
    tile.BaseColor = Color.FromArgb(45, 45, 48);
    tile.HoverColor = Color.FromArgb(60, 60, 65);
    tile.ForeColor = Color.White;
    tile.CornerRadius = 15f; // Sets all corners
    
                // Effects
    tile.EnableRipple = true;
    tile.RippleColor = Color.FromArgb(100, 255, 255, 255);
    
                return tile;
}

Example 2: Inbox Tile with Notification Badge

Demonstrates how to use the badge system to show unread counts.

C# - Notification Tile
public void UpdateInboxTile(int unreadCount)
{
    inboxTile.Text = "Inbox";
    
                if (unreadCount > 0)
    {
        inboxTile.ShowBadge = true;
        inboxTile.BadgeText = unreadCount.ToString();
        inboxTile.BadgeColor = Color.Crimson;
        
                // Pulse animation is handled automatically by the control
    }
                else
    {
        inboxTile.ShowBadge = false;
    }
}

Example 3: Async Action with Loading State

Handling an asynchronous operation (like syncing data) by switching the tile to a loading state.

C# - Async Loading
private async void SyncTile_Click(object sender, EventArgs e)
{
                var btn = sender as SiticoneTileButton;
    
                try
    {
                // Enter loading state
        btn.IsLoading = true;
        btn.Enabled = false; // Prevent double clicks
        
                // Simulate work
                await Task.Delay(3000);
        
                // Success feedback
        btn.BaseColor = Color.SeaGreen;
        btn.Text = "Synced!";
    }
                finally
    {
                // Reset state
        btn.IsLoading = false;
        btn.Enabled = true;
        
                // Reset text after delay
                await Task.Delay(1500);
        btn.Text = "Sync Data";
        btn.BaseColor = Color.DodgerBlue; 
    }
}

Example 4: Toggle Button with State Persistence

Creates a toggle button that maintains its state, useful for settings or mode switches.

C# - Toggle Button
private void InitializeToggleButton()
{
                var toggleBtn = new SiticoneTileButton();
    toggleBtn.Text = "Dark Mode";
    toggleBtn.Size = new Size(120, 50);
    
                // Toggle styling
    toggleBtn.BaseColor = Color.FromArgb(45, 45, 48);
    toggleBtn.HoverColor = Color.FromArgb(60, 60, 65);
    toggleBtn.IsToggled = false;
    toggleBtn.PersistState = true;
    
                // Different colors for toggled state
    toggleBtn.Click += (s, e) =>
    {
                var btn = s as SiticoneTileButton;
        btn.IsToggled = !btn.IsToggled;
        
                if (btn.IsToggled)
        {
            btn.BaseColor = Color.FromArgb(0, 120, 212);
            btn.Text = "Dark Mode ON";
            btn.BadgeText = "✓";
            btn.ShowBadge = true;
        }
                else
        {
            btn.BaseColor = Color.FromArgb(45, 45, 48);
            btn.Text = "Dark Mode";
            btn.ShowBadge = false;
        }
    };
}

Example 5: Advanced Tooltip Configuration

Shows how to customize tooltip appearance and behavior for better user experience.

C# - Tooltip Customization
private void ConfigureAdvancedTooltip()
{
                var helpButton = new SiticoneTileButton();
    helpButton.Text = "Help";
    helpButton.Icon = Properties.Resources.HelpIcon;
    
                // Tooltip configuration
    helpButton.TooltipText = "Click for detailed documentation and troubleshooting tips.";
    helpButton.TooltipFont = new Font("Segoe UI", 10f);
    helpButton.TooltipBackColor = Color.FromArgb(30, 30, 30);
    helpButton.TooltipForeColor = Color.FromArgb(220, 220, 220);
    helpButton.TooltipInitialDelay = 1000; // 1 second delay
    helpButton.TooltipAutoPopDelay = 8000; // 8 seconds visible
    helpButton.TooltipReshowDelay = 300;   // 300ms delay before showing again
    helpButton.TooltipAlwaysShow = true;
    
                // Accessibility for screen readers
    helpButton.AccessibleName = "Help Button";
    helpButton.AccessibleDescription = "Opens help documentation and troubleshooting guide";
}

Example 6: Custom Ripple Effects

Demonstrates advanced ripple effect configuration for different visual feedback.

C# - Ripple Configuration
private void CreatePremiumButton()
{
                var premiumBtn = new SiticoneTileButton();
    premiumBtn.Text = "Premium Feature";
    
                // Advanced ripple effects
    premiumBtn.EnableRipple = true;
    premiumBtn.RippleColor = Color.FromArgb(100, 255, 215, 0); // Gold ripple
    premiumBtn.RippleSpeed = 25f;    // Faster expansion
    premiumBtn.RippleOpacity = 0.4f; // More visible
    premiumBtn.RippleFadeStart = 0.3f; // Start fading earlier
    premiumBtn.MaxRipples = 50;      // Limit simultaneous ripples
    
                // Smooth color transitions
    premiumBtn.ColorTransitionSpeed = 0.25f; // Very fast transitions
    premiumBtn.BaseColor = Color.FromArgb(30, 30, 40);
    premiumBtn.HoverColor = Color.FromArgb(50, 50, 70);
    
                // Gradient effect
    premiumBtn.UseGradient = true;
    premiumBtn.GradientDirection = LinearGradientMode.Vertical;
}

Example 7: Dynamic Badge Updates

Shows how to dynamically update badge properties and handle badge animations.

C# - Dynamic Badge Management
public class NotificationManager
{
                private SiticoneTileButton _notificationButton;
    
                public void InitializeNotificationButton()
    {
        _notificationButton = new SiticoneTileButton();
        _notificationButton.Text = "Notifications";
        
                // Badge configuration
        _notificationButton.ShowBadge = false; // Start hidden
        _notificationButton.BadgeColor = Color.FromArgb(255, 87, 34); // Orange-red
        _notificationButton.BadgeFont = "Arial"; // Custom font
    }
    
                public void AddNotification()
    {
                // Get current count
                int currentCount = 0;
                if (int.TryParse(_notificationButton.BadgeText, out currentCount))
        {
            currentCount++;
        }
                else
        {
            currentCount = 1;
        }
        
                // Update badge
        _notificationButton.ShowBadge = true;
        _notificationButton.BadgeText = currentCount.ToString();
        
                // Change color based on count
                if (currentCount > 10)
        {
            _notificationButton.BadgeColor = Color.Crimson;
        }
                else if (currentCount > 5)
        {
            _notificationButton.BadgeColor = Color.Orange;
        }
    }
    
                public void ClearNotifications()
    {
        _notificationButton.ShowBadge = false;
        _notificationButton.BadgeText = "";
    }
}