Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Nav Back Button

Siticone Nav Back Button

The SiticoneNavBackButton is a modern, fluid navigation control typically used for "Back" or "Previous" actions in wizard-style interfaces or browser-like applications. It features a vector-based chevron icon that supports physics-based bounce animations, particle explosions on click, rotation interactivity, and deep customization for hover and press states.

Colors & Appearance

Properties to customize the look of the button in various states (Normal, Hover, Pressed).

Property Type Description & Usage Example
IconColor Color navBtn.IconColor = Color.DarkSlateGray; The color of the back chevron icon.
HoverColor Color navBtn.HoverColor = Color.LightGray; The background color when the mouse is hovering over the control.
PressColor Color navBtn.PressColor = Color.DarkGray; The background color when the button is actively pressed.
PressShadowColor Color navBtn.PressShadowColor = Color.Black; The color of the inner shadow effect during a press action.
HoverOpacity byte navBtn.HoverOpacity = 200; Controls the transparency (0-255) of the hover background fill.

Layout & Geometry

Settings for sizing the icon, borders, and overall shape.

Property Type Description & Usage Example
IconSize float navBtn.IconSize = 24f; The size of the chevron icon in pixels.
IconStrokeWidth float navBtn.IconStrokeWidth = 3f; The thickness of the chevron lines.
BorderRadius int navBtn.BorderRadius = 12; Rounds the corners of the button background.
EnableShadow bool navBtn.EnableShadow = true; Toggles a drop shadow behind the button.
ShadowColor Color navBtn.ShadowColor = Color.Black;
ShadowDepth int navBtn.ShadowDepth = 4; The offset distance of the drop shadow.

Animation & Effects

Advanced physics-based animations for rich interactivity.

Property Type Description & Usage Example
EnableRippleEffect bool navBtn.EnableRippleEffect = true; Draws an expanding circular ripple on click.
EnablePulseEffect bool navBtn.EnablePulseEffect = true; Adds a subtle pulsating scale animation to the icon on hover.
InteractiveBounce bool navBtn.InteractiveBounce = true; Enables a bouncy scale physics simulation when clicked.
BounceStrength float navBtn.BounceStrength = 0.4f; The intensity of the bounce (0.1 to 1.0).
BounceDuration int navBtn.BounceDuration = 600; Duration of the bounce animation in ms.
IsInteractive bool navBtn.IsInteractive = true; If true, the chevron rotates slightly (15 degrees) when pressed.
PressDepthOffset int navBtn.PressDepthOffset = 2; Pixel depth the button visually depresses when clicked.
HoverAnimationSpeed int navBtn.HoverAnimationSpeed = 200;
PressAnimationSpeed int navBtn.PressAnimationSpeed = 100;

Particle System

Configure the confetti-like particle explosion effect on click.

Property Type Description & Usage Example
EnableParticles bool navBtn.EnableParticles = true; Enables particle emission on click.
ParticleColor Color navBtn.ParticleColor = Color.CornflowerBlue;
ParticleCount int navBtn.ParticleCount = 20; Number of particles spawned per click.
ParticleSpeed float navBtn.ParticleSpeed = 3.5f; Velocity of the emitted particles.

Behavior & Read-Only

Control interaction modes and read-only feedback.

Property Type Description & Usage Example
IsReadOnly bool navBtn.IsReadOnly = true; If true, standard click actions are disabled. Clicking triggers Shake/Beep feedback instead.
CanShake bool navBtn.CanShake = true; If true, the button shakes horizontally when clicked in ReadOnly mode.
CanBeep bool navBtn.CanBeep = true; If true, plays a system beep when clicked in ReadOnly mode.

Events

Animation Hooks
// Fired when the hover transition finishes
navBtn.HoverAnimationCompleted += (sender, e) => 
{
                Debug.WriteLine("Hover transition done");
};

// Fired when all particles from a click have faded out
navBtn.ParticleAnimationCompleted += (sender, e) =>
{
                Debug.WriteLine("Particles cleared");
};

Designer Support

The control includes a Smart Tag panel for rapid configuration.

Category Features
Theme Presets Apply complete styles instantly: Light, Dark, Orange, Success, Warning, Error, Secondary.
Quick Config Direct access to Shadow, Bounce, and Particle toggles.
Utilities Copy/Paste Settings: Easily replicate styles across multiple buttons.

Detailed Examples

Example 1: Navigation with Feedback

Standard navigation setup with a bounce effect.

C# - Navigation
public void SetupBackButton()
{
    btnBack.InteractiveBounce = true;
    btnBack.BounceStrength = 0.3f;
    btnBack.IsInteractive = true; // Rotates icon slightly on press
    
    btnBack.Click += (s, e) =>
    {
                if (this.NavigationService.CanGoBack)
        {
                this.NavigationService.GoBack();
        }
    };
}

Example 2: Locked State (Read-Only)

Visually indicating that navigation is currently disabled (e.g., during a process).

C# - Locked State
public void DisableNavigation()
{
    btnBack.IsReadOnly = true;
    btnBack.IconColor = Color.Gray;
    
                // Enable haptic visual feedback
    btnBack.CanShake = true;
    btnBack.CanBeep = false;
}

public void EnableNavigation()
{
    btnBack.IsReadOnly = false;
    btnBack.IconColor = Color.Black;
}

Example 3: Theme Application

Using the designer verbs programmatically to switch themes.

C# - Applying Themes
// There is no direct public property for "Theme" in this control,
// but you can manually set the properties to match the presets.

public void ApplyDarkTheme(SiticoneNavBackButton btn)
{
    btn.IconColor = Color.White;
    btn.HoverColor = Color.FromArgb(60, 60, 60);
    btn.PressColor = Color.FromArgb(40, 40, 40);
    btn.ParticleColor = Color.White;
    btn.PressShadowColor = Color.Black;
}