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.
// 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();
};
// 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:
|
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.
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.
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.
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");
};
}