Input Components
Color, date and time pickers, search, switch, spinner, text area and grouped choice controls
Beyond the basic TextBox, Checkbox and Dropdown controls, Beep.Skia ships pickers, search, switches and grouped selection controls. All of them are MaterialControl components, so they participate in theming, hit testing and the property grid.
On this page
Pickers
Color, date and time selection controls.
ColorPicker
A Material Design 3.0 color picker component
| Member | Kind | Description |
|---|---|---|
SKColor SelectedColor | Property | Gets or sets the selected color |
float Hue | Property | Gets or sets the hue component (0-360) |
float Saturation | Property | Gets or sets the saturation component (0-1) |
float Value | Property | Gets or sets the value/brightness component (0-1) |
float Alpha | Property | Gets or sets the alpha component (0-1) |
bool ShowAlpha | Property | Gets or sets whether to show the alpha slider |
float ColorWheelRadius | Property | Gets or sets the color wheel radius |
float BrightnessBarWidth | Property | Gets or sets the brightness bar width |
event EventHandler ColorChanged | Event | Occurs when the selected color changes |
ColorPicker() | Method | Initializes a new instance of the ColorPicker class |
DatePicker
A Material Design 3.0 Date Picker component that allows users to select dates.
| Member | Kind | Description |
|---|---|---|
event EventHandler<DateTime> DateSelected | Event | Occurs when the selected date changes. |
event EventHandler DialogOpened | Event | Occurs when the date picker dialog opens. |
event EventHandler DialogClosed | Event | Occurs when the date picker dialog closes. |
DateTime SelectedDate | Property | Gets or sets the currently selected date. |
string DateFormat | Property | Gets or sets the date format string. |
new SKColor TextColor | Property | Gets or sets the text color. |
SKColor AccentColor | Property | Gets or sets the accent color for selected dates. |
bool ShowTodayButton | Property | Gets or sets whether to show the "Today" button. |
DateTime? MinDate | Property | Gets or sets the minimum selectable date. |
DateTime? MaxDate | Property | Gets or sets the maximum selectable date. |
DatePicker() | Method | Initializes a new instance of the DatePicker class. |
DatePicker(float width, float height) : this() | Method | Initializes a new instance of the DatePicker class with specified dimensions. The width of the date picker. The height of the date picker. |
void ToggleCalendar() | Method | Toggles the calendar dialog visibility. |
void OpenCalendar() | Method | Opens the calendar dialog. |
void CloseCalendar() | Method | Closes the calendar dialog. |
TimePicker
A Material Design 3.0 Time Picker component that allows users to select times.
| Member | Kind | Description |
|---|---|---|
event EventHandler<DateTime> TimeSelected | Event | Occurs when the selected time changes. |
event EventHandler DialogOpened | Event | Occurs when the time picker dialog opens. |
event EventHandler DialogClosed | Event | Occurs when the time picker dialog closes. |
DateTime SelectedTime | Property | Gets or sets the currently selected time. |
bool Use24HourFormat | Property | Gets or sets whether to use 24-hour format. |
new SKColor TextColor | Property | Gets or sets the text color. |
SKColor AccentColor | Property | Gets or sets the accent color for selected times. |
TimePickerMode Mode | Property | Gets or sets the time picker mode. |
TimePicker() | Method | Initializes a new instance of the TimePicker class. |
TimePicker(float width, float height) : this() | Method | Initializes a new instance of the TimePicker class with specified dimensions. The width of the time picker. The height of the time picker. |
void ToggleTimePicker() | Method | Toggles the time picker dialog visibility. |
void OpenTimePicker() | Method | Opens the time picker dialog. |
void CloseTimePicker() | Method | Closes the time picker dialog. |
Search
Search box with suggestions.
Search
A Material Design 3.0 Search component that provides search functionality with expandable search view.
| Member | Kind | Description |
|---|---|---|
string PlaceholderText | Property | Gets or sets the placeholder text displayed when the search field is empty. |
string Text | Property | Gets or sets the current search text. |
bool IsActive | Property | Gets or sets whether the search is in active (expanded) state. |
bool IsFocused | Property | Gets or sets whether the search field is focused. |
IReadOnlyList<SearchSuggestion> Suggestions | Property | Gets the list of search suggestions. |
float SearchBarHeight | Property | Gets or sets the height of the search bar when inactive. |
float SearchViewHeight | Property | Gets or sets the height of the search view when active. |
event EventHandler TextChanged | Event | Occurs when the search text changes. |
event EventHandler ActiveStateChanged | Event | Occurs when the active state changes. |
event EventHandler<SearchEventArgs> SearchPerformed | Event | Occurs when a search is performed. |
event EventHandler<SearchSuggestionEventArgs> SuggestionSelected | Event | Occurs when a suggestion is selected. |
Search() | Method | Initializes a new instance of the Search class. |
void AddSuggestion(SearchSuggestion suggestion) | Method | Adds a search suggestion. The search suggestion to add. |
void AddSuggestion(string text, string icon = null, object tag = null) | Method | Adds a search suggestion with the specified text. The suggestion text. Optional icon for the suggestion. Optional tag object. |
void ClearSuggestions() | Method | Clears all search suggestions. |
void PerformSearch() | Method | Performs a search with the current text. |
void ClearText() | Method | Clears the search text. |
SearchSuggestion
Represents a search suggestion item.
| Member | Kind | Description |
|---|---|---|
string Text | Property | Gets the text of the suggestion. |
string Icon | Property | Gets the icon of the suggestion. |
object Tag | Property | Gets the tag object associated with the suggestion. |
SearchSuggestion(string text, string icon = null, object tag = null) | Method | Initializes a new instance of the SearchSuggestion class. The suggestion text. The suggestion icon. The tag object. |
SearchEventArgs
Provides data for the SearchPerformed event.
| Member | Kind | Description |
|---|---|---|
string Query | Property | Gets the search query. |
SearchEventArgs(string query) | Method | Initializes a new instance of the SearchEventArgs class. The search query. |
Toggles and Progress
Switch, spinner and progress indicators.
Switch
A Material Design 3.0 Switch component that provides a toggle between on and off states.
| Member | Kind | Description |
|---|---|---|
new event EventHandler<SwitchStateChangedEventArgs> StateChanged | Property | Occurs when the switch state changes. |
bool IsChecked | Property | Gets or sets whether the switch is in the checked (on) state. |
bool IsHovered | Property | Gets or sets whether the switch is hovered. |
bool IsPressed | Property | Gets or sets whether the switch is pressed. |
Switch() | Method | Initializes a new instance of the Switch class. |
void Toggle() | Method | Toggles the switch state. |
Spinner
A spinner component for indicating loading or processing.
| Member | Kind | Description |
|---|---|---|
SpinnerStyle Style | Property | Gets or sets the spinner style. |
SKColor Color | Property | Gets or sets the spinner color. |
float Thickness | Property | Gets or sets the thickness of the spinner lines. |
int Segments | Property | Gets or sets the number of segments in the spinner. |
float Speed | Property | Gets or sets the rotation speed in degrees per frame. |
Spinner() | Method | Initializes a new instance of the Spinner class. |
void Start() | Method | Starts the spinner animation. |
void Stop() | Method | Stops the spinner animation. |
ProgressBar
A Material Design 3.0 progress bar component.
| Member | Kind | Description |
|---|---|---|
float Progress | Property | Gets or sets the progress value (0.0 to 1.0). |
bool IsIndeterminate | Property | Gets or sets whether the progress bar is in indeterminate state. |
ProgressBarVariant Variant | Property | Gets or sets the progress bar variant. |
float StrokeWidth | Property | Gets or sets the stroke width for the progress bar. |
SKColor ProgressColor | Property | Gets or sets the progress color. |
SKColor TrackColor | Property | Gets or sets the track color. |
ProgressBar() | Method | Initializes a new instance of the ProgressBar class. |
ProgressBar(float width, float height) : this() | Method | Initializes a new instance of the ProgressBar class with specified dimensions. |
void SetProgressPercent(float percent) | Method | Sets the progress as a percentage (0-100). |
Text Input
Multi-line text input.
TextArea
A multi-line text input control.
| Member | Kind | Description |
|---|---|---|
string Text | Property | Gets or sets the text in the text area. |
string Placeholder | Property | Gets or sets the placeholder text. |
TextAlignment TextAlignment | Property | Gets or sets the text alignment. |
bool Multiline | Property | Gets or sets whether the text area supports multiple lines. |
bool ReadOnly | Property | Gets or sets whether the text area is read-only. |
int MaxLength | Property | Gets or sets the maximum length of text. |
TextArea() | Method | Initializes a new instance of the TextArea class. |
Grouped Choices
Checkbox, radio and segmented button groups.
CheckBoxGroup
A group of check box controls.
| Member | Kind | Description |
|---|---|---|
CheckBoxGroupItemCollection Items | Property | Gets the collection of items in the check box group. |
CheckBoxGroupStyle Style | Property | Gets or sets the style of the check box group. |
Orientation Orientation | Property | Gets or sets the orientation of the check box group. |
BorderStyle BorderStyle | Property | Gets or sets the border style of the check box group. |
int ItemHeight | Property | Gets or sets the height of each item. |
int Spacing | Property | Gets or sets the spacing between items. |
CheckBoxGroup() | Method | Initializes a new instance of the CheckBoxGroup class. |
RadioGroup
A group of radio button controls where only one can be selected at a time.
| Member | Kind | Description |
|---|---|---|
RadioGroupItemCollection Items | Property | Gets the collection of items in the radio group. |
RadioGroupStyle Style | Property | Gets or sets the style of the radio group. |
Orientation Orientation | Property | Gets or sets the orientation of the radio group. |
BorderStyle BorderStyle | Property | Gets or sets the border style of the radio group. |
int ItemHeight | Property | Gets or sets the height of each item. |
int Spacing | Property | Gets or sets the spacing between items. |
RadioGroupItem SelectedItem | Property | Gets or sets the selected item. |
RadioGroup() | Method | Initializes a new instance of the RadioGroup class. |
SegmentedButtons
A Material Design 3.0 Segmented Buttons component that allows users to select one or more options from a set.
| Member | Kind | Description |
|---|---|---|
SegmentedButtonSelectionMode SelectionMode | Property | Gets or sets the selection mode for the segmented buttons. |
SKColor BackgroundColor | Property | Gets or sets the background color of the segmented buttons container. |
SKColor SelectedBackgroundColor | Property | Gets or sets the background color for selected segments. |
SKColor DividerColor | Property | Gets or sets the color of the dividers between segments. |
SKColor SelectedTextColor | Property | Gets or sets the text color for selected segments. |
SKColor UnselectedTextColor | Property | Gets or sets the text color for unselected segments. |
float CornerRadius | Property | Gets or sets the corner radius of the segmented buttons container. |
float DividerWidth | Property | Gets or sets the width of the dividers between segments. |
float SegmentHeight | Property | Gets or sets the height of each segment. |
bool ShowDividers | Property | Gets or sets whether to show dividers between segments. |
IReadOnlyList<SegmentedButtonItem> Items | Property | Gets the collection of segments in the segmented buttons control. |
IEnumerable<int> SelectedIndices | Property | Gets the indices of currently selected segments. |
event EventHandler<SelectionChangedEventArgs> SelectionChanged | Event | Occurs when the selection changes. |
SegmentedButtons() | Method | Initializes a new instance of the SegmentedButtons class. |
SegmentedButtonItem AddSegment(string text, string icon = null) | Method | Adds a new segment to the segmented buttons control. The text to display on the segment. The icon for the segment (optional). The created SegmentedButtonItem. |
bool RemoveSegment(SegmentedButtonItem item) | Method | Removes a segment from the segmented buttons control. The segment to remove. True if the segment was removed successfully. |
bool RemoveSegmentAt(int index) | Method | Removes a segment at the specified index. The index of the segment to remove. True if the segment was removed successfully. |
void ClearSegments() | Method | Clears all segments from the segmented buttons control. |
void SelectSegment(int index) | Method | Selects a segment at the specified index. The index of the segment to select. |
void DeselectSegment(int index) | Method | Deselects a segment at the specified index. The index of the segment to deselect. |
void ToggleSegment(int index) | Method | Toggles the selection state of a segment at the specified index. The index of the segment to toggle. |
static SegmentedButtons Create(params string[] segments) | Method | Creates a new SegmentedButtons instance with the specified segments. The text for each segment. A new SegmentedButtons instance. |
static SegmentedButtons CreateSingleSelect(params string[] segments) | Method | Creates a new SegmentedButtons instance with single selection mode. The text for each segment. A new SegmentedButtons instance. |
static SegmentedButtons CreateMultiSelect(params string[] segments) | Method | Creates a new SegmentedButtons instance with multiple selection mode. The text for each segment. A new SegmentedButtons instance. |