Input Controls

.NET MAUI provides a rich set of input controls that allow users to interact with your application by entering data. These controls cover various input types, from simple text entry to complex date and time selection.

Entry

The Entry control is used for single-line text input. It's ideal for collecting user data such as names, email addresses, or passwords.

Example: 

<Entry Placeholder="Enter your name" />

Key properties include:

  • Placeholder: Text displayed when the control is empty.
  • Text: The current text in the entry.
  • Keyboard: Specifies the type of on-screen keyboard to display.
  • IsPassword: Hides the entered text for password fields.

You can handle text changes using the TextChanged event.

Editor

The Editor control is a multi-line text input control. It's suitable for longer text entries like notes, comments, or descriptions.

Example: 

<Editor Placeholder="Enter your message" HeightRequest="150" />

Similar to Entry, it has Placeholder and Text properties. Its main advantage is allowing multiple lines of text.

CheckBox

The CheckBox control is a simple binary selection control. It allows users to toggle between two states: checked or unchecked.

Example: 

<CheckBox IsChecked="{Binding TermsAccepted}" />

The primary property is IsChecked, which is a boolean value. You can bind this property to a ViewModel property for data binding.

Switch

The Switch control is another binary selection control, often used for toggling settings on or off. It provides a visual toggle that slides between two states.

Example: 

<Switch IsToggled="{Binding NotificationsEnabled}" />

The IsToggled property indicates its current state (true for "on", false for "off").

Slider

The Slider control allows users to select a numeric value within a specified range by dragging a thumb along a track.

Example: 

<Slider Minimum="0" Maximum="100" Value="{Binding Brightness}" />

Key properties:

  • Minimum: The minimum value of the slider.
  • Maximum: The maximum value of the slider.
  • Value: The current value of the slider.
  • ThumbColor: The color of the slider's thumb.

The ValueChanged event is fired as the slider's value changes.

DatePicker and TimePicker

DatePicker allows users to select a date, and TimePicker allows users to select a time. These are essential for scheduling and data logging.

Example: 

<DatePicker Date="{Binding SelectedDate}" />
<TimePicker Time="{Binding SelectedTime}" />

Both controls have a Date (for DatePicker) or Time (for TimePicker) property of type DateTime. You can also customize their appearance and format.

Common Features and Best Practices

  • Data Binding: Leverage data binding to seamlessly synchronize input control values with your application's data model (ViewModel).
  • Placeholders: Use clear and concise placeholder text to guide users on what information to enter.
  • Validation: Implement validation logic to ensure data integrity. This can be done through data binding converters, ViewModel validation, or explicit code.
  • Accessibility: Ensure your input controls are accessible by providing appropriate labels and descriptions.
  • Platform Consistency: While MAUI aims for cross-platform consistency, be mindful of native platform conventions for certain input types.