Xamarin.Forms Editor Tutorial

บทความ
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 Editor in XAML.
Respond to the text in the Editor changing.
Customize the behavior of the Editor.

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 Editor. 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 editor

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 EditorTutorial.

Important

The C# and XAML snippets in this tutorial requires that the solution is named EditorTutorial. 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 EditorTutorial 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="EditorTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Editor Placeholder="Enter multi-line text here"
                HeightRequest="200" />
    </StackLayout>
</ContentPage>
```
This code declaratively defines the user interface for the page, which consists of an Editor in a StackLayout. The Editor.Placeholder property specifies the placeholder text that's shown when the Editor is first displayed. In addition, the HeightRequest property specifies the height of the Editor in device-independent units.
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:

Note

While Android indicates the height of the Editor, iOS does not.

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 EditorTutorial.

Important

The C# and XAML snippets in this tutorial requires that the solution is named EditorTutorial. 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 EditorTutorial 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="EditorTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Editor Placeholder="Enter multi-line text here"
                HeightRequest="200" />
    </StackLayout>
</ContentPage>
```
This code declaratively defines the user interface for the page, which consists of an Editor in a StackLayout. The Editor.Placeholder property specifies the placeholder text that's shown when the Editor is first displayed. In addition, the HeightRequest property specifies the height of the Editor in device-independent units.
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:

Note

While Android indicates the height of the Editor, iOS does not.

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 Editor declaration so that it sets a handler for the TextChanged and Completed events:
```
<Editor Placeholder="Enter multi-line text here"
        HeightRequest="200"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />
```
This code sets the TextChanged event to an event handler named OnEditorTextChanged, and the Completed event to an event handler named OnEditorCompleted. Both event handlers will be created in the next step.
In Solution Explorer, in the EditorTutorial project, expand MainPage.xaml and double-click MainPage.xaml.cs to open it. Then, in MainPage.xaml.cs, add the OnEditorTextChanged and OnEditorCompleted event handlers to the class:
```
void OnEditorTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

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

When the editing is completed, the OnEditorCompleted method executes. This is achieved by unfocussing the Editor, or additionally by pressing the "Done" button on iOS. The sender argument is the Editor object responsible for firing the TextChanged event, and can be used to access the Editor object.

Important

Any text entered into an Editor 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, enter text into the Editor, and observe the TextChanged event firing. Unfocus the Editor to observe the Completed event firing.

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

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

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

When the editing is completed, the OnEditorCompleted method executes. This is achieved by unfocussing the Editor, or additionally by pressing the "Done" button on iOS. The sender argument is the Editor object responsible for firing the TextChanged event, and can be used to access the Editor object.

Important

Any text entered into an Editor 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, enter text into the Editor, and observe the TextChanged event firing. Unfocus the Editor to observe the Completed event firing.

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

Customize behavior

2 minutes remaining

Visual Studio
Visual Studio for Mac

In MainPage.xaml, modify the Editor declaration to customize its behavior:
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
This code sets properties that customize the behavior of the Editor. The AutoSize property is set to TextChanges, which indicates that the height of the Editor will increase when its filled with text, and decrease as text is removed. The MaxLength property limits the input length that's permitted for the Editor. In addition, the IsSpellCheckEnabled property is set to false to disable spell checking, while the IsTextPredictionEnabled property is set to false to disable text prediction and automatic text prediction.
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 Editor and observe that the height of the Editor increases as it fills with text, and decreases as text is removed, and that the maximum number of characters that can be entered is 200:

In Visual Studio, stop the application.

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

In MainPage.xaml, modify the Editor declaration to customize its behavior:
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
This code sets properties that customize the behavior of the Editor. The AutoSize property is set to TextChanges, which indicates that the height of the Editor will increase when its filled with text, and decrease as text is removed. The MaxLength property limits the input length that's permitted for the Editor. In addition, the IsSpellCheckEnabled property is set to false to disable spell checking, while the IsTextPredictionEnabled property is set to false to disable text prediction and automatic text prediction.
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 Editor and observe that the height of the Editor increases as it fills with text, and decreases as text is removed, and that the maximum number of characters that can be entered is 200:

In Visual Studio for Mac, stop the application.

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

แชร์ผ่าน

Xamarin.Forms Editor Tutorial

Create a editor

Respond to text changes

Customize behavior

Congratulations!

Next steps

แชร์ผ่าน

Xamarin.Forms Editor Tutorial

Create a editor

Respond to text changes

Customize behavior

Congratulations!

Next steps

Related links