Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Play Pause Button

Siticone PlayPause Button

The SiticonePlayPauseButton is a specialized media control that seamlessly transitions between Play and Pause icons. It features advanced vector morphing animations, an integrated progress ring, and extensive customization options for borders, backgrounds, and shapes. This control is ideal for modern media players, audio streaming applications, or any UI requiring state-toggled actions.

Core Behavior

Properties controlling the primary state and user interaction logic.

Property Type Description & Usage Example
IsPlaying bool btnMedia.IsPlaying = true; Determines the current state. False displays the Play (Triangle) icon. True displays the Pause (Bars) icon. Toggling this triggers the morph animation.
EnableDoubleClickAction bool btnMedia.EnableDoubleClickAction = true; If enabled, the control raises the DoubleClickActionExecuted event when double-clicked.
DoubleClickActionCommand string btnMedia.DoubleClickActionCommand = "Stop"; A string command associated with the double-click action (e.g., "Stop", "Rewind"). If set to "Stop", the button automatically resets IsPlaying to false.

Progress Indicator

The control features a built-in circular progress indicator that overlays the button border.

Property Type Description & Usage Example
ShowProgress bool btnMedia.ShowProgress = true; Toggles the visibility of the circular progress arc around the button.
PlayProgress float btnMedia.PlayProgress = 0.75f; Sets the current progress value between 0.0 and 1.0 (0% to 100%). Useful for visualizing audio track position or download status.
ProgressColor Color btnMedia.ProgressColor = Color.Lime; The color of the progress arc. Supports semi-transparency (Alpha).

Background & Shape

Customize the geometry and background fill of the control.

Property Type Description & Usage Example
ShowBackground bool btnMedia.ShowBackground = true; Enables filling the button background. If false, the button is transparent.
BackgroundStartColor Color btnMedia.BackgroundStartColor = Color.Blue; The starting color for the background gradient.
BackgroundEndColor Color btnMedia.BackgroundEndColor = Color.Navy; The ending color for the background gradient.
RadialBackgroundDesign bool btnMedia.RadialBackgroundDesign = true; If true, switches the background from a linear gradient to a radial gradient (center-out).
TopLeftRadius int btnMedia.TopLeftRadius = 20; Corner radius in pixels. Set all corners equal to half the width/height to make a circle.

Border Styling

Configure the stroke surrounding the button.

Property Type Description & Usage Example
ShowBorder bool btnMedia.ShowBorder = true; Toggles the visibility of the border.
BorderWidth float btnMedia.BorderWidth = 2.5f; The thickness of the border stroke.
BorderStartColor Color btnMedia.BorderStartColor = Color.Cyan; Gradient start color for the border.
BorderEndColor Color btnMedia.BorderEndColor = Color.Blue; Gradient end color for the border.

Icon Customization

Settings for the Play/Pause vector icon.

Property Type Description & Usage Example
IconColor Color btnMedia.IconColor = Color.White; The base color of the icon.
HoverColor Color btnMedia.HoverColor = Color.Yellow; The color the icon transitions to when the mouse hovers over it.
IconScale float btnMedia.IconScale = 0.7f; Scales the icon relative to the button size (0.1 to 1.0).
StrokeWidth float btnMedia.StrokeWidth = 3f; Thickness of the lines used to draw the Play/Pause symbols.
IconPadding int btnMedia.IconPadding = 10; Spacing between the button edge and the icon.

Animations

Fine-tune the interactive feedback and state transitions.

Property Type Description & Usage Example
EnablePulseEffect bool btnMedia.EnablePulseEffect = true; Activates a subtle "heartbeat" scaling animation when the button is idle.
EnableTransitionAnimations bool btnMedia.EnableTransitionAnimations = true; Enables the vector morphing effect between Play and Pause states. If false, the icon changes instantly.
EnableHoverAnimation bool btnMedia.EnableHoverAnimation = true; Enables smooth color transitions when the mouse enters or leaves the control area.

Events

Hooks for handling user interaction.

StateChanged
// Fired when the IsPlaying property toggles.
// This is the primary event for binding media logic.
btnMedia.StateChanged += (sender, e) =>
{
                if (btnMedia.IsPlaying)
                StartPlayback();
                else
                PausePlayback();
};
DoubleClickActionExecuted
// Fired when EnableDoubleClickAction is true and the user double-clicks.
btnMedia.EnableDoubleClickAction = true;
btnMedia.DoubleClickActionExecuted += (sender, e) =>
{
                MessageBox.Show("Double click detected - stopping media.");
                // Logic handled by DoubleClickActionCommand automatically sets IsPlaying = false if command is "Stop"
};

Designer Support

The control includes a Smart Tag menu for rapid configuration in Visual Studio.

Category Features
Theme Presets Instantly apply professionally designed themes:
  • Standard: Light, Dark, Success, Warning, Error, Primary, Secondary, Info.
  • Stylized: Modern, Retro, Minimalist, Flat UI, Glass.
Shape Actions Make Circle: Automatically sets all corner radii to create a perfect circle based on the control dimensions.
Utilities Copy/Paste Settings: Transfer visual styles between multiple instances of the control.
Reset All: Reverts the control to its factory default state.

Detailed Examples

Example 1: Audio Player Integration

A standard implementation connecting the button to an audio engine.

C# - Audio Controller
public void InitializeAudioButton()
{
                // 1. Setup Visuals
    btnAudio.ShowBackground = true;
    btnAudio.BackgroundStartColor = Color.FromArgb(30, 30, 30);
    btnAudio.BackgroundEndColor = Color.Black;
    btnAudio.IconColor = Color.White;
    btnAudio.HoverColor = Color.Cyan;
    
                // 2. Setup Progress Ring
    btnAudio.ShowProgress = true;
    btnAudio.ProgressColor = Color.Cyan;
    btnAudio.BorderWidth = 2;
    
                // 3. Wire Logic
    btnAudio.StateChanged += (s, e) => 
    {
                if (btnAudio.IsPlaying)
            audioEngine.Play();
                else
            audioEngine.Pause();
    };
    
                // 4. Update Progress via Timer (simulated)
    updateTimer.Tick += (s, e) => 
    {
                if (btnAudio.IsPlaying)
        {
                float currentPos = audioEngine.Position / audioEngine.Duration;
            btnAudio.PlayProgress = currentPos;
        }
    };
}

Example 2: Styling - "Glass" Effect

Demonstrates how to use alpha channels and radial gradients to create a glass-like aesthetic.

C# - Glass Style
private void ApplyGlassStyle(SiticonePlayPauseButton btn)
{
                // Enable radial mode for depth
    btn.RadialBackgroundDesign = true;
    btn.ShowBackground = true;
    btn.ShowBorder = true;

                // Semi-transparent gradients simulating glass reflection
    btn.BackgroundStartColor = Color.FromArgb(80, 255, 255, 255); // Inner highlight
    btn.BackgroundEndColor = Color.FromArgb(60, 200, 200, 200);   // Outer shadow

                // Subtle border
    btn.BorderStartColor = Color.FromArgb(120, 255, 255, 255);
    btn.BorderEndColor = Color.FromArgb(100, 180, 180, 180);
    btn.BorderWidth = 1.5f;

                // Icon styling
    btn.IconColor = Color.White;
    btn.HoverColor = Color.FromArgb(240, 240, 240);
    
                // Enable pulse for "alive" feel
    btn.EnablePulseEffect = true;
}

Example 3: Double Click Stop Action

Configures the button to stop (reset) when double-clicked, while toggling Play/Pause on single clicks.

C# - Double Click Logic
private void SetupDoubleClickListener()
{
    btnMedia.EnableDoubleClickAction = true;
    btnMedia.DoubleClickActionCommand = "Stop"; // Auto-resets IsPlaying to false

    btnMedia.DoubleClickActionExecuted += (s, e) =>
    {
                // Handle external logic for "Stop"
        mediaPlayer.Stop();
        mediaPlayer.Seek(0);
        btnMedia.PlayProgress = 0f;
        
                Console.WriteLine("Media Stopped via Double Click");
    };
}