Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Play Button

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

ApplyTheme(ThemePreset theme)
// 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.

PlayStateChanged
// 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";
    }
};
ThemeChanged
// 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

ThemePreset Enum
// 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.

C# - Music Player
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.

C# - Physics Tuning
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.

C# - Custom Styling
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;
}