Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Navigator Button

Siticone Navigator Button

The SiticoneNavigatorButton is a highly versatile, directional control designed for modern navigation interfaces. It combines a fully customizable chevron or arrow icon with an extensive animation engine (rotate, pulse, slide, fade), a robust badge system, sound effects, and over 40 pre-defined visual themes.

Icon & Geometry

Settings to control the shape, size, and orientation of the central navigation icon.

Property Type Description & Usage Example
IconType NavigatorIconType btn.IconType = NavigatorIconType.ForwardChevron; The direction of the icon: BackChevron, ForwardChevron, TopChevron, or BottomChevron.
IconVariant NavigatorIconVariant btn.IconVariant = NavigatorIconVariant.Arrow; Chevron: Simple V-shape.
Arrow: Adds a tail to the chevron.
ArrowTailLength float btn.ArrowTailLength = 18f; Length of the arrow tail in pixels. Only applies if IconVariant is Arrow.
IconSize Size btn.IconSize = new Size(10, 18); The width and height of the icon graphic.
IconThickness float btn.IconThickness = 2.5f; Stroke width of the icon lines.
IconColor Color btn.IconColor = Color.White;

Theming & Colors

The control features a powerful theming engine with gradient support and 40+ built-in presets.

Property Type Description & Usage Example
CurrentTheme NavigatorControlTheme btn.CurrentTheme = NavigatorControlTheme.Neon; Applies a preset theme. Options include Light, Dark, Primary, Success, Neon, Glass, Midnight, etc. Setting custom colors automatically switches this to Custom.
BackColorStart Color btn.BackColorStart = Color.Blue;
BackColorEnd Color btn.BackColorEnd = Color.Cyan;
GradientAngle float btn.GradientAngle = 45f; Angle of the background gradient fill.
HoverBackColor Color btn.HoverBackColor = Color.LightBlue;
PressedBackColor Color btn.PressedBackColor = Color.DarkBlue;

Animations

An extensive animation engine controls how the icon reacts to user interaction.

Property Type Description & Usage Example
EnableAnimations bool btn.EnableAnimations = true; Master switch for icon animations.
AnimationType NavigatorIconAnimationType btn.AnimationType = NavigatorIconAnimationType.Rotate; The effect to apply: Pulse, Rotate, Fade, SlideUp, SlideDown, Expand, Shrink, Blink.
AnimationTrigger NavigatorIconAnimationTrigger btn.AnimationTrigger = NavigatorIconAnimationTrigger.OnHover; Event that starts the animation: OnHover, OnMouseLeave, OnMouseClick, or OnMouseHoverAndLeave.
AnimationMode NavigatorIconAnimationMode btn.AnimationMode = NavigatorIconAnimationMode.Once; Once plays the animation cycle one time. Continuous loops it while the trigger is active.
AnimationSpeed float btn.AnimationSpeed = 0.08f; Controls the speed of the icon animation progression.

Effects (Ripple & Press)

Material Design-inspired feedback effects.

Property Type Description & Usage Example
EnableRippleEffect bool btn.EnableRippleEffect = true; Enables an expanding circular ripple on click.
RippleColor Color btn.RippleColor = Color.White;
RippleSpeed float btn.RippleSpeed = 0.06f; Speed of the ripple expansion.
EnablePressScale bool btn.EnablePressScale = true; Enables a shrinking effect when the button is held down.
PressScaleAmount float btn.PressScaleAmount = 0.95f; The target scale (0.0 to 1.0) when pressed.
EnableShadow bool btn.EnableShadow = true; Draws a drop shadow under the control.

Border Customization

Advanced border styling including gradients and corner rounding.

Property Type Description & Usage Example
BorderThickness int btn.BorderThickness = 2;
BorderColor Color btn.BorderColor = Color.Gray;
EnableBorderGradient bool btn.EnableBorderGradient = true; Enables a gradient on the border stroke.
BorderColorStart Color btn.BorderColorStart = Color.Cyan;
BorderColorEnd Color btn.BorderColorEnd = Color.Magenta;
BorderRadiusTopLeft int btn.BorderRadiusTopLeft = 10; Independent radius control for each corner.

Badge System

Integrated notification badge for displaying counts.

Property Type Description & Usage Example
BadgeValue int btn.BadgeValue = 5; The number to display. Set to 0 to hide.
BadgePosition NavigatorBadgePosition btn.BadgePosition = NavigatorBadgePosition.TopRight; Corner position: TopRight, TopLeft, BottomRight, or BottomLeft.
BadgeBackColor Color btn.BadgeBackColor = Color.Red;

Image Support

Option to display a custom image instead of the vector icon.

Property Type Description & Usage Example
Image Image btn.Image = Resources.MyIcon; Overrides the vector icon drawing if set.
ImageSize int btn.ImageSize = 24;

Sound Feedback

Audio cues for hover and click interactions.

Property Type Description & Usage Example
EnableClickSound bool btn.EnableClickSound = true;
ClickSoundPath string btn.ClickSoundPath = "click.wav";
EnableHoverSound bool btn.EnableHoverSound = true;
HoverSoundPath string btn.HoverSoundPath = "hover.wav";

Events

Event Wiring
// 1. Animation Completed
// Fired when a one-shot animation cycle finishes.
navBtn.AnimationCompleted += (s, e) => 
{
                Debug.WriteLine($"Animation {e.AnimationType} finished.");
};

// 2. State Changes
// Fired when hover or pressed states toggle.
navBtn.HoverStateChanged += (s, e) => 
{
                if (e.IsActive) ShowTooltip();
};

navBtn.PressedStateChanged += (s, e) => 
{
                if (e.IsActive) LogInteraction();
};

Designer Support

The control includes a comprehensive Smart Tag menu for rapid development.

Category Features
Theme Presets Access to over 40 presets including: Light, Dark, Neon, Glass, Midnight, Cyberpunk, Corporate, and more.
Quick Actions Toggles for Shadow and Ripple effects directly from the design surface.
Utilities Copy/Paste Settings: Transfer visual configurations between buttons instantly.

Detailed Examples

Example 1: "Scroll to Top" Button with Pulse

A button that appears when scrolling down, with a subtle pulse animation to attract attention.

C# - Scroll Top
public void SetupScrollButton()
{
    btnUp.IconType = NavigatorIconType.TopChevron;
    btnUp.CurrentTheme = NavigatorControlTheme.Neon;
    
                // Continuous pulse animation
    btnUp.EnableAnimations = true;
    btnUp.AnimationType = NavigatorIconAnimationType.Pulse;
    btnUp.AnimationTrigger = NavigatorIconAnimationTrigger.OnHover;
    btnUp.AnimationMode = NavigatorIconAnimationMode.Continuous;
    
    btnUp.Click += (s, e) => ScrollToTop();
}

Example 2: Browser Navigation with Ripples

A standard back button that rotates slightly on hover.

C# - Browser Back
public void SetupBrowserNav()
{
    btnBack.IconType = NavigatorIconType.BackChevron;
    btnBack.IconVariant = NavigatorIconVariant.Arrow;
    btnBack.ArrowTailLength = 15f;
    
                // Material ripple effect
    btnBack.EnableRippleEffect = true;
    btnBack.RippleColor = Color.FromArgb(50, 0, 0, 0);
    
                // Rotate icon on hover
    btnBack.AnimationType = NavigatorIconAnimationType.Rotate;
    btnBack.AnimationTrigger = NavigatorIconAnimationTrigger.OnHover;
    
    btnBack.Click += (s, e) => 
    {
                if (webView.CanGoBack) webView.GoBack();
    };
}

Example 3: Notification Bell

Using a custom image with a badge for notifications.

C# - Notification Badge
public void SetupNotification()
{
                // Use a bell image instead of vector icon
    btnNotify.Image = Resources.BellIcon;
    btnNotify.ImageSize = 24;
    
                // Configure badge
    btnNotify.BadgePosition = NavigatorBadgePosition.TopRight;
    btnNotify.BadgeBackColor = Color.Red;
    btnNotify.BadgeForeColor = Color.White;
    
                // Update count
                UpdateBadge(5);
}

private void UpdateBadge(int count)
{
    btnNotify.BadgeValue = count;
    
                // Visual cue when updated
    btnNotify.AnimationType = NavigatorIconAnimationType.Blink;
                // Trigger manually by invalidating/state change if needed
}