Siticone Dashboard Button
The SiticoneDashboardButton is a feature-rich navigation control designed for building modern, responsive sidebar menus and application dashboards.
It features a selection state system, image support, multi-line text with descriptions, notification badges, and a comprehensive theming engine with gradient and animation support.
Selection & Grouping
Controls how the button behaves within a menu group.
| Property | Type | Description & Usage Example |
|---|---|---|
IsSelected |
bool | dashBtn.IsSelected = true; Determines if the button is in the active state. Setting this to true triggers selection animations (color transition, indicator slide-in). |
ButtonGroup |
string | dashBtn.ButtonGroup = "SidebarMenu"; Assigns the button to a logical group. When one button in a group is selected, all others in the same group (within the same parent container) are automatically deselected. |
Content: Image & Text
Configuration for the button's label, description, and icon.
| Property | Type | Description & Usage Example |
|---|---|---|
Text |
string | dashBtn.Text = "Dashboard"; The primary label text. |
DescriptionText |
string | dashBtn.DescriptionText = "View analytics"; A secondary line of text displayed below the main label. Useful for adding context or subtitles. |
Image |
Image | dashBtn.Image = Resources.HomeIcon; The icon image displayed on the button. |
ImageAlign |
ContentAlignment | dashBtn.ImageAlign = ContentAlignment.MiddleLeft; Controls the position of the image relative to the button bounds. |
ImageSize |
Size | dashBtn.ImageSize = new Size(24, 24); The render size of the image. |
ImagePadding |
int | dashBtn.ImagePadding = 12; Spacing between the image and the text. |
TextPadding |
int | dashBtn.TextPadding = 15; Horizontal padding from the button edge to the content start. |
Colors & States
Extensive color customization for every interaction state.
| Property | Type | Description & Usage Example |
|---|---|---|
NormalColor |
Color | dashBtn.NormalColor = Color.Transparent; |
HoverColor |
Color | dashBtn.HoverColor = Color.WhiteSmoke; |
PressColor |
Color | dashBtn.PressColor = Color.LightGray; |
SelectedColor |
Color |
dashBtn.SelectedColor = Color.AliceBlue;
Background color when IsSelected is true.
|
TextColor |
Color | dashBtn.TextColor = Color.Black; |
SelectedTextColor |
Color | dashBtn.SelectedTextColor = Color.Blue; |
DescriptionColor |
Color | dashBtn.DescriptionColor = Color.Gray; |
SelectedDescriptionColor |
Color | dashBtn.SelectedDescriptionColor = Color.DarkBlue; |
Selection Indicator
Settings for the vertical bar that appears when selected.
| Property | Type | Description & Usage Example |
|---|---|---|
ShowLeftIndicator |
bool | dashBtn.ShowLeftIndicator = true; Toggles the visibility of the vertical accent bar on the left. |
IndicatorWidth |
int | dashBtn.IndicatorWidth = 4; Thickness of the indicator bar in pixels. |
IndicatorColor |
Color | dashBtn.IndicatorColor = Color.Blue; |
IndicatorGradientColor |
Color | dashBtn.IndicatorGradientColor = Color.LightBlue; If set, creates a vertical gradient on the indicator bar. |
Notification Badge
Built-in system for displaying alerts or counts.
| Property | Type | Description & Usage Example |
|---|---|---|
ShowBadge |
bool | dashBtn.ShowBadge = true; Toggles visibility of the badge. |
BadgeCount |
int | dashBtn.BadgeCount = 5; Number to display. Values > 99 show as "99+". |
BadgeColor |
Color | dashBtn.BadgeColor = Color.Red; |
BadgeTextColor |
Color | dashBtn.BadgeTextColor = Color.White; |
Gradient Backgrounds
Advanced background styling options.
| Property | Type | Description & Usage Example |
|---|---|---|
UseGradientBackground |
bool | dashBtn.UseGradientBackground = true; Enables gradient fill instead of solid colors. |
GradientStartColor |
Color | dashBtn.GradientStartColor = Color.Blue; |
GradientEndColor |
Color | dashBtn.GradientEndColor = Color.Cyan; |
GradientMode |
LinearGradientMode | dashBtn.GradientMode = LinearGradientMode.Horizontal; |
Animation & Performance
Settings for visual smoothness and optimization.
| Property | Type | Description & Usage Example |
|---|---|---|
AnimationSpeed |
float | dashBtn.AnimationSpeed = 0.1f; Controls the speed of color transitions and indicator slides. |
EnableRippleEffect |
bool | dashBtn.EnableRippleEffect = true; Enables material-design ripple on click. |
RippleColor |
Color | dashBtn.RippleColor = Color.White; |
UltraPerformanceMode |
bool | dashBtn.UltraPerformanceMode = true; Disables all animations (ripples, fades, slides) for maximum rendering speed. Ideal for lists with many buttons. |
Events
// Fired when the user performs a long press (hold down)
dashBtn.LongPressed += (s, e) =>
{
MessageBox.Show("Long Press Detected!");
};
// Fired when the user double taps/clicks the button
dashBtn.DoubleTapped += (s, e) =>
{
Debug.WriteLine("Double Tap!");
};
// Fired when the user clicks directly on the notification badge
dashBtn.BadgeClicked += (s, e) =>
{
OpenNotificationsPanel();
};
// Request to update badge count (useful for data binding scenarios)
dashBtn.BadgeUpdateRequested += (s, e) =>
{
e.NewCount = GetUnreadCount();
e.Animate = true;
};
Public Methods
// Programmatically update the badge count with animation control.
// This fires the BadgeUpdateRequested event internally.
dashBtn.UpdateBadge(5, true);
Designer Support
The control includes a Smart Tag panel for rapid configuration.
| Category | Features |
|---|---|
Theme Presets |
Quickly apply styles: Modern Blue, Dark, Light, Gradient, Material, Colorful, Minimal. |
Corner Presets |
Presets for Rounded, Left Rounded, Right Rounded, and Square corners. |
Utilities |
Configure Notification Badge: Sets up a sample badge. Toggle Selected State: Previews the selected state in the designer. Ultra Performance Mode: Quickly toggles optimization. |
Detailed Examples
Example 1: Sidebar Navigation
Setting up a standard sidebar menu with grouping.
public void InitializeSidebar()
{
var btnHome = new SiticoneDashboardButton { Text = "Home", ButtonGroup = "Main" };
var btnSettings = new SiticoneDashboardButton { Text = "Settings", ButtonGroup = "Main" };
btnHome.IsSelected = true; // Automatically deselects others in "Main" group
btnHome.Click += (s, e) => LoadPage("Home");
btnSettings.Click += (s, e) => LoadPage("Settings");
}
Example 2: User Profile Button
Using image and description text for a richer button.
public void SetupProfileButton()
{
btnProfile.Text = "John Doe";
btnProfile.DescriptionText = "Administrator";
btnProfile.Image = Resources.UserAvatar;
btnProfile.ImageSize = new Size(40, 40);
// Style adjustments
btnProfile.Height = 60;
btnProfile.ShowLeftIndicator = false;
btnProfile.CornerRadiusTopLeft = 30; // Rounded pill shape
btnProfile.CornerRadiusBottomRight = 30;
}
Example 3: Dynamic Notifications
Updating the badge based on real-time data.
public void OnNewMessageReceived(int unreadCount)
{
btnMessages.UpdateBadge(unreadCount, animate: true);
if (unreadCount > 0)
{
btnMessages.BadgeColor = Color.Red;
btnMessages.BadgeTextColor = Color.White;
}
else
{
btnMessages.ShowBadge = false;
}
}