Exploring .NET MAUI: Data Entry Controls and Data Binding

In the first parts of this ongoing series on exploring .NET MAUI (https://codemag.​com/Article/2408041/Exploring-.NET-MAUIGetting-Started and https://codemag.​com/Article/2409041/Exploring-.NET-MAUI-Styles-Navigation-and-Reusable-UI), you created your first .NET MAUI application and ran that application on both a Windows computer and an Android emulator.

- Paul D. Sheriff

You created data-entry pages, partial pages to reuse on those pages, and you navigated among those pages. In this article, you’ll continue to use more data entry controls and learn to perform data binding between controls. You’re going to create a class with properties that you can bind to controls on a page as well. When you change the values of properties in a class, you need to raise a PropertyChanged event so the UI can update those controls that are bound to the properties. You’re going to create a base class that helps you raise that event any time the property values change.

Use a Switch Control for Yes/No Input

Simple entry controls allow a user to enter any data they want. For some input you need a simple yes or no answer from the user. For example, if you have a Boolean property such as IsEmployed on a business object, use a Switch control to represent the two states for this property. On a Windows computer, the Switch control appears as a toggle coupled with a label next to it with the words On and Off, as shown in Figure 1.

Open the Views\UserDetailView.xaml file and add an Auto to the RowDefinitions attribute of the Grid control. Locate the last <HorizontalStackLayout> starting tag at the bottom of the Grid and change the Grid.Row property to "7" instead of "6". Just before the <HorizontalStackLayout> starting tag you just modified, add the following XAML that creates the Switch control:

Try It Out

Run the application and click on Users > Navigate to Detail to see the switch control. Click on the Switch control a couple of times to see the labels change.