Siticone Notification Button
The SiticoneNotificationButton is a specialized interactive control designed for notification centers and alert systems.
It combines a scalable vector bell icon with a robust badge system, supporting particle explosions, ripple effects, gesture recognition (long-press), and advanced state management (Mute/Unmute).
Bell Icon & Appearance
Configuration for the central bell icon and its visual states.
| Property | Type | Description & Usage Example |
|---|---|---|
BellColor |
Color | btn.BellColor = Color.WhiteSmoke; The primary color of the bell icon when active. |
MutedColor |
Color |
btn.MutedColor = Color.Red;
The color of the bell icon when IsMuted is true.
|
BellSize |
float | btn.BellSize = 22f; The base size of the bell icon vector. |
BellStrokeWidth |
float | btn.BellStrokeWidth = 2.0f; Thickness of the lines used to draw the bell icon. |
Scale |
float | btn.Scale = 1.2f; Global scale factor for the entire control. 1.0 is original size. Automatically adjusts control Size when set. |
HoverColor |
Color | btn.HoverColor = Color.FromArgb(240, 240, 240); Background color tint applied during mouse hover. |
HoverOpacity |
byte | btn.HoverOpacity = 150; Opacity (0-255) of the hover background effect. |
Badge System
A fully animated numeric badge for displaying counts.
| Property | Type | Description & Usage Example |
|---|---|---|
ShowBadge |
bool | btn.ShowBadge = true; Toggles visibility of the numeric badge. |
BadgeValue |
int | btn.BadgeValue = 5; The number displayed. Values > 99 are formatted as "99+". Increasing this triggers entry animations. |
BadgeAnimationType |
BadgeAnimationType | btn.BadgeAnimationType = BadgeAnimationType.Pulse; Animation style: None, ScaleInOut, Blink, ScaleUp, or Pulse. |
BadgeAnimationSpeed |
int | btn.BadgeAnimationSpeed = 200; Duration of badge animations in milliseconds. |
RefreshBadgeOnClick |
bool | btn.RefreshBadgeOnClick = true; If true, clicking re-triggers the badge animation. |
BadgeBackColor |
Color | btn.BadgeBackColor = Color.Red; |
BadgeTextColor |
Color | btn.BadgeTextColor = Color.White; |
BadgeBorderColor |
Color | btn.BadgeBorderColor = Color.White; |
BadgeBorderThickness |
int | btn.BadgeBorderThickness = 1; |
Animations & Effects
Comprehensive settings for physics-based animations and visual feedback.
| Property | Type | Description & Usage Example |
|---|---|---|
EnableParticles |
bool | btn.EnableParticles = true; Emits a "confetti" explosion of dots on click. |
ParticleColor |
Color | btn.ParticleColor = Color.CornflowerBlue; |
ParticleCount |
int | btn.ParticleCount = 25; Number of particles emitted per click. |
ParticleSpeed |
float | btn.ParticleSpeed = 4.0f; Velocity of the emitted particles. |
EnableRippleEffect |
bool | btn.EnableRippleEffect = true; Draws an expanding circular ripple on click. |
EnablePulseEffect |
bool | btn.EnablePulseEffect = true; Enables a subtle pulsating animation on hover. |
EnableBounce |
bool | btn.EnableBounce = true; Enables a bouncy scale animation when triggered. |
InteractiveBounce |
bool | btn.InteractiveBounce = true; Triggers the bounce effect specifically on mouse click. |
BounceStrength |
float | btn.BounceStrength = 0.4f; Intensity of the bounce (0.1 to 1.0). |
BounceDuration |
int | btn.BounceDuration = 600; Duration of the bounce physics in ms. |
PressDepthOffset |
int | btn.PressDepthOffset = 3; Pixel depth simulated during the press animation. |
HoverAnimationSpeed |
int | btn.HoverAnimationSpeed = 200; |
PressAnimationSpeed |
int | btn.PressAnimationSpeed = 100; |
Behavior & Interaction
Settings for user gestures and state management.
| Property | Type | Description & Usage Example |
|---|---|---|
IsMuted |
bool | if (btn.IsMuted) { ... } Gets or sets the mute state. Draws a slash through the bell when true. |
CanMute |
bool |
btn.CanMute = true;
If true, clicking automatically toggles IsMuted.
|
LongPressDuration |
int |
btn.LongPressDuration = 1000;
Milliseconds to hold click to trigger LongPress event.
|
IsReadOnly |
bool |
btn.IsReadOnly = true;
Disables standard interaction.
Changes cursor to Cursors.No.
|
CanShake |
bool | btn.CanShake = true; If true, shakes the control when clicked while in ReadOnly mode. |
CanBeep |
bool | btn.CanBeep = true; If true, plays system beep when clicked while in ReadOnly mode. |
NotificationTooltip |
string | btn.NotificationTooltip = "Unread Items"; Sets the text for the built-in ToolTip. |
Container Styling
| Property | Type | Description & Usage Example |
|---|---|---|
BorderRadius |
int | btn.BorderRadius = 12; Corner radius for the background shape. |
EnableShadow |
bool | btn.EnableShadow = true; Draws a drop shadow behind the control. |
ShadowColor |
Color | btn.ShadowColor = Color.Black; |
ShadowDepth |
int | btn.ShadowDepth = 3; Offset distance of the shadow. |
Events
// 1. Mute State Changed
// Fired when IsMuted property changes (programmatically or via user action).
notifyBtn.MuteStateChanged += (s, e) =>
{
if (notifyBtn.IsMuted)
Console.WriteLine("Notifications Silenced");
};
// 2. Long Press
// Fired when user holds mouse down for LongPressDuration.
notifyBtn.LongPress += (s, e) =>
{
// Show options menu
contextMenuStrip1.Show(notifyBtn, new Point(0, notifyBtn.Height));
};
// 3. Animation Completion Hooks
notifyBtn.ParticleAnimationCompleted += (s, e) => { /* Particles finished */ };
notifyBtn.HoverAnimationCompleted += (s, e) => { /* Hover transition finished */ };
Designer Support
The control includes a Smart Tag menu for rapid configuration.
| Category | Features |
|---|---|
Theme Presets |
Quickly apply styles: Light, Dark, Orange, Success (Green), Warning (Yellow), Error (Red), Secondary (Gray). |
Quick Config |
Direct access to Tooltip, Scale, IsMuted, and BadgeValue.
|
Utilities |
Copy Settings: Copies visual properties to clipboard. Paste Settings: Applies copied settings to another instance. |
Enumerations
public enum BadgeAnimationType
{
None, // Instant appearance
ScaleInOut, // Grow from center / Shrink to center
Blink, // Fade Opacity In/Out
ScaleUp, // Only scales up (good for incrementing)
Pulse // Continuous heartbeat effect
}
Detailed Examples
Example 1: Interactive Inbox
A notification button that decrements its count when clicked and handles badge updates.
public void SetupInboxButton()
{
// Visual Setup
btnInbox.ShowBadge = true;
btnInbox.BadgeValue = 3;
btnInbox.BadgeAnimationType = BadgeAnimationType.ScaleInOut;
btnInbox.NotificationTooltip = "3 Unread Emails";
// Click Logic
btnInbox.Click += (s, e) =>
{
if (btnInbox.BadgeValue > 0)
{
// Mark one read
btnInbox.BadgeValue--;
// Update Tooltip
if (btnInbox.BadgeValue == 0)
btnInbox.NotificationTooltip = "No new messages";
else
btnInbox.NotificationTooltip = $" {btnInbox.BadgeValue} Unread Emails";
}
else
{
// Open Inbox Window
OpenInbox();
}
};
}
public void ReceiveEmail()
{
btnInbox.BadgeValue++;
btnInbox.NotificationTooltip = $" {btnInbox.BadgeValue} Unread Emails";
// Trigger bounce to grab attention
btnInbox.InteractiveBounce = true;
}
Example 2: Gamification / Achievement Popup
Using heavy particle effects and bouncing to celebrate an event.
private void ConfigureAchievementButton()
{
// Configure for high impact visual
btnReward.EnableParticles = true;
btnReward.ParticleCount = 40;
btnReward.ParticleColor = Color.Gold;
btnReward.ParticleSpeed = 5.0f;
btnReward.EnableBounce = true;
btnReward.BounceStrength = 0.6f;
btnReward.BounceDuration = 800;
btnReward.BadgeValue = 1;
btnReward.BadgeAnimationType = BadgeAnimationType.Pulse;
btnReward.Click += (s, e) =>
{
// Claim reward
ClaimReward();
btnReward.BadgeValue = 0; // Hide badge
};
}
Example 3: System Alert with Mute & Long Press
A multi-functional system tray style button.
private void SetupSystemAlert()
{
btnSystem.CanMute = true; // Toggle mute on single click
btnSystem.LongPressDuration = 1000;
// Handle Mute
btnSystem.MuteStateChanged += (s, e) =>
{
if (btnSystem.IsMuted)
SystemAudio.Mute();
else
SystemAudio.Unmute();
};
// Handle Long Press for settings
btnSystem.LongPress += (s, e) =>
{
ContextMenuStrip cm = new ContextMenuStrip();
cm.Items.Add("Clear All", null, (sender, args) => btnSystem.BadgeValue = 0);
cm.Items.Add("Settings", null, (sender, args) => ShowSettings());
cm.Show(btnSystem, 0, btnSystem.Height);
};
}