Siticone Play Button
The SiticonePlayButton is a feature-rich, high-performance control designed for media applications.
It features a seamless morphing animation between the "Play" (triangle) and "Pause" (bars) states.
With support for extensive theming, gradients, glowing effects, and haptic-like press animations, it provides a premium user experience out of the box.
Core Behavior
Properties controlling the logic and state of the media button.
| Property | Type | Description & Usage Example |
|---|---|---|
IsPlaying |
bool |
playBtn.IsPlaying = true;
Determines the current state.
False shows the Play icon (Triangle).
True shows the Pause icon (Double Bars).
Changing this property triggers the morph animation.
|
EnablePressScale |
bool | playBtn.EnablePressScale = true; If enabled, the button shrinks slightly when clicked to simulate physical depth. |
PressScaleFactor |
float | playBtn.PressScaleFactor = 0.08f; The intensity of the shrink effect (0.05 to 0.15 is recommended). |
Appearance & Styling
Customize the colors, gradients, and icon geometry.
| Property | Type | Description & Usage Example |
|---|---|---|
Theme |
ThemePreset | playBtn.Theme = ThemePreset.Spotify; Applies a predefined color scheme (e.g., Default, Light, Dark, Primary, Success, etc.). |
ButtonColor1 |
Color | playBtn.ButtonColor1 = Color.Black; The starting color of the button background gradient. |
ButtonColor2 |
Color | playBtn.ButtonColor2 = Color.DarkGray; The ending color of the button background gradient. |
HoverButtonColor1 |
Color | playBtn.HoverButtonColor1 = Color.Gray; The start gradient color when the mouse is over the control. |
HoverButtonColor2 |
Color | playBtn.HoverButtonColor2 = Color.Silver; The end gradient color when the mouse is over the control. |
GradientAngle |
float | playBtn.GradientAngle = 45f; The direction of the linear gradient in degrees. |
IconColor |
Color | playBtn.IconColor = Color.White; The fill color of the Play/Pause symbol. |
IconSizeRatio |
float | playBtn.IconSizeRatio = 0.35f; Scale of the icon relative to button size (0.1 to 0.6). |
IconRounding |
int | playBtn.IconRounding = 2; Pixel rounding applied to the corners of the Play/Pause icon for a softer look. |
Ring System
Configuration for the decorative outer ring surrounding the button.
| Property | Type | Description & Usage Example |
|---|---|---|
EnableRing |
bool | playBtn.EnableRing = true; Toggles the visibility of the outer ring. |
RingThickness |
int | playBtn.RingThickness = 6; The width of the ring in pixels. |
RingColor1 |
Color | playBtn.RingColor1 = Color.Red; Start gradient color of the ring. |
RingColor2 |
Color | playBtn.RingColor2 = Color.Orange; End gradient color of the ring. |
HoverRingColor1 |
Color | playBtn.HoverRingColor1 = Color.Pink; Start gradient color of the ring on hover. |
HoverRingColor2 |
Color | playBtn.HoverRingColor2 = Color.Gold; End gradient color of the ring on hover. |
Effects & Animation
Settings for shadows, glows, and granular control over animation speeds.
| Property | Type | Description & Usage Example |
|---|---|---|
EnableGlow |
bool | playBtn.EnableGlow = true; Enables a soft ambient glow around the ring when hovered. |
GlowColor |
Color | playBtn.GlowColor = Color.FromArgb(100, Color.Cyan); The color of the hover glow effect. |
EnableShadow |
bool | playBtn.EnableShadow = true; Draws a drop shadow behind the entire control. |
ShadowColor |
Color | playBtn.ShadowColor = Color.Black; The color of the drop shadow. |
ShadowOffset |
Point | playBtn.ShadowOffset = new Point(3, 3); The X/Y displacement of the drop shadow. |
EnableIconShadow |
bool | playBtn.EnableIconShadow = true; Adds a subtle internal shadow to the Play/Pause icon for depth. |
IconShadowColor |
Color | playBtn.IconShadowColor = Color.FromArgb(50, 0, 0, 0); The color of the icon's internal shadow. |
AnimationInterval |
int | playBtn.AnimationInterval = 15; Timer tick rate in milliseconds. Lower is smoother but uses more CPU. |
AnimationStep |
float | playBtn.AnimationStep = 0.08f; The speed of the Play <-> Pause morph animation (0.01 to 1.0). |
HoverAnimationStep |
float | playBtn.HoverAnimationStep = 0.1f; The speed of the hover color/glow transition. |
PressAnimationStep |
float | playBtn.PressAnimationStep = 0.12f; The speed of the scale-down animation when pressed. |
Public Methods
// Applies a predefined visual style to the button.
// Useful for quickly switching between Light/Dark modes or app color schemes.
siticonePlayButton1.ApplyTheme(SiticonePlayButton.ThemePreset.Midnight);
Events
Events allow you to react to user interaction and state changes.
// Occurs when the button toggles between Play and Pause.
// This is the primary event for media control logic.
siticonePlayButton1.PlayStateChanged += (sender, e) =>
{
if (e.IsPlaying)
{
// Resume media playback
mediaPlayer.Play();
lblStatus.Text = "Playing...";
}
else
{
// Pause media playback
mediaPlayer.Pause();
lblStatus.Text = "Paused";
}
};
// Occurs when the Theme property is modified.
siticonePlayButton1.ThemeChanged += (sender, e) =>
{
Debug.WriteLine($"Theme changed from {e.OldTheme} to {e.NewTheme}");
};
Designer Support
The control includes a comprehensive Smart Tag menu in the Visual Studio Designer.
| Category | Capabilities |
|---|---|
Quick Themes |
One-click access to apply popular themes directly from the design surface. Available presets include:
Standard: Light, Dark, Primary, Success, Warning, Error. Vibrant: Aqua, Sunset, Midnight, Emerald, Gold, Neon. |
Utilities |
Copy Settings: Snapshots all current visual properties (colors, sizes, effects) to the clipboard. Paste Settings: Applies the copied visual properties to another SiticonePlayButton instance.
|
Live Properties |
Toggle IsPlaying, adjust RingThickness, or enable/disable effects like Glow and Shadow without navigating the Properties grid.
|
Enumerations
// Available themes for the Play Button.
public enum ThemePreset
{
Default, Light, Dark, Primary, Success, Warning, Error,
Aqua, Sunset, Forest, Midnight, Amethyst, Ruby, Emerald,
Sapphire, Gold, Silver, Bronze, Vintage, Neon, Cosmic,
Oceanic, Crimson, Royal, Tangerine, Mint, Lavender,
Graphite, Mocha, RoseGold, Arctic, Inferno, Jade
}
Detailed Examples
Example 1: Music Player Control
A basic implementation controlling a generic media player class.
public void InitializePlayer()
{
// Setup initial appearance
btnPlayPause.Theme = SiticonePlayButton.ThemePreset.Neon;
btnPlayPause.Size = new Size(80, 80);
btnPlayPause.IsPlaying = false;
// Wire up the event
btnPlayPause.PlayStateChanged += BtnPlayPause_PlayStateChanged;
}
private void BtnPlayPause_PlayStateChanged(object sender, PlayStateChangedEventArgs e)
{
if (e.IsPlaying)
{
// User clicked Play
_audioService.Resume();
StartVisualizer();
}
else
{
// User clicked Pause
_audioService.Pause();
StopVisualizer();
}
}
Example 2: Animation Physics Tuning
This example demonstrates how to adjust the AnimationStep properties to create different "feels" for the button.
You can make the button feel snappy and responsive, or slow and elegant.
public void ConfigureButtonFeel(SiticonePlayButton btn, string mode)
{
switch (mode)
{
case "Snappy":
// High values make the transitions near-instant
btn.AnimationStep = 0.25f; // Fast icon morph
btn.HoverAnimationStep = 0.3f; // Fast hover glow
btn.PressAnimationStep = 0.4f; // Immediate press feedback
btn.PressScaleFactor = 0.15f; // Deep press depth
break;
case "Elegant":
// Low values create a "heavy", luxurious feel
btn.AnimationStep = 0.05f; // Slow, deliberate morph
btn.HoverAnimationStep = 0.05f; // Gentle fade in
btn.PressAnimationStep = 0.08f; // Soft press
btn.PressScaleFactor = 0.05f; // Subtle depth
break;
}
}
Example 3: Custom "Cyberpunk" Style
Manually setting properties to create a unique look without using a preset.
private void StyleAsCyberpunk()
{
// Base Gradients (Yellow to Pink)
playBtn.ButtonColor1 = Color.Yellow;
playBtn.ButtonColor2 = Color.DeepPink;
playBtn.GradientAngle = 90f;
// Ring Styling (Electric Blue)
playBtn.EnableRing = true;
playBtn.RingThickness = 5;
playBtn.RingColor1 = Color.Cyan;
playBtn.RingColor2 = Color.Blue;
// Icon
playBtn.IconColor = Color.Black;
playBtn.IconSizeRatio = 0.4f;
// Animations
playBtn.PressScaleFactor = 0.15f; // Heavy press effect
playBtn.EnableGlow = true;
playBtn.GlowColor = Color.Magenta;
}