Xamarin.Forms 編輯器教學課程

發行項
Developer (初級)
完成時間 8 分鐘

在嘗試此教學課程之前，您應該已成功完成：

建置您的第一個 Xamarin.Forms 應用程式快速入門。
StackLayout 教學課程。

在本教學課程中，您會了解如何：

在 XAML 中建立 Xamarin.FormsEditor 。
回應 Editor 變更中的文字。
自訂 Editor 的行為。

您將會使用 Visual Studio 2019 或 Visual Studio for Mac 來建立能示範如何自訂 Editor 之行為的簡單應用程式。下列螢幕擷取畫面顯示的是最終的應用程式：

您也會使用 XAML 熱重新載入 Xamarin.Forms 來查看 UI 變更，而不需重建應用程式。

建立編輯器

剩餘 7 分鐘

Visual Studio
Visual Studio for Mac

若要完成此教學課程，您應該有 Visual Studio 2019 (最新版本)，並已安裝 [使用 .NET 進行行動開發] 工作負載。此外，您還需要配對的 Mac 才能在 iOS 上建置教學課程應用程式。如需安裝 Xamarin 平台的相關資訊，請參閱安裝 Xamarin。如需有關將 Visual Studio 2019 連線至 Mac 建置主機的相關資訊，請參閱為 Xamarin.iOS 開發與 Mac 配對。

啟動 Visual Studio，並建立名為 EditorTutorial 的新空白Xamarin.Forms應用程式。

重要

本教學課程中的 C# 和 XAML 程式碼片段會要求將解決方案命名為 EditorTutorial。當您從本教學課程將程式碼複製到解決方案時，使用不同的名稱會導致建置錯誤。

如需有關建立之 .NET Standard 連結庫的詳細資訊，請參閱快速入門深入探討中的Xamarin.Forms應用程式剖析Xamarin.Forms。
在 [方案總管] 的 EditorTutorial 專案中，按兩下 MainPage.xaml 將其開啟。然後在 MainPage.xaml 中，移除所有範本程式碼，並取代為下列程式碼：
```
<?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>
```
此程式碼會以宣告的方式定義頁面的使用者介面，其包含 StackLayout 中的 Editor。 Editor.Placeholder 屬性會指定 Editor 第一次顯示時呈現的預留位置文字。此外，HeightRequest 屬性可指定 Editor 的高度 (採用與裝置無關的單位)。
在 Visual Studio 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式：

注意

Android 會指示 Editor 的高度，但 iOS 不會。

在 Visual Studio 中，停止應用程式。

若要完成本教學課程，您應該具備 Visual Studio for Mac (最新版本)，並已安裝 iOS 和 Android 平台支援。此外，您還需要 Xcode (最新版本)。如需安裝 Xamarin 平台的詳細資訊，請參閱安裝 Xamarin。

啟動 Visual Studio for Mac，並建立名為 EditorTutorial 的新空白Xamarin.Forms應用程式。

重要

本教學課程中的 C# 和 XAML 程式碼片段會要求將解決方案命名為 EditorTutorial。當您從本教學課程將程式碼複製到解決方案時，使用不同的名稱會導致建置錯誤。

如需有關建立之 .NET Standard 連結庫的詳細資訊，請參閱快速入門深入探討中的Xamarin.Forms應用程式剖析Xamarin.Forms。
在 [Solution Pad] 的 EditorTutorial 專案中，按兩下 MainPage.xaml 將其開啟。然後在 MainPage.xaml 中，移除所有範本程式碼，並取代為下列程式碼：
```
<?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>
```
此程式碼會以宣告的方式定義頁面的使用者介面，其包含 StackLayout 中的 Editor。 Editor.Placeholder 屬性會指定 Editor 第一次顯示時呈現的預留位置文字。此外，HeightRequest 屬性可指定 Editor 的高度 (採用與裝置無關的單位)。
在 Visual Studio for Mac 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選 iOS 模擬器或 Android 模擬器內的應用程式：

注意

Android 會指示 Editor 的高度，但 iOS 不會。

在 Visual Studio for Mac 中，停止應用程式。

回應文字變更

剩餘 5 分鐘

Visual Studio
Visual Studio for Mac

在 MainPage.xaml 中修改 Editor 宣告，以便其設定 TextChanged 和 Completed 事件的處理常式：
```
<Editor Placeholder="Enter multi-line text here"
        HeightRequest="200"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />
```
此程式碼會將 TextChanged 事件設定成名為 OnEditorTextChanged 的事件處理常式，並將 Completed 事件設定成名為 OnEditorCompleted 的事件處理常式。下一個步驟將會建立這兩個事件處理常式。
在 [方案總管] 的 EditorTutorial 專案中展開 MainPage.xaml，然後按兩下 MainPage.xaml.cs 將其開啟。然後，在 MainPage.xaml.cs 中，將 OnEditorTextChanged 和 OnEditorCompleted 事件處理常式新增至類別：
```
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;
}
```
OnEditorTextChanged 方法會在 Editor 中的文字發生變更時執行。 sender 引數是負責引發 TextChanged 事件的 Editor 物件，並且可用來存取 Editor 物件。 TextChangedEventArgs 引數會在文字變更之前和之後提供舊的和新的文字值。

完成編輯之後，OnEditorCompleted 方法會隨即執行。這可藉由從 Editor 上移開焦點來完成，或另外按下 iOS 上的「完成」按鈕來完成。 sender 引數是負責引發 TextChanged 事件的 Editor 物件，並且可用來存取 Editor 物件。

重要

輸入到 Editor 的任何文字都會儲存到 Text 屬性。
在 Visual Studio 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式：

在兩個事件處理常式中設定中斷點、將文字輸入 Editor，並觀察 TextChanged 事件的引發。從 Editor 上移開焦點，即可看到 Completed 事件引發。

如需事件的詳細資訊Editor，請參閱編輯器指南中的Xamarin.Forms事件和互動性。

在 MainPage.xaml 中修改 Editor 宣告，以便其設定 TextChanged 和 Completed 事件的處理常式：
```
<Editor Placeholder="Enter multi-line text here"
        HeightRequest="200"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />
```
此程式碼會將 TextChanged 事件設定成名為 OnEditorTextChanged 的事件處理常式，並將 Completed 事件設定成名為 OnEditorCompleted 的事件處理常式。下一個步驟將會建立這兩個事件處理常式。
在 [Solution Pad] 的 EditorTutorial 專案中展開 MainPage.xaml，然後按兩下 MainPage.xaml.cs 將其開啟。然後，在 MainPage.xaml.cs 中，將 OnEditorTextChanged 和 OnEditorCompleted 事件處理常式新增至類別：
```
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;
}
```
OnEditorTextChanged 方法會在 Editor 中的文字發生變更時執行。 sender 引數是負責引發 TextChanged 事件的 Editor 物件，並且可用來存取 Editor 物件。 TextChangedEventArgs 引數會在文字變更之前和之後提供舊的和新的文字值。

完成編輯之後，OnEditorCompleted 方法會隨即執行。這可藉由從 Editor 上移開焦點來完成，或另外按下 iOS 上的「完成」按鈕來完成。 sender 引數是負責引發 TextChanged 事件的 Editor 物件，並且可用來存取 Editor 物件。

重要

輸入到 Editor 的任何文字都會儲存到 Text 屬性。
在 Visual Studio for Mac 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選 iOS 模擬器或 Android 模擬器內的應用程式：

在兩個事件處理常式中設定中斷點、將文字輸入 Editor，並觀察 TextChanged 事件的引發。從 Editor 上移開焦點，即可看到 Completed 事件引發。

如需事件的詳細資訊Editor，請參閱編輯器指南中的Xamarin.Forms事件和互動性。

自訂行為

剩餘 2 分鐘

Visual Studio
Visual Studio for Mac

在 MainPage.xaml 中修改 Editor 宣告，以自訂其行為：
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
此程式碼會設定屬性以自訂 Editor 的行為。 AutoSize 屬性會設定為 TextChanges，這表示 Editor 的高度會在填滿文字時增加，移除文字時減少。 MaxLength 屬性會限制 Editor 可允許的輸入長度。此外，IsSpellCheckEnabled 屬性會設定為 false 以停用拼字檢查，IsTextPredictionEnabled 屬性則會設定為 false 以停用文字預測和自動文字預測。
如果應用程式仍在執行，請將變更儲存至檔案，應用程式使用者介面將會在您的模擬器中自動更新。否則，請在 Visual Studio 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式。將文字輸入 Editor，並觀察一下，Editor 的高度會在填滿文字時增加，移除文字時減少，而且可以輸入的字元數目上限為 200 個字元：

在 Visual Studio 中，停止應用程式。

如需自定義 Editor 行為的詳細資訊，請參閱 Xamarin.Forms 編輯器指南。

在 MainPage.xaml 中修改 Editor 宣告，以自訂其行為：
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
此程式碼會設定屬性以自訂 Editor 的行為。 AutoSize 屬性會設定為 TextChanges，這表示 Editor 的高度會在填滿文字時增加，移除文字時減少。 MaxLength 屬性會限制 Editor 可允許的輸入長度。此外，IsSpellCheckEnabled 屬性會設定為 false 以停用拼字檢查，IsTextPredictionEnabled 屬性則會設定為 false 以停用文字預測和自動文字預測。
如果應用程式仍在執行，請將變更儲存至檔案，應用程式使用者介面將會在您的模擬器中自動更新。否則，請在 Visual Studio for Mac 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式。將文字輸入 Editor，並觀察一下，Editor 的高度會在填滿文字時增加，移除文字時減少，而且可以輸入的字元數目上限為 200 個字元：

在 Visual Studio for Mac 中，停止應用程式。

如需自定義 Editor 行為的詳細資訊，請參閱 Xamarin.Forms 編輯器指南。

Xamarin.Forms 編輯器教學課程

建立編輯器

回應文字變更

自訂行為

恭喜！

下一步

Xamarin.Forms 編輯器教學課程

建立編輯器

回應文字變更

自訂行為

恭喜！

下一步

相關連結