Summary of Chapter 15. The interactive interface
This chapter explores eight
View derivatives that allow interaction with the user.
Xamarin.Forms contains 20 instantiable classes that derive from
View but not
Layout. Six of these have been covered in previous chapters:
Label: Chapter 2. Anatomy of an app
BoxView: Chapter 3. Scrolling the stack
Button: Chapter 6. Button clicks
Image: Chapter 13. Bitmaps
ActivityIndicator: Chapter 13. Bitmaps
ProgressBar: Chapter 14. AbsoluteLayout
The eight views in this chapter effectively allow the user to interact with basic .NET data types:
You can think of these views as visual interactive representations of the underlying data types. This concept is explored more in the next chapter, Chapter 16. Data binding.
The remaining six views are covered in the following chapters:
WebView: Chapter 16. Data binding
Picker: Chapter 19. Collection views
ListView: Chapter 19. Collection views
TableView: Chapter 19. Collection views
Map: Chapter 28. Location and Maps
OpenGLView: Not covered in this book (and no support for Windows platforms)
Slider and stepper
Slider is a horizontal bar representing a range of values from a minimum on the left to a maximum on the right. It defines three public properties:
double, default value of 0
double, default value of 0
double, default value of 1
The bindable properties that back these properties ensure that they are consistent:
- For all three properties, the
coerceValuemethod specified for the bindable property ensures that
Minimumis being set to a value greater than or equal to
Maximum, and similar for
validateValuemethod causes an
ArgumentExceptionto be raised.
The SliderDemo sample demonstrates the simple use of the
Both in code and in XAML, the
Maximum properties are set in the order that you specify. Be sure to initialize these properties so that
Maximum is always greater than
Minimum. Otherwise an exception will be raised.
Slider properties can cause the
Value property to change and the
ValueChanged event to be fired. You should ensure that the
Slider event handler doesn't access views that haven't yet been created during page initialization.
ValueChanged event doesn't fire during
Slider initialization unless the
Value property changes. You can call the
ValueChanged handler directly from code.
Slider color selection
The RgbSliders program contains three
Slider elements that allow you to interactively select a color by specifying its RGB values:
The TextFade sample uses two
Slider elements to move two
Label elements across an
AbsoluteLayout and fade one into the other.
The Stepper difference
Stepper defines the same properties and events as
Slider but the
Maximum property is initialized to 100 and
Stepper defines a fourth property:
double, initialized to 1
Stepper consists of two buttons labeled – and +. Pressing – decreases
Increment to a minimum of
Minimum. Pressing + increases
Increment to a maximum of
This is demonstrated by the StepperDemo sample.
Switch and CheckBox
Switch allows the user to specify a Boolean value.
Switch consists of a toggle that can be turned off and on. The class defines one property:
Switch defines one event:
The SwitchDemo program demonstrates the
A traditional CheckBox
Some developers might prefer a more traditional
CheckBox to the
Switch. The Xamarin.FormsBook.Toolkit library contains a
CheckBox class that derives from
CheckBox is implemented by the CheckBox.xaml and CheckBox.xaml.cs files.
CheckBox defines three properties (
IsChecked) and a
The CheckBoxDemo sample demonstrates this
Xamarin.Forms defines three views that let the user enter and edit text:
Entryfor a single line of text
Editorfor multiple lines of text
SearchBarfor a single line of text for search purposes.
Editor derive from
InputView, which derives from
SearchBar derives directly from
Keyboard and focus
On phones and tablets without physical keyboards, the
SearchBar elements all cause a virtual keyboard to pop up. The presence of this keyboard on the screen is related to input focus. A view must have both its
IsEnabled properties set to
true to get input focus.
Two methods, one read-only property, and two events are involved with input focus. These are all defined by
Focusmethod attempts to set input focus to an element and returns
Unfocusmethod removes input focus from an element
IsFocusedread-only property indicates if the element has input focus
Focusedevent indicates when an element gets input focus
Unfocusedevent indicates when an element loses input focus
Choosing the Keyboard
InputView class from which
Editor derive defines only one property:
This indicates the type of keyboard that is displayed. Some keyboards are optimized for URIs or numbers.
Noneset to 0
CapitalizeSentenceset to 1
Spellcheckset to 2
Suggestionsset to 4
Allset to \xFFFFFFFF
When using the multiline
Editor when a paragraph or more of text is expected, calling
Keyboard.Create is a good approach to selecting a keyboard. For the single-line
Entry, the following static read-only properties of
Keyboard are useful:
Entry properties and events
Entry defines the following properties:
string, the text that appears in the
bool, which causes characters to be masked
string, for dimly colored text that appears in the
Entrybefore anything is typed
Entry also defines two events:
TextChangedEventArgsobject, fired whenever the
Completed, fired when the user is finished and the keyboard is dismissed. The user indicates completion in a platform-specific manner
The QuadraticEquations sample demonstrates these two events.
The Editor difference
Editor defines the same
Font properties as
Entry but not the other properties.
Editor also defines the same two properties as
JustNotes is a free-form notes-taking program that saves and restores the contents of the
SearchBar does not derive from
InputView, so it does not have a
Keyboard property. But it does have all the
Placeholder properties that
Entry defines. In addition,
SearchBar defines three additional properties:
ICommandfor use with data-bindings and MVVM
Object, for use with
The platform-specific cancel button erases the text. The
SearchBar also has a platform-specific search button. Pressing either of those buttons raises one of the two events that
The SearchBarDemo sample demonstrates the
Date and time selection
DatePicker defines four properties:
DateTime, initialized to January 1, 1900
DateTime, initialized to December 31, 2100
DateTime, initialized to
string, the .NET formatting string initialized to "d", the short date pattern, resulting in a date display like "7/20/1969" in the US.
You can set the
DateTime properties in XAML by expressing the properties as property elements and using the culture-invariant short-date format ("7/20/1969").
The DaysBetweenDates sample calculates the number of days between two dates selected by the user.
The TimePicker (or is it a TimeSpanPicker?)
TimePicker defines two properties and no events:
Timeis of type
DateTime, indicating the time elapsed since midnight
string, the .NET formatting string initialized to "t", the short time pattern, resulting in a time display like "1:45 PM" in the US.
The SetTimer program demonstrates how to use the
TimePicker to specify a time for a timer. The program only works if you keep it in the foreground.
SetTimer also demonstrates using the
DisplayAlert method of
Page to display an alert box.
We'd love to hear your thoughts. Choose the type you'd like to provide:
Our feedback system is built on GitHub Issues. Read more on our blog.