Xamarin.Forms 按钮教程

新建项目

打开Visual Studio，新建空白Xamarin.Forms项目，项目名称：ButtonTutorial。

基础按钮，MainPage.xaml

双击打开MainPage.xaml，替换代码：

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="[http://xamarin.com/schemas/2014/forms](http://xamarin.com/schemas/2014/forms)"
             xmlns:x="[http://schemas.microsoft.com/winfx/2009/xaml](http://schemas.microsoft.com/winfx/2009/xaml)"
             x:Class="ButtonTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Button Text="Click me" />
    </StackLayout>
</ContentPage>
Code language: HTML, XML (xml)

说明：

• Button：按钮控件，Text属性设置按钮上显示文字。
• Button默认会尽可能占满父容器（StackLayout）的全部宽度。

添加Clicked点击事件绑定（XAML）

修改Button，绑定Clicked事件处理方法：

<Button Text="Click me" Clicked="OnButtonClicked" />
Code language: HTML, XML (xml)

Clicked="OnButtonClicked"：指定点击按钮时触发后台代码里的OnButtonClicked方法。

编写事件处理代码 MainPage.xaml.cs

打开MainPage.xaml.cs，添加事件方法：

void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
Code language: JavaScript (javascript)

说明：

• sender：触发事件的对象，这里就是被点击的Button。
• 将sender强制转为Button类型，修改按钮的Text文本。
• 点击按钮后，按钮文字就会更新为Click me again!。

美化按钮，设置外观属性

修改XAML里的Button，设置颜色、边框、圆角、尺寸：

<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
Code language: HTML, XML (xml)

属性说明：

• TextColor：按钮文字颜色
• BackgroundColor：按钮背景色
• BorderColor：边框颜色
• BorderWidth：边框宽度
• CornerRadius：圆角半径，实现圆角按钮
• WidthRequest：建议宽度
• HeightRequest：建议高度

总结

1. Button是交互控件，核心事件Clicked，点击触发。
2. XAML绑定事件名称，后台cs文件实现对应的事件方法。
3. sender参数可以拿到触发事件的控件实例。
4. 可以自定义按钮文字颜色、背景、边框、圆角、大小。
5. 默认Button宽度会填充父容器，可通过WidthRequest/HeightRequest自定义期望尺寸。