Xamarin.Forms Button Tutorial

Artikkeli
Developer (Beginner)
7 minutes to complete

Before attempting this tutorial, you should have successfully completed the:

Build your first Xamarin.Forms app quickstart.
StackLayout tutorial.

In this tutorial, you learn how to:

Create a Xamarin.Forms Button in XAML.
Respond to the Button being tapped.
Change the appearance of the Button.

You will use Visual Studio 2019, or Visual Studio for Mac, to create a simple application that demonstrates how to customize a Button. The following screenshots show the final application:

You'll also use XAML Hot Reload for Xamarin.Forms to see UI changes without rebuilding your application.

Create a button

6 minutes remaining

Visual Studio
Visual Studio for Mac

To complete this tutorial you should have Visual Studio 2019 (latest release), with the Mobile development with .NET workload installed. In addition, you will require a paired Mac to build the tutorial application on iOS. For information about installing the Xamarin platform, see Installing Xamarin. For information about connecting Visual Studio 2019 to a Mac build host, see Pair to Mac for Xamarin.iOS development.

Launch Visual Studio, and create a new blank Xamarin.Forms app named ButtonTutorial.

Important

The C# and XAML snippets in this tutorial requires that the solution is named ButtonTutorial. Using a different name will result in build errors when you copy code from this tutorial into the solution.

For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.
In Solution Explorer, in the ButtonTutorial project, double-click MainPage.xaml to open it. Then, in MainPage.xaml, remove all of the template code and replace it with the following code:
```
<?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>
```
This code declaratively defines the user interface for the page, which consists of a Button in a StackLayout. The Button.Text property specifies the text that appears in the Button.
In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen remote iOS simulator or Android emulator:

Note that by default a Button tends to occupy all the space that's allowed for it - in this case, the full width of its parent (the StackLayout).

In Visual Studio, stop the application.

To complete this tutorial you should have Visual Studio for Mac (latest release), with iOS and Android platform support installed. In addition, you will also require Xcode (latest release). For more information about installing the Xamarin platform, see Installing Xamarin.

Launch Visual Studio for Mac, and create a new blank Xamarin.Forms app named ButtonTutorial.

Important

The C# and XAML snippets in this tutorial requires that the solution is named ButtonTutorial. Using a different name will result in build errors when you copy code from this tutorial into the solution.

For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.
In Solution Pad, in the ButtonTutorial project, double-click MainPage.xaml to open it. Then, in MainPage.xaml, remove all of the template code and replace it with the following code:
```
<?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>
```
This code declaratively defines the user interface for the page, which consists of a Button in a StackLayout. The Button.Text property specifies the text that appears in the Button.
In the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS simulator or Android emulator:

Note that by default a Button tends to occupy all the space that's allowed for it - in this case, the full width of its parent (the StackLayout).

In Visual Studio for Mac, stop the application.

Handle clicks

4 minutes remaining

Visual Studio
Visual Studio for Mac

In MainPage.xaml, modify the Button declaration so that it sets a handler for the Clicked event:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
This code sets the Clicked event to an event handler named OnButtonClicked that will be created in the next step.
In Solution Explorer, in the ButtonTutorial project, expand MainPage.xaml and double-click MainPage.xaml.cs to open it. Then, in MainPage.xaml.cs, add the OnButtonClicked event handler to the class:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
When the Button is tapped, the OnButtonClicked method executes. The sender argument is the Button object responsible for firing the Clicked event, and can be used to access the Button object. This event handler updates the text displayed by the Button.

Note

Besides the Clicked event, Button also defines Pressed and Released events. For more information, see Pressing and releasing the button in the Xamarin.Forms Button guide.
In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen remote iOS simulator or Android emulator. Click the Button and observe that the text it displays changes:

For more information about handling button clicks, see Handling button clicks in the Xamarin.Forms Button guide.

In MainPage.xaml, modify the Button declaration so that it sets a handler for the Clicked event:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
This code sets the Clicked event to an event handler named OnButtonClicked that will be created in the next step.
In Solution Pad, in the ButtonTutorial project, expand MainPage.xaml and double-click MainPage.xaml.cs to open it. Then, in MainPage.xaml.cs, add the OnButtonClicked event handler to the class:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
When the Button is tapped, the OnButtonClicked method executes. The sender argument is the Button object responsible for firing the Clicked event, and can be used to access the Button object. This event handler updates the text displayed by the Button.

Note

Besides the Clicked event, Button also defines Pressed and Released events. For more information, see Pressing and releasing the button in the Xamarin.Forms Button guide.
In the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS simulator or Android emulator. Click the Button and observe that the text it displays changes:

For more information about handling button clicks, see Handling button clicks in the Xamarin.Forms Button guide.

Change appearance

2 minutes remaining

Visual Studio
Visual Studio for Mac

In MainPage.xaml, modify the Button declaration to change its visual appearance:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
This code sets properties that change the visual appearance of the Button. The TextColor property sets the color of the Button text, and the BackgroundColor property sets the color of the background to the text. The BorderColor property sets the color of an area surrounding the Button, and the BorderWidth property sets the width of the border. By default, the Button is rectangular, but it can be given rounded corners by setting the CornerRadius property to a suitable value. In addition, the size of the Button is changed by setting its WidthRequest and HeightRequest properties.
If the application is still running, save the changes to the file and the application user interface will automatically be updated in your simulator or emulator. Otherwise, in the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen remote iOS simulator or Android emulator. Observe that the Button appearance has changed:

In Visual Studio, stop the application.

For more information about setting Button appearance, see Button appearance in the Xamarin.Forms Button guide.

In MainPage.xaml, modify the Button declaration to change its visual appearance:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
This code sets properties that change the visual appearance of the Button. The TextColor property sets the color of the Button text, and the BackgroundColor property sets the color of the background to the text. The BorderColor property sets the color of an area surrounding the Button, and the BorderWidth property sets the width of the border. By default, the Button is rectangular, but it can be given rounded corners by setting the CornerRadius property to a suitable value. In addition, the size of the Button is changed by setting its WidthRequest and HeightRequest properties.
If the application is still running, save the changes to the file and the application user interface will automatically be updated in your simulator or emulator. Otherwise, in the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS simulator or Android emulator. Observe that the Button appearance has changed:

In Visual Studio for Mac, stop the application.

For more information about setting Button appearance, see Button appearance in the Xamarin.Forms Button guide.

Jaa

Xamarin.Forms Button Tutorial

Create a button

Handle clicks

Change appearance

Congratulations!

Next steps

Jaa

Xamarin.Forms Button Tutorial

Create a button

Handle clicks

Change appearance

Congratulations!

Next steps

Related links