Xamarin.Forms 按钮教程

开始演练本教程的前提条件为已成功完成以下教程：

生成第一个 Xamarin.Forms 应用快速入门。
StackLayout教程。

在本教程中，你将了解：

在 XAML 中创建 Xamarin.FormsButton。
响应被点击的 Button。
更改 Button 的外观。

你将使用 Visual Studio 2019 或 Visual Studio for Mac 创建一个简单的应用程序，演示如何自定义 Button。以下屏幕截图显示了最终的应用程序：

还将使用适用于 Xamarin.Forms 的 XAML 热重载查看 UI 更改，而无需重新生成应用程序。

创建按钮

剩余 6 分钟

Visual Studio
Visual Studio for Mac

若要完成本教程，应使用 Visual Studio 2019（最新版本），且安装了“使用 .NET 的移动开发”工作负载。此外，还需要一个匹配的 Mac，用于在 iOS 上生成教程应用程序。有关安装 Xamarin 平台的信息，请参阅安装 Xamarin。有关将 Visual Studio 2019 连接到 Mac 生成主机的信息，请参阅通过“与 Mac 配对”进行 Xamarin.iOS 开发。

启动 Visual Studio，新建名为 ButtonTutorial 的 Xamarin.Forms 空白应用。

重要

本教程中的 C# 和 XAML 片段要求将解决方案命名为 ButtonTutorial。使用不同的名称会导致：将本教程中的代码复制到解决方案中时出现生成错误。

有关创建的 .NET Standard 库的详细信息，请参阅 Xamarin.FormsXamarin.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 Emulator 内的应用程序：

注意，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.FormsXamarin.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!";
}
```
点击 Button 时，将执行 OnButtonClicked 方法。 sender 参数是负责触发 Clicked 事件的 Button 对象，还可用于访问 Button 对象。此事件处理程序更新 Button 显示的文本。

注意

除了 Clicked 事件，Button 还定义了 Pressed 和 Released 事件。有关详细信息，请参阅 Xamarin.Forms 按钮指南中的按下并释放按钮。
在 Visual Studio 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选远程 iOS 模拟器或 Android Emulator 内的应用程序。单击 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!";
}
```
点击 Button 时，将执行 OnButtonClicked 方法。 sender 参数是负责触发 Clicked 事件的 Button 对象，还可用于访问 Button 对象。此事件处理程序更新 Button 显示的文本。

注意

除了 Clicked 事件，Button 还定义了 Pressed 和 Released 事件。有关详细信息，请参阅 Xamarin.Forms 按钮指南中的按下并释放按钮。
在 Visual Studio for Mac 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选 iOS 模拟器或 Android Emulator 内的应用程序。单击 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 属性设置为合适的值来设定圆角。另外，通过设置 WidthRequest 和 HeightRequest 属性来改变 Button 的大小。
如果应用程序仍在运行，请保存对文件所做的更改，应用程序用户界面将自动在模拟器或仿真器中更新。否则，请在 Visual Studio 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选远程 iOS 模拟器或 Android Emulator 内的应用程序。请注意，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 属性设置为合适的值来设定圆角。另外，通过设置 WidthRequest 和 HeightRequest 属性来改变 Button 的大小。
如果应用程序仍在运行，请保存对文件所做的更改，应用程序用户界面将自动在模拟器或仿真器中更新。否则，请在 Visual Studio for Mac 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选 iOS 模拟器或 Android Emulator 内的应用程序。请注意，Button 的外观已更改：

在 Visual Studio for Mac 中停止应用程序。

有关设置 Button 外观的详细信息，请参阅 Xamarin.Forms 指南中的按钮外观。

恭喜！

100% 完成！

祝贺你完成了本教程的学习，在本教程中你学习了如何：

在 XAML 中创建 Xamarin.FormsButton。
响应被点击的 Button。
更改 Button 的外观。

后续步骤

若要深入了解使用 Xamarin.Forms 创建移动应用程序的基础知识，请继续学习“条目”教程。

条目教程

通过

创建按钮

处理单击事件

更改外观

恭喜！

后续步骤

相关链接