Siticone Menu Button Advanced
The SiticoneMenuButtonAdvanced is a highly customizable hamburger menu control designed for modern, high-performance UI frameworks.
Unlike standard buttons, it offers vector-based icon morphing, over 20 pre-built animations, extensive line styling (zigzag, sawtooth, wavy), and a robust theming engine.
Theme Management
The control features a built-in theme manager with over 45 preset themes ranging from professional corporate styles to vibrant neon aesthetics.
| Property | Type | Description & Usage Example |
|---|---|---|
CurrentTheme |
ControlTheme |
btn.CurrentTheme = ControlTheme.Neon;
Automatically applies a preset color scheme (Background, Icon, Border, Ripple).
Options include: Modern, Light, Dark, Glass, Midnight, Cyberpunk, and more.
|
GradientAngle |
float |
btn.GradientAngle = 45f;
Defines the angle of the background gradient if BackColorStart differs from BackColorEnd.
|
Advanced Icon Animation
Control exactly how the icon behaves when interacted with. You can morph the icon into an X, rotate it, or apply continuous effects like pulsing waves.
| Property | Type | Description & Usage Example |
|---|---|---|
AnimationType |
IconAnimationType |
btn.AnimationType = IconAnimationType.MorphToX;
Determines the visual effect.
MorphToX: Standard hamburger-to-close transformation. Pulse/Wavy: Continuous ambient animations. SlideUp/Down: Shifts lines vertically. Rotate: Spins the entire icon. |
AnimationTrigger |
IconAnimationTrigger | btn.AnimationTrigger = IconAnimationTrigger.OnHover; Defines what event starts the animation (Hover, Click, MouseLeave, etc.). |
AnimationMode |
IconAnimationMode |
btn.AnimationMode = IconAnimationMode.Continuous;
If set to Continuous, effects like Pulse will loop as long as the trigger is active.
|
AnimationSpeed |
float | btn.AnimationSpeed = 0.08f; Controls the playback speed of the animation frame-by-frame. |
Icon Styling & Geometry
Customize the physical appearance of the menu lines, including their shape (style), thickness, and alignment.
| Property | Type | Description & Usage Example |
|---|---|---|
LineStyle |
IconLineStyle |
btn.LineStyle = IconLineStyle.ZigZag;
Changes the drawing style of the lines.
Options: Solid, Dashed, Dotted, Wavy, ZigZag, Sawtooth, Blocks, Double.
|
IconLineAlignment |
IconLineAlignment | btn.IconLineAlignment = IconLineAlignment.Right; Aligns the lines to the Left, Center, or Right of the icon area. |
TopLine / MiddleLine |
IconLineLength |
btn.BottomLine = IconLineLength.Half;
Sets individual lines to Full or Half width for asymmetrical designs.
|
IconThickness |
float | btn.IconThickness = 3f; |
Visual Effects & Physics
Enhance user interaction with physics-based feedback and visual polish.
| Property | Type | Description & Usage Example |
|---|---|---|
UltraFastMode |
bool | btn.UltraFastMode = true; Performance Critical: Disables shadows, gradients, and complex animations. Snaps colors instantly instead of transitioning. Use this when rendering many buttons at once (e.g., in a DataGrid). |
EnableRippleEffect |
bool | btn.EnableRippleEffect = true; Renders a material-design expanding circle (ripple) on click. |
EnablePressScale |
bool | btn.EnablePressScale = true; Adds a physics "bounce" effect where the button shrinks slightly when pressed. |
PressScaleAmount |
float | btn.PressScaleAmount = 0.95f; The scale factor for the press animation (0.1 to 1.0). |
EnableShadow |
bool | btn.EnableShadow = true; Draws a soft drop-shadow behind the button. |
Validation & ReadOnly
Features designed for form validation and restrictive states.
| Property | Type | Description & Usage Example |
|---|---|---|
IsReadOnly |
bool |
btn.IsReadOnly = true;
Prevents normal interaction.
When clicked, the button will not trigger animations/actions but will use the fallback colors defined in ReadOnlyBackColor.
|
CanShake |
bool | btn.CanShake = true; If true, clicking a ReadOnly button triggers a horizontal "Access Denied" shake animation. |
CanBeep |
bool | btn.CanBeep = true; Plays a system sound when interaction is denied in ReadOnly mode. |
Badge & Sound
Built-in notification system and auditory feedback.
| Property | Type | Description & Usage Example |
|---|---|---|
BadgeValue |
int | btn.BadgeValue = 5; Displays a notification count overlay. Set to 0 to hide. |
MenuBadgePosition |
MenuBadgePosition |
btn.MenuBadgePosition = MenuBadgePosition.TopRight;
Corners: TopRight, TopLeft, BottomRight, BottomLeft.
|
EnableClickSound |
bool |
btn.EnableClickSound = true;
Plays a custom .wav file (defined in ClickSoundPath) on click.
|
Events
Events to handle state changes and animation lifecycle.
| Event | Description |
|---|---|
AnimationCompleted |
Fires when a non-continuous animation (like MorphToX) finishes its cycle. |
HoverStateChanged |
Fires when the mouse enters or leaves the control boundaries. |
PressedStateChanged |
Fires when the left mouse button is pressed down or released over the control. |
Usage Examples
Example 1: The Modern Sidebar Toggle
A standard implementation using the built-in Modern theme.
It uses the MorphToX animation to transition between the hamburger menu and the close icon.
public void SetupModernToggle()
{
var menuBtn = new SiticoneMenuButtonAdvanced();
// 1. Apply Preset Theme
menuBtn.CurrentTheme = ControlTheme.Modern;
// 2. Configure Animation
// Transform lines into an 'X' when clicked
menuBtn.AnimationType = IconAnimationType.MorphToX;
menuBtn.AnimationTrigger = IconAnimationTrigger.OnMouseClick;
// 3. Physics
menuBtn.EnablePressScale = true;
menuBtn.PressScaleAmount = 0.9f;
this.Controls.Add(menuBtn);
}
Example 2: The "Neon" Gamer Button
Uses the Neon theme combined with ZigZag line styles and a Wavy animation loop to create a high-energy aesthetic suitable for gaming UIs.
private void CreateGamerButton()
{
var btn = new SiticoneMenuButtonAdvanced();
// 1. Aesthetic
btn.CurrentTheme = ControlTheme.Neon;
btn.LineStyle = IconLineStyle.ZigZag;
btn.IconThickness = 2.5f;
// 2. Continuous Animation
// The icon will wave continuously when hovered
btn.AnimationType = IconAnimationType.Wavy;
btn.AnimationTrigger = IconAnimationTrigger.OnHover;
btn.AnimationMode = IconAnimationMode.Continuous;
// 3. Sound Effects
btn.EnableClickSound = true;
btn.ClickSoundPath = @"Sounds\ui_click_sci_fi.wav";
this.Controls.Add(btn);
}
Example 3: Validation & Read-Only State
Demonstrates how to lock the button and provide visual/auditory feedback (Shake & Beep) when a user tries to interact with it during a locked state.
public void LockMenu()
{
// 1. Lock Interaction
menuBtn.IsReadOnly = true;
// 2. Configure "Access Denied" Feedback
menuBtn.CanShake = true; // Horizontal shake animation
menuBtn.CanBeep = true; // System error sound
// 3. Visual Indication (Grayed Out)
menuBtn.ReadOnlyBackColor = Color.LightGray;
menuBtn.ReadOnlyIconColor = Color.DarkGray;
menuBtn.ReadOnlyBorderColor = Color.Gray;
}
public void UnlockMenu()
{
menuBtn.IsReadOnly = false;
// Button automatically reverts to original theme colors
}
Example 4: Notification Badge Integration
Shows how to update the badge value dynamically to indicate new messages or alerts.
public void UpdateNotifications(int count)
{
// Update the number displayed
menuBtn.BadgeValue = count;
// Customize Badge Appearance
menuBtn.MenuBadgePosition = MenuBadgePosition.TopRight;
if (count > 0)
{
menuBtn.BadgeBackColor = Color.Red;
menuBtn.BadgeForeColor = Color.White;
// Pulse the icon briefly to grab attention
menuBtn.AnimationType = IconAnimationType.Pulse;
menuBtn.AnimationTrigger = IconAnimationTrigger.None; // Manual trigger
// (Animation logic would handle the manual pulse here)
}
}