Xamarin.Forms Entry Tutorial

Artikkeli
Developer (Beginner)
8 minutes to complete

Before attempting this tutorial, you should have successfully completed the:

Build your first Xamarin.Forms app quickstart.
StackLayout tutorial.

In this tutorial, you learn how to:

Create a Xamarin.Forms Entry in XAML.
Respond to the text in the Entry changing.
Customize the behavior of the Entry.

You will use Visual Studio 2019, or Visual Studio for Mac, to create a simple application that demonstrates how to customize the behavior of an Entry. The following screenshots show the final application:

You'll also use XAML Hot Reload for Xamarin.Forms to see UI changes without rebuilding your application.

Create a entry

7 minutes remaining

Visual Studio
Visual Studio for Mac

To complete this tutorial you should have Visual Studio 2019 (latest release), with the Mobile development with .NET workload installed. In addition, you will require a paired Mac to build the tutorial application on iOS. For information about installing the Xamarin platform, see Installing Xamarin. For information about connecting Visual Studio 2019 to a Mac build host, see Pair to Mac for Xamarin.iOS development.

Launch Visual Studio, and create a new blank Xamarin.Forms app named EntryTutorial.

Important

The C# and XAML snippets in this tutorial requires that the solution is named EntryTutorial. Using a different name will result in build errors when you copy code from this tutorial into the solution.

For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.
In Solution Explorer, in the EntryTutorial project, double-click MainPage.xaml to open it. Then, in MainPage.xaml, remove all of the template code and replace it with the following code:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EntryTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Entry Placeholder="Enter text" />
    </StackLayout>
</ContentPage>
```
This code declaratively defines the user interface for the page, which consists of an Entry in a StackLayout. The Entry.Placeholder property specifies the placeholder text that's shown when the Entry is first displayed.
In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen remote iOS simulator or Android emulator:

In Visual Studio, stop the application.

To complete this tutorial you should have Visual Studio for Mac (latest release), with iOS and Android platform support installed. In addition, you will also require Xcode (latest release). For more information about installing the Xamarin platform, see Installing Xamarin.

Launch Visual Studio for Mac, and create a new blank Xamarin.Forms app named EntryTutorial.

Important

The C# and XAML snippets in this tutorial requires that the solution is named EntryTutorial. Using a different name will result in build errors when you copy code from this tutorial into the solution.

For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.
In Solution Pad, in the EntryTutorial project, double-click MainPage.xaml to open it. Then, in MainPage.xaml, remove all of the template code and replace it with the following code:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EntryTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Entry Placeholder="Enter text" />
    </StackLayout>
</ContentPage>
```
This code declaratively defines the user interface for the page, which consists of an Entry in a StackLayout. The Entry.Placeholder property specifies the placeholder text that's shown when the Entry is first displayed.
In the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS simulator or Android emulator:

In Visual Studio for Mac, stop the application.

Respond to text changes

5 minutes remaining

Visual Studio
Visual Studio for Mac

In MainPage.xaml, modify the Entry declaration so that it sets a handler for the TextChanged and Completed events:
```
<Entry Placeholder="Enter text"
       TextChanged="OnEntryTextChanged"
       Completed="OnEntryCompleted" />
```
This code sets the TextChanged event to an event handler named OnEntryTextChanged, and the Completed event to an event handler named OnEntryCompleted. Both event handlers will be created in the next step.
In Solution Explorer, in the EntryTutorial project, expand MainPage.xaml and double-click MainPage.xaml.cs to open it. Then, in MainPage.xaml.cs, add the OnEntryTextChanged and OnEntryCompleted event handlers to the class:
```
void OnEntryTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

void OnEntryCompleted(object sender, EventArgs e)
{
    string text = ((Entry)sender).Text;
}
```
When the text in the Entry changes, the OnEntryTextChanged method executes. The sender argument is the Entry object responsible for firing the TextChanged event, and can be used to access the Entry object. The TextChangedEventArgs argument provides the old and new text values, from before and after the text change.

When you finalize the text in the Entry with the return key, the OnEntryCompleted method executes. The sender argument is the Entry object responsible for firing the TextChanged event, and can be used to access the Entry object.

Important

Any text entered into an Entry is stored in the Text property.
In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen remote iOS simulator or Android emulator:

Set breakpoints in the two event handlers and enter text into the Entry and observe the TextChanged and Completed events firing.

For more information about Entry events, see Events and interactivity in the Xamarin.Forms Entry guide.

In MainPage.xaml, modify the Entry declaration so that it sets a handler for the TextChanged and Completed events:
```
<Entry Placeholder="Enter text"
       TextChanged="OnEntryTextChanged"
       Completed="OnEntryCompleted" />
```
This code sets the TextChanged event to an event handler named OnEntryTextChanged, and the Completed event to an event handler named OnEntryCompleted. Both event handlers will be created in the next step.
In Solution Pad, in the EntryTutorial project, expand MainPage.xaml and double-click MainPage.xaml.cs to open it. Then, in MainPage.xaml.cs, add the OnEntryTextChanged and OnEntryCompleted event handlers to the class:
```
void OnEntryTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

void OnEntryCompleted(object sender, EventArgs e)
{
    string text = ((Entry)sender).Text;
}
```
When the text in the Entry changes, the OnEntryTextChanged method executes. The sender argument is the Entry object responsible for firing the TextChanged event, and can be used to access the Entry object. The TextChangedEventArgs argument provides the old and new text values, from before and after the text change.

When you finalize the text in the Entry with the return key, the OnEntryCompleted method executes. The sender argument is the Entry object responsible for firing the TextChanged event, and can be used to access the Entry object.

Important

Any text entered into an Entry is stored in the Text property.
In the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS simulator or Android emulator:

Set breakpoints in the two event handlers and enter text into the Entry and observe the TextChanged and Completed events firing.

For more information about Entry events, see Events and Interactivity in the Xamarin.Forms Entry guide.

Customize behavior

2 minutes remaining

Visual Studio
Visual Studio for Mac

In MainPage.xaml, modify the Entry declaration to customize its behavior:
```
<Entry Placeholder="Enter password"
       MaxLength="15"
       IsSpellCheckEnabled="false"
       IsTextPredictionEnabled="false"
       IsPassword="true" />
```
This code sets properties that customize the behavior of the Entry. The MaxLength property limits the input length that's permitted for the Entry, and the IsSpellCheckEnabled property is set to false to disable spell checking. Similarly, the IsTextPredictionEnabled property is set to false to disable text prediction and automatic text prediction. In addition, the IsPassword property ensures that entered characters are masked with a password character (a black circle).

Note

For some text entry scenarios, such as entering a password, spell checking and text prediction provides a negative experience and should therefore be disabled.
If the application is still running, save the changes to the file and the application user interface will automatically be updated in your simulator or emulator. Otherwise, in the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen remote iOS simulator or Android emulator. Enter text into the Entry and observe that each character is replaced with a password mask character, and that the maximum number of characters that can be entered is 15:

In Visual Studio, stop the application.

For more information about customizing Entry behavior, see the Xamarin.Forms Entry guide.

In MainPage.xaml, modify the Entry declaration to customize its behavior:
```
<Entry Placeholder="Enter password"
       MaxLength="15"
       IsSpellCheckEnabled="false"
       IsTextPredictionEnabled="false"
       IsPassword="true" />
```
This code sets properties that customize the behavior of the Entry. The MaxLength property limits the input length that's permitted for the Entry, and the IsSpellCheckEnabled property is set to false to disable spell checking. Similarly, the IsTextPredictionEnabled property is set to false to disable text prediction and automatic text prediction. In addition, the IsPassword property ensures that entered characters are masked with a password character (a black circle).

Note

For some text entry scenarios, such as entering a password, spell checking and text prediction provides a negative experience and should therefore be disabled.
If the application is still running, save the changes to the file and the application user interface will automatically be updated in your simulator or emulator. Otherwise, in the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS simulator or Android emulator. Enter text into the Entry and observe that each character is replaced with a password mask character, and that the maximum number of characters that can be entered is 15:

In Visual Studio for Mac, stop the application.

For more information about customizing Entry behavior, see the Xamarin.Forms Entry guide.

Jaa

Xamarin.Forms Entry Tutorial

Create a entry

Respond to text changes

Customize behavior

Congratulations!

Next steps

Jaa

Xamarin.Forms Entry Tutorial

Create a entry

Respond to text changes

Customize behavior

Congratulations!

Next steps

Related links