Xamarin.Forms Tutorial de botão

Artigo
Developer (Iniciante)
7 minutos para concluir

Antes de tentar realizar este tutorial, você deve ter concluído com sucesso:

Crie seu primeiro Xamarin.Forms início rápido de aplicativo .
Tutorial de StackLayout.

Neste tutorial, você aprenderá a:

Crie um Xamarin.FormsButton em XAML.
Responder ao Button que está sendo tocado.
Alterar a aparência do Button.

Você usará o Visual Studio 2019 ou Visual Studio para Mac, para criar um aplicativo simples que demonstra como personalizar um Button. Estas capturas de tela mostram o aplicativo final:

Você também usará Recarga Dinâmica XAML para Xamarin.Forms ver as alterações da interface do usuário sem recompilar seu aplicativo.

Criar um botão

6 minutos restantes

Visual Studio
Visual Studio para Mac

Para concluir este tutorial, você precisará ter o Visual Studio 2019 (versão mais recente) com a carga de trabalho Desenvolvimento mobile com .NET instalada. Além disso, você precisará de um Mac emparelhado para compilar o aplicativo do tutorial no iOS. Para obter informações sobre como instalar a plataforma Xamarin, confira Instalando o Xamarin. Para obter informações sobre como conectar o Visual Studio 2019 a um host de build Mac, confira Emparelhar com o Mac para desenvolvimento no Xamarin.iOS.

Inicie o Visual Studio e crie um novo aplicativo em branco Xamarin.Forms chamado ButtonTutorial.

Importante

Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada ButtonTutorial. Usar um nome diferente causará erros de build ao copiar o código deste tutorial para a solução.

Para obter mais informações sobre a biblioteca .NET Standard que é criada, consulte Anatomia de um Xamarin.Forms aplicativo no Aprofundamento do Xamarin.Forms Início Rápido.
No Gerenciador de Soluções, no projeto ButtonTutorial, clique duas vezes em MainPage.xaml para abri-lo. Em seguida, em MainPage.xaml, remova todo o código do modelo e substitua-o pelo código a seguir:
```
<?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>
```
Esse código define declarativamente a interface do usuário para a página, que é composta por um Button em um StackLayout. A propriedade Button.Text especifica o texto exibido no Button.
Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com um botão Reproduzir) para iniciar o aplicativo dentro do simulador remoto de iOS ou do Android Emulator escolhido:

Observe que, por padrão, um Button tende a ocupar todo o espaço permitido – neste caso, a largura total de seu elemento pai (StackLayout).

Interrompa o aplicativo no Visual Studio.

Para concluir este tutorial, você precisará ter o Visual Studio para Mac (versão mais recente), com suporte para plataforma iOS e Android, instalado. Além disso, você também precisará do Xcode (versão mais recente). Para obter mais informações sobre como instalar a plataforma Xamarin, confira Instalando o Xamarin.

Inicie o Visual Studio para Mac e crie um novo aplicativo em branco Xamarin.Forms chamado ButtonTutorial.

Importante

Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada ButtonTutorial. Usar um nome diferente causará erros de build ao copiar o código deste tutorial para a solução.

Para obter mais informações sobre a biblioteca .NET Standard que é criada, consulte Anatomia de um Xamarin.Forms aplicativo no Aprofundamento do Xamarin.Forms Início Rápido.
No Painel de Soluções, no projeto ButtonTutorial, clique duas vezes em MainPage.xaml para abri-lo. Em seguida, em MainPage.xaml, remova todo o código do modelo e substitua-o pelo código a seguir:
```
<?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>
```
Esse código define declarativamente a interface do usuário para a página, que é composta por um Button em um StackLayout. A propriedade Button.Text especifica o texto exibido no Button.
Na barra de ferramentas do Visual Studio para Mac, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo dentro do simulador de iOS ou do Android Emulator escolhido:

Observe que, por padrão, um Button tende a ocupar todo o espaço permitido – neste caso, a largura total de seu elemento pai (StackLayout).

Interrompa o aplicativo no Visual Studio para Mac.

Lidar com cliques

4 minutos restantes

Visual Studio
Visual Studio para Mac

Em MainPage.xaml, modifique a declaração Button de modo que ela defina um manipulador para o evento Clicked:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Este código define o evento Clicked como um manipulador de eventos chamado OnButtonClicked que será criado na próxima etapa.
No Gerenciador de Soluções, no projeto ButtonTutorial, expanda MainPage.xaml e clique duas vezes em MainPage.xaml.cs para abri-lo. Em seguida, em MainPage.xaml.cs, adicione o manipulador de eventos OnButtonClicked à classe:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
Quando o Button é tocado, o método OnButtonClicked é executado. O argumento sender é o objeto Button responsável por acionar o evento Clicked e pode ser usado para acessar o objeto Button. Esse manipulador de eventos atualiza o texto exibido pelo Button.

Observação

Além de evento Clicked, Button também define eventos Pressed e Released. Para obter mais informações, consulte Pressionando e soltando o botão no Xamarin.Forms painel de botões .
Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo dentro de seu simulador remoto de iOS ou do Android Emulator escolhido. Clique no Button e observe que o texto que ele exibe é alterado:

Para obter mais informações sobre como lidar com cliques de botão, consulte Manipulação de cliques de botão no guia de Xamarin.Forms botões .

Em MainPage.xaml, modifique a declaração Button de modo que ela defina um manipulador para o evento Clicked:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Este código define o evento Clicked como um manipulador de eventos chamado OnButtonClicked que será criado na próxima etapa.
No Painel de Soluções, no projeto ButtonTutorial, expanda MainPage.xaml e clique duas vezes em MainPage.xaml.cs para abri-lo. Em seguida, em MainPage.xaml.cs, adicione o manipulador de eventos OnButtonClicked à classe:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
Quando o Button é tocado, o método OnButtonClicked é executado. O argumento sender é o objeto Button responsável por acionar o evento Clicked e pode ser usado para acessar o objeto Button. Esse manipulador de eventos atualiza o texto exibido pelo Button.

Observação

Além de evento Clicked, Button também define eventos Pressed e Released. Para obter mais informações, consulte Pressionando e soltando o botão no Xamarin.Forms painel de botões .
Na barra de ferramentas do Visual Studio para Mac, pressione o botão Iniciar (o botão triangular que se parece com um botão Reproduzir) para iniciar o aplicativo dentro do simulador de iOS ou do Android Emulator escolhido. Clique no Button e observe que o texto que ele exibe é alterado:

Para obter mais informações sobre como lidar com cliques de botão, consulte Manipulação de cliques de botão no guia de Xamarin.Forms botões .

Alterar a aparência

2 minutos restantes

Visual Studio
Visual Studio para Mac

Em MainPage.xaml, modifique a declaração Button para alterar sua aparência visual:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Esse código define propriedades que alteram a aparência visual do Button. A propriedade TextColor define a cor do texto Button e a propriedade BackgroundColor define a cor do segundo plano para o texto. A propriedade BorderColor define a cor de uma área ao redor do Button e a propriedade BorderWidth define a largura da borda. Por padrão, o Button é retangular, mas pode receber cantos arredondados configurando a propriedade CornerRadius para um valor apropriado. Além disso, o tamanho do Button é alterado configurando sua propriedades WidthRequest e HeightRequest.
Caso o aplicativo ainda esteja em execução, salve as alterações no arquivo. Dessa maneira, a interface do usuário do aplicativo será atualizada de modo automático em seu simulador ou emulador. Caso contrário, na barra de ferramentas do Visual Studio, clique no botão Iniciar (um botão triangular semelhante ao botão Reproduzir) para executar a inicialização do aplicativo dentro do simulador remoto de iOS ou do Android Emulator de sua preferência. Observe que a aparência de Button mudou:

Interrompa o aplicativo no Visual Studio.

Para obter mais informações sobre como definir Button a aparência, consulte Aparência do botão no guia BotãoXamarin.Forms.

Em MainPage.xaml, modifique a declaração Button para alterar sua aparência visual:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Esse código define propriedades que alteram a aparência visual do Button. A propriedade TextColor define a cor do texto Button e a propriedade BackgroundColor define a cor do segundo plano para o texto. A propriedade BorderColor define a cor de uma área ao redor do Button e a propriedade BorderWidth define a largura da borda. Por padrão, o Button é retangular, mas pode receber cantos arredondados configurando a propriedade CornerRadius para um valor apropriado. Além disso, o tamanho do Button é alterado configurando sua propriedades WidthRequest e HeightRequest.
Caso o aplicativo ainda esteja em execução, salve as alterações no arquivo. Dessa maneira, a interface do usuário do aplicativo será atualizada de modo automático em seu simulador ou emulador. Caso contrário, na barra de ferramentas do Visual Studio para Mac, clique no botão Iniciar (um botão triangular semelhante ao botão Reproduzir) para executar a inicialização do aplicativo dentro do simulador de iOS ou do Android Emulator de sua preferência. Observe que a aparência de Button mudou:

Interrompa o aplicativo no Visual Studio para Mac.

Para obter mais informações sobre como definir Button a aparência, consulte Aparência do botão no guia BotãoXamarin.Forms.

Compartilhar via

Xamarin.Forms Tutorial de botão

Criar um botão

Lidar com cliques

Alterar a aparência

Parabéns!

Próximas etapas

Compartilhar via

Xamarin.Forms Tutorial de botão

Criar um botão

Lidar com cliques

Alterar a aparência

Parabéns!

Próximas etapas

Links relacionados