Xamarin.Forms Tutorial de botão

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.

1. 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.

2. 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.

3. 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.

1. 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.

2. 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.

3. 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.

1. 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.

2. 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 .

3. 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 .

1. 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.

2. 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 .

3. 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 .

1. 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.

2. 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.

1. 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.

2. 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.