Siticone Segmented Button

The SiticoneSegmentedButton is a versatile control that functions as a linear set of two or more segments, each of which functions as a mutually exclusive button. It is commonly used for view switching, filtering lists, or toggling between different modes. It supports advanced animations including sliding selection backgrounds, ripple effects, and a wide variety of visual styles (Pill, Material Tabs, Neumorphic, etc.).

Items & Selection

Managing the segments and handling user selection.

Property	Type	Description & Usage Example
`Items`	SegmentedButtonItemCollection	segBtn.Items.Add("Day"); The collection of buttons displayed in the control.
`SelectedIndex`	int	segBtn.SelectedIndex = 0; The zero-based index of the currently selected segment. Setting this triggers the slide animation.
`SelectedItem`	SegmentedButtonItem	var current = segBtn.SelectedItem; Returns the object representing the currently selected button.

Styles & Themes

Properties to control the overall look and feel of the segmented button.

Property	Type	Description & Usage Example
`Theme`	SegmentedButtonTheme	segBtn.Theme = SegmentedButtonTheme.Material; Applies a preset theme (Default, Blue, Dark, Material, Red, Gradient).
`ButtonStyle`	SegmentedButtonStyle	segBtn.ButtonStyle = SegmentedButtonStyle.Pill; Defines the shape and rendering logic. Options: Pill, Rounded, Boxy, FilledTabs, MaterialTabs, OutlinedButtons, GradientButtons, NeumorphicButtons, etc.
`CornerRadius`	int	segBtn.CornerRadius = 20; Radius for rounded corners.
`RoundCorners`	bool	segBtn.RoundCorners = true; If true, automatically calculates radius for pill shape.

State Colors

Extensive color customization for different button states.

Property	Type	Description & Usage Example
`SelectedButtonBackColor`	Color	segBtn.SelectedButtonBackColor = Color.DodgerBlue;
`SelectedButtonForeColor`	Color	segBtn.SelectedButtonForeColor = Color.White;
`UnselectedButtonBackColor`	Color	segBtn.UnselectedButtonBackColor = Color.WhiteSmoke;
`UnselectedButtonForeColor`	Color	segBtn.UnselectedButtonForeColor = Color.Black;
`UnselectedButtonHoverColor`	Color	segBtn.UnselectedButtonHoverColor = Color.LightGray;
`ButtonPressColor`	Color	segBtn.ButtonPressColor = Color.Gray;

Material Indicators

Settings specifically for the MaterialTabs style indicator line.

Property	Type	Description & Usage Example
`MaterialTabSelectedIndicatorColor`	Color	segBtn.MaterialTabSelectedIndicatorColor = Color.Blue;
`SelectedIndicatorThickness`	int	segBtn.SelectedIndicatorThickness = 3;
`SelectedIndicatorStyle`	LineStyle	segBtn.SelectedIndicatorStyle = LineStyle.Solid;
`DrawUnselectedIndicator`	bool	segBtn.DrawUnselectedIndicator = true;
`AutoAdjustIndicatorWidth`	bool	segBtn.AutoAdjustIndicatorWidth = true;

Images & Icons

Support for displaying images alongside or instead of text.

Property	Type	Description & Usage Example
`ButtonImage`	Image	segBtn.ButtonImage = Resources.Icon;
`ImageDisplay`	ButtonImageDisplay	segBtn.ImageDisplay = ButtonImageDisplay.ImageBeforeText; ImageAboveText, ImageBelowText, ImageOnly, etc.
`ImageAlignment`	ContentAlignment	segBtn.ImageAlignment = ContentAlignment.MiddleLeft;

Animations & Effects

Settings for the sliding selection background and click effects.

Property	Type	Description & Usage Example
`AnimationDuration`	int	segBtn.AnimationDuration = 200; Duration of the sliding selection animation in milliseconds.
`AnimationEasing`	AnimationEasing	segBtn.AnimationEasing = AnimationEasing.EaseOutQuad; Easing function for smooth movement.
`EnableRippleEffectSb`	bool	segBtn.EnableRippleEffectSb = true; Enables material-style ripple on click.
`RippleEffectSbColor`	Color	segBtn.RippleEffectSbColor = Color.White;
`EnableDropShadow`	bool	segBtn.EnableDropShadow = true; Adds a shadow to the selected segment.

Gradients

Property	Type	Description & Usage Example
`GradientType`	GradientType	segBtn.GradientType = GradientType.Horizontal;
`GradientStartColor`	Color	segBtn.GradientStartColor = Color.Blue;
`GradientEndColor`	Color	segBtn.GradientEndColor = Color.Cyan;

Events

SelectedItemChanged

// Fired when the user selects a new segment.
// Provides details about the previous and new selection.
segBtn.SelectedItemChanged += (sender, e) =>
{
                Debug.WriteLine($"Switched from {e.PreviousIndex} to {e.SelectedIndex}");
    
                switch (e.SelectedIndex)
    {
                case 0: ShowDailyView(); break;
                case 1: ShowWeeklyView(); break;
                case 2: ShowMonthlyView(); break;
    }
};

ButtonClick

// Fired whenever a segment is clicked (even if already selected).
segBtn.ButtonClick += (sender, e) =>
{
                Console.WriteLine($"Button clicked: {e.ButtonText} at index {e.ButtonIndex}");
};

ButtonHover

// Fired when the mouse enters or leaves a segment.
segBtn.ButtonHover += (sender, e) =>
{
                if (e.IsEntering)
        lblStatus.Text = $"Hovering: {e.ButtonText}";
                else
        lblStatus.Text = "Ready";
};

Designer Support

The control offers a robust Smart Tag panel for rapid configuration.

Category	Features
`Theme Presets`	One-click themes: Default, Blue, Dark, Material, Red, Gradient.
`Style & Layout`	Quick access to `ButtonStyle`, `CornerRadius`, `ButtonSpacing`, and `ButtonInnerMargin`.
`Colors`	Direct configuration of Unselected/Selected background and foreground colors.
`Utilities`	Copy/Paste Settings: Transfer visual configurations between controls.

Detailed Examples

Example 1: View Switcher

Creating a classic iOS-style segmented control for switching views.

C# - View Switcher

public void SetupViewSwitcher()
{
                // Add segments
    segView.Items.Add(new SegmentedButtonItem("Map"));
    segView.Items.Add(new SegmentedButtonItem("List"));
    segView.Items.Add(new SegmentedButtonItem("Grid"));

                // iOS-style appearance
    segView.ButtonStyle = SegmentedButtonStyle.Pill;
    segView.SelectedButtonBackColor = Color.White;
    segView.UnselectedButtonBackColor = Color.LightGray;
    segView.EnableDropShadow = true;
    segView.ShadowDepth = 2;
    
    segView.SelectedIndex = 0;
}

Example 2: Material Design Tabs

Configuring the control to act as a tab bar with an animated underline.

C# - Material Tabs

public void SetupTabs()
{
                // Add tabs
    segTabs.Items.Add(new SegmentedButtonItem("Home"));
    segTabs.Items.Add(new SegmentedButtonItem("Profile"));
    segTabs.Items.Add(new SegmentedButtonItem("Settings"));

                // Apply Material Theme manually
    segTabs.ButtonStyle = SegmentedButtonStyle.MaterialTabs;
    segTabs.UnselectedButtonBackColor = Color.Transparent;
    
                // Configure Indicator
    segTabs.MaterialTabSelectedIndicatorColor = Color.DodgerBlue;
    segTabs.SelectedIndicatorThickness = 3;
    segTabs.AutoAdjustIndicatorWidth = true; // Width matches text width
    
                // Ripple Effect
    segTabs.EnableRippleEffectSb = true;
    segTabs.RippleEffectSbColor = Color.DodgerBlue;
}