Xamarin.Forms 按鈕教學課程

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

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

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

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

在 XAML 中建立 Xamarin.FormsButton 。
回應所點選的 Button。
變更 Button 的外觀。

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

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

建立按鈕

剩餘 6 分鐘

Visual Studio
Visual Studio for Mac

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

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

重要

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

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

請注意，根據預設 Button 易於佔用允許的所有空間 - 在此情況下，其父代的整個寬度 (StackLayout)。

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

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

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

重要

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

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

請注意，根據預設 Button 易於佔用允許的所有空間 - 在此情況下，其父代的整個寬度 (StackLayout)。

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

處理點按

剩餘 4 分鐘

Visual Studio
Visual Studio for Mac

在 MainPage.xaml 中修改 Button 宣告，以便其設定 Clicked 事件的處理常式：
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
此程式碼會將 Clicked 事件設定為名為 OnButtonClicked 的事件處理常式 (將在下一個步驟中建立)。
在 [方案總管] 的 ButtonTutorial 專案中展開 MainPage.xaml，然後按兩下 MainPage.xaml.cs 將其開啟。然後，在 MainPage.xaml.cs 中，將 OnButtonClicked 事件處理常式新增至類別：
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
OnButtonClicked方法會在點選 Button 時執行。 sender 引數是負責引發 Clicked 事件的 Button 物件，並且可用來存取 Button 物件。此事件處理常式可藉由 Button 來更新所顯示的文字。

注意

除了 Clicked 事件，Button 也會定義 Pressed 和 Released 事件。如需詳細資訊，請參閱按按鈕指南中的 Xamarin.Forms按鈕並放開。
在 Visual Studio 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式。按一下 Button，可看到顯示的文字發生變更：

如需處理按鈕點選的詳細資訊，請參閱處理按鈕指南中的 Xamarin.Forms按鈕點選。

在 MainPage.xaml 中修改 Button 宣告，以便其設定 Clicked 事件的處理常式：
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
此程式碼會將 Clicked 事件設定為名為 OnButtonClicked 的事件處理常式 (將在下一個步驟中建立)。
在 [Solution Pad] 的 ButtonTutorial 專案中展開 MainPage.xaml，然後按兩下 MainPage.xaml.cs 將其開啟。然後，在 MainPage.xaml.cs 中，將 OnButtonClicked 事件處理常式新增至類別：
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
OnButtonClicked方法會在點選 Button 時執行。 sender 引數是負責引發 Clicked 事件的 Button 物件，並且可用來存取 Button 物件。此事件處理常式可藉由 Button 來更新所顯示的文字。

注意

除了 Clicked 事件，Button 也會定義 Pressed 和 Released 事件。如需詳細資訊，請參閱按按鈕指南中的 Xamarin.Forms按鈕並放開。
在 Visual Studio for Mac 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選 iOS 模擬器或 Android 模擬器內的應用程式。按一下 Button，可看到顯示的文字發生變更：

如需處理按鈕點選的詳細資訊，請參閱處理按鈕指南中的 Xamarin.Forms按鈕點選。

變更外觀

剩餘 2 分鐘

Visual Studio
Visual Studio for Mac

在 MainPage.xaml 中修改 Button 宣告，以變更其視覺外觀：
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
此程式碼會設定可變更 Button 視覺外觀的屬性。 TextColor 屬性會設定 Button 文字的色彩，BackgroundColor 屬性則會設定文字背景的色彩。 BorderColor 屬性會設定 Button 周圍區域的色彩，BorderWidth 屬性則會設定框線的寬度。根據預設，Button 是矩形的，但您可以藉由將 CornerRadius 屬性設定為適當的值來賦予其圓角。此外，Button 的大小可藉由設定其 WidthRequest 和 HeightRequest 屬性來加以變更。
如果應用程式仍在執行，請將變更儲存至檔案，應用程式使用者介面將會在您的模擬器中自動更新。否則，請在 Visual Studio 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式。請觀察一下，Button 外觀已變更：

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

如需設定Button外觀的詳細資訊，請參閱按鈕指南中的 Xamarin.Forms按鈕外觀。

在 MainPage.xaml 中修改 Button 宣告，以變更其視覺外觀：
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
此程式碼會設定可變更 Button 視覺外觀的屬性。 TextColor 屬性會設定 Button 文字的色彩，BackgroundColor 屬性則會設定文字背景的色彩。 BorderColor 屬性會設定 Button 周圍區域的色彩，BorderWidth 屬性則會設定框線的寬度。根據預設，Button 是矩形的，但您可以藉由將 CornerRadius 屬性設定為適當的值來賦予其圓角。此外，Button 的大小可藉由設定其 WidthRequest 和 HeightRequest 屬性來加以變更。
如果應用程式仍在執行，請將變更儲存至檔案，應用程式使用者介面將會在您的模擬器中自動更新。否則，請在 Visual Studio for Mac 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式。請觀察一下，Button 外觀已變更：

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

如需設定Button外觀的詳細資訊，請參閱按鈕指南中的 Xamarin.Forms按鈕外觀。

Xamarin.Forms 按鈕教學課程

建立按鈕

處理點按

變更外觀

恭喜！

下一步

Xamarin.Forms 按鈕教學課程

建立按鈕

處理點按

變更外觀

恭喜！

下一步

相關連結