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.
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.
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.
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.
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.
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.
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.
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.
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 = "";
}
}