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
// 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.
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.
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.
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
}