Siticone Dropdown
The SiticoneDropdown is a versatile and highly customizable replacement for the standard Windows Forms ComboBox.
It features modern aesthetics, built-in search functionality, multi-selection support, animations, and extensive styling options to seamlessly integrate with any UI design.
Data Binding & Content
Properties for managing the items displayed within the dropdown list.
| Property | Type | Description & Usage Example |
|---|---|---|
DataSource |
object |
dropdown.DataSource = myEmployeeList;
A list or collection to populate the dropdown.
Must implement IListSource or be an enumerable collection.
|
DisplayMember |
string | dropdown.DisplayMember = "FullName"; The name of the property to display in the dropdown list for each item. |
ValueMember |
string | dropdown.ValueMember = "Id"; The name of the property to use as the actual value for each item. |
Items |
StringCollection | dropdown.Items.Add("Option A"); The collection of manual string items. Used when DataSource is not set. |
MaxDropDownItems |
int | dropdown.MaxDropDownItems = 8; The maximum number of items visible in the dropdown list before scrolling is enabled. |
ItemHeight |
int | dropdown.ItemHeight = 35; The height of each individual list item in pixels. |
Selection Management
Properties controlling single and multiple item selection modes.
| Property | Type | Description & Usage Example |
|---|---|---|
AllowMultipleSelection |
bool | dropdown.AllowMultipleSelection = true; When enabled, allows users to select multiple items via checkboxes. Adds a "Select All" option to the top of the list. |
SelectedIndex |
int | dropdown.SelectedIndex = 0; The zero-based index of the currently selected item. Returns -1 if nothing is selected. |
SelectedItem |
string | string item = dropdown.SelectedItem; The string representation of the currently selected item. |
SelectedValue |
object |
var id = dropdown.SelectedValue;
The value of the selected item, determined by ValueMember.
|
SelectedIndices |
List<int> |
var indices = dropdown.SelectedIndices;
A list of indices for all selected items. Primarily used when AllowMultipleSelection is true.
|
SelectedItems |
IEnumerable | foreach(var item in dropdown.SelectedItems) { ... } An enumerable collection of the selected strings. |
Search Functionality
Built-in search capabilities to filter items within the dropdown list.
| Property | Type | Description & Usage Example |
|---|---|---|
EnableSearch |
bool | dropdown.EnableSearch = true; Adds a search text box to the top of the dropdown list, allowing users to filter items in real-time. |
SearchPlaceholderText |
string | dropdown.SearchPlaceholderText = "Search employees..."; The text displayed inside the search box when it is empty. |
SearchTextBoxHeight |
int | dropdown.SearchTextBoxHeight = 30; The height of the search input field in pixels. |
ShowSearchIcon |
bool | dropdown.ShowSearchIcon = true; Determines whether a magnifying glass icon is shown inside the search box. |
CurrentSearchText |
string | string term = dropdown.CurrentSearchText; Read-Only. Gets the text currently typed into the search box. |
Appearance & Styling
Extensive customization options for colors, borders, and visual effects.
| Property | Type | Description & Usage Example |
|---|---|---|
BackColor |
Color | dropdown.BackColor = Color.White; The background color of the main control (the collapsed state). |
DropdownBackColor |
Color | dropdown.DropdownBackColor = Color.WhiteSmoke; The background color of the expanded dropdown list container. |
BorderColor |
Color | dropdown.BorderColor = Color.LightGray; The color of the control's border. |
BorderSize |
int | dropdown.BorderSize = 2; The thickness of the border in pixels. |
CornerRadius |
int | dropdown.CornerRadius = 10; The radius for rounded corners on the main control. |
DropdownCornerRadius |
int | dropdown.DropdownCornerRadius = 8; The radius for rounded corners on the expanded list container. |
DropdownWidth |
int | dropdown.DropdownWidth = 300; The width of the expanded list. Set to 0 to match the control's width automatically. |
DropShadowEnabled |
bool | dropdown.DropShadowEnabled = true; Adds a drop shadow to the expanded list for visual depth. |
PlaceholderText |
string | dropdown.PlaceholderText = "Select Option"; Text displayed in the control when no item is selected. |
PlaceholderColor |
Color | dropdown.PlaceholderColor = Color.Gray; |
PlaceholderDisappearsOnFocus |
bool | dropdown.PlaceholderDisappearsOnFocus = true; If true, the placeholder text hides immediately when the control gains focus. |
Item Styling
Granular control over how individual list items are rendered.
| Property | Type | Description & Usage Example |
|---|---|---|
SelectedItemBackColor |
Color | dropdown.SelectedItemBackColor = Color.DodgerBlue; The background color of an item when it is selected. |
SelectedItemTextColor |
Color | dropdown.SelectedItemTextColor = Color.White; The text color of an item when it is selected. |
HoveredItemBackColor |
Color | dropdown.HoveredItemBackColor = Color.LightBlue; The background color of an item under the mouse pointer. |
HoveredItemTextColor |
Color | dropdown.HoveredItemTextColor = Color.Black; The text color of an item under the mouse pointer. |
UnselectedItemTextColor |
Color | dropdown.UnselectedItemTextColor = Color.DimGray; The text color for standard, unselected items. |
Interaction & Behavior
| Property | Type | Description & Usage Example |
|---|---|---|
IsReadonly |
bool | dropdown.IsReadonly = true; Prevents the dropdown from opening. Useful for locking selection without disabling the control entirely. |
CanShake |
bool | dropdown.CanShake = true; If true, clicking a read-only dropdown triggers a shake animation to indicate the action is denied. |
CanBeep |
bool | dropdown.CanBeep = true; Plays a system beep sound when a user attempts to interact with a read-only control. |
UltraFastPerformance |
bool | dropdown.UltraFastPerformance = true; Disables animations (fade in/out, chevron rotation) and visual effects (shadows) to maximize rendering speed. |
Public Methods
Methods for programmatically managing selection, particularly useful in multi-select mode.
// Adds an item index to the current selection (Multi-Select only)
dropdown.AddToSelection(2);
// Removes an item index from the current selection (Multi-Select only)
dropdown.RemoveFromSelection(2);
// Toggles the selection state of a specific index (Multi-Select only)
dropdown.ToggleSelection(3);
// Clears all selections (works for both Single and Multi-Select)
dropdown.ClearSelection();
// Sets multiple selected indices at once (Multi-Select only)
var indices = new List<int> { 0, 2, 4 };
dropdown.SetSelectedIndices(indices);
// Binds a data source programmatically
var data = new List<string> { "Red", "Green", "Blue" };
dropdown.BindData(data);
Events
Comprehensive event system for tracking user interaction and state changes.
// 1. ItemSelected (Single Selection)
// Fires when a single item is selected. Provides rich data about the selection.
dropdown.ItemSelected += (s, e) =>
{
Debug.WriteLine($"Selected: {e.SelectedText} (Value: {e.SelectedValue})");
Debug.WriteLine($"Index changed from {e.PreviousIndex} to {e.SelectedIndex}");
};
// 2. ItemsSelected (Multi Selection)
// Fires when the selection changes in Multi-Select mode.
dropdown.ItemsSelected += (s, e) =>
{
Debug.WriteLine($"Total Items Selected: {e.SelectedIndices.Count}");
// Check if the last operation was an Add or Remove
if (e.IsAddOperation)
Debug.WriteLine($"Item added at index: {e.ChangedIndex}");
else
Debug.WriteLine($"Item removed at index: {e.ChangedIndex}");
};
// 3. SelectionCleared
// Fires when the selection is completely reset.
dropdown.SelectionCleared += (s, e) =>
{
ResetUI();
};
// 4. Dropdown State Events
// Useful for triggering animations or UI updates when the list opens/closes.
dropdown.BeforeDropdownOpen += (s, e) => Debug.WriteLine("Opening...");
dropdown.AfterDropdownOpen += (s, e) => Debug.WriteLine("Opened");
dropdown.BeforeDropdownClose += (s, e) => Debug.WriteLine("Closing...");
dropdown.AfterDropdownClose += (s, e) => Debug.WriteLine("Closed");
Designer & Smart Tags
The SiticoneDropdown includes a comprehensive Smart Tag menu in Visual Studio for rapid configuration.
| Feature | Description |
|---|---|
Theme Presets |
Instantly apply professional color schemes without writing code.
|
Configuration Groups |
Properties are organized into logical groups in the Smart Tag: Performance, Appearance, Behavior, Search, Placeholder, and Colors for easy access. |
Detailed Usage Examples
Example 1: Advanced Search Configuration
Sets up a searchable dropdown for a large employee list, including customization of the search box.
private void SetupEmployeeDropdown()
{
// Enable the search feature
empDropdown.EnableSearch = true;
empDropdown.SearchPlaceholderText = "Find employee by name...";
empDropdown.SearchTextBoxHeight = 35;
empDropdown.ShowSearchIcon = true;
// Populate data
var employees = GetEmployees(); // Returns List<Employee>
empDropdown.DataSource = employees;
empDropdown.DisplayMember = "FullName";
empDropdown.ValueMember = "EmployeeId";
// Style the list for readability
empDropdown.ItemHeight = 40;
empDropdown.MaxDropDownItems = 6;
}
Example 2: Multi-Selection with Validation
Configures a dropdown to allow selecting multiple tags/categories and processes the selection.
private void SetupCategoryDropdown()
{
// Enable Multi-Select
catDropdown.AllowMultipleSelection = true;
catDropdown.PlaceholderText = "Select Categories";
// Handle selection changes
catDropdown.ItemsSelected += (s, e) =>
{
// Validate selection count
if (e.SelectedIndices.Count > 3)
{
MessageBox.Show("You can only select up to 3 categories.");
// Revert the last addition
if (e.IsAddOperation)
{
catDropdown.RemoveFromSelection(e.ChangedIndex);
}
return;
}
// Update UI with selected tags
lblTags.Text = string.Join(", ", e.SelectedTexts);
};
}
Example 3: Read-Only Mode with Feedback
Demonstrates locking the dropdown based on user permissions and providing visual feedback (shake/beep) when accessed.
private void ConfigurePermissions(bool canEdit)
{
if (!canEdit)
{
roleDropdown.IsReadonly = true;
// Visual feedback configuration
roleDropdown.CanShake = true; // Shake animation on click
roleDropdown.CanBeep = true; // System beep on click
// Update visual style to indicate locked state
roleDropdown.BorderColor = Color.LightGray;
roleDropdown.PlaceholderColor = Color.DarkGray;
}
else
{
roleDropdown.IsReadonly = false;
roleDropdown.CanShake = false;
roleDropdown.BorderColor = Color.DodgerBlue;
}
}