Xamarin.Forms 項目教學課程

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

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

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

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

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

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

您也會使用 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，並建立名為 EntryTutorial 的新空白Xamarin.Forms應用程式。

重要

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

如需有關建立之 .NET Standard 連結庫的詳細資訊，請參閱快速入門深入探討中的Xamarin.Forms應用程式剖析Xamarin.Forms。
在 [方案總管] 的 EntryTutorial 專案中，按兩下 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="EntryTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Entry Placeholder="Enter text" />
    </StackLayout>
</ContentPage>
```
此程式碼會以宣告的方式定義頁面的使用者介面，其包含 StackLayout 中的 Entry。 Entry.Placeholder 屬性會指定 Entry 第一次顯示時呈現的預留位置文字。
在 Visual Studio 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式：

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

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

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

重要

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

如需有關建立之 .NET Standard 連結庫的詳細資訊，請參閱快速入門深入探討中的Xamarin.Forms應用程式剖析Xamarin.Forms。
在 [Solution Pad] 的 EntryTutorial 專案中，按兩下 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="EntryTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Entry Placeholder="Enter text" />
    </StackLayout>
</ContentPage>
```
此程式碼會以宣告的方式定義頁面的使用者介面，其包含 StackLayout 中的 Entry。 Entry.Placeholder 屬性會指定 Entry 第一次顯示時呈現的預留位置文字。
在 Visual Studio for Mac 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選 iOS 模擬器或 Android 模擬器內的應用程式：

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

回應文字變更

剩餘 5 分鐘

Visual Studio
Visual Studio for Mac

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

當您按下 Return 鍵來完成 Entry 中的文字時，OnEntryCompleted 方法便會執行。 sender 引數是負責引發 TextChanged 事件的 Entry 物件，並且可用來存取 Entry 物件。

重要

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

在兩個事件處理常式中設定中斷點，並將文字輸入 Entry，然後觀察 TextChanged 和 Completed 事件的引發。

如需事件的詳細資訊Entry，請參閱專案指南中的Xamarin.Forms事件和互動性。

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

當您按下 Return 鍵來完成 Entry 中的文字時，OnEntryCompleted 方法便會執行。 sender 引數是負責引發 TextChanged 事件的 Entry 物件，並且可用來存取 Entry 物件。

重要

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

在兩個事件處理常式中設定中斷點，並將文字輸入 Entry，然後觀察 TextChanged 和 Completed 事件的引發。

如需事件的詳細資訊Entry，請參閱輸入指南中的Xamarin.Forms事件和互動功能。

自訂行為

剩餘 2 分鐘

Visual Studio
Visual Studio for Mac

在 MainPage.xaml 中修改 Entry 宣告，以自訂其行為：
```
<Entry Placeholder="Enter password"
       MaxLength="15"
       IsSpellCheckEnabled="false"
       IsTextPredictionEnabled="false"
       IsPassword="true" />
```
此程式碼會設定屬性以自訂 Entry 的行為。 MaxLength 屬性會限制 Entry 可允許的輸入長度，而 IsSpellCheckEnabled 屬性會設定為 false 以停用拼字檢查。同樣地，IsTextPredictionEnabled 屬性會設定為 false，以停用文字預測和自動文字預測。此外，IsPassword 屬性可確保輸入的字元會以密碼字元遮罩 (黑色圓圈)。

注意

在某些文字輸入的案例中 (例如輸入密碼)，拼字檢查和文字預測上會出現負面的體驗，因此應該停用。
如果應用程式仍在執行，請將變更儲存至檔案，應用程式使用者介面將會在您的模擬器中自動更新。否則，請在 Visual Studio 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式。將文字輸入 Entry，您將看到密碼遮罩字元會取代每個字元，而可以輸入的字元數目上限為 15 個字元：

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

如需自定義 Entry 行為的詳細資訊，請參閱 Xamarin.Forms 輸入指南。

在 MainPage.xaml 中修改 Entry 宣告，以自訂其行為：
```
<Entry Placeholder="Enter password"
       MaxLength="15"
       IsSpellCheckEnabled="false"
       IsTextPredictionEnabled="false"
       IsPassword="true" />
```
此程式碼會設定屬性以自訂 Entry 的行為。 MaxLength 屬性會限制 Entry 可允許的輸入長度，而 IsSpellCheckEnabled 屬性會設定為 false 以停用拼字檢查。同樣地，IsTextPredictionEnabled 屬性會設定為 false，以停用文字預測和自動文字預測。此外，IsPassword 屬性可確保輸入的字元會以密碼字元遮罩 (黑色圓圈)。

注意

在某些文字輸入的案例中 (例如輸入密碼)，拼字檢查和文字預測上會出現負面的體驗，因此應該停用。
如果應用程式仍在執行，請將變更儲存至檔案，應用程式使用者介面將會在您的模擬器中自動更新。否則，請在 Visual Studio for Mac 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式。將文字輸入 Entry，您將看到密碼遮罩字元會取代每個字元，而可以輸入的字元數目上限為 15 個字元：

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

如需自定義 Entry 行為的詳細資訊，請參閱 Xamarin.Forms 輸入指南。

Xamarin.Forms 項目教學課程

建立輸入

回應文字變更

自訂行為

恭喜！

下一步

Xamarin.Forms 項目教學課程

建立輸入

回應文字變更

自訂行為

恭喜！

下一步

相關連結