Xamarin Forms -  Usando um botão Flutuante - I
 Neste artigo veremos como criar um Floating Action Button ou botão flutuante no Xamarin Forms.

Um Floating Action Button (FAB) ou botão flutuante é um tipo de controle que é usado tanto no Android como no iOS.

O FAB é aquele botão que parece flutuar sobre a interface e fica em geral no canto inferior direito da tela.

Podemos usar o FAB em aplicações Xamarin Forms de duas formas:

  1. Usando uma biblioteca Nuget ( FAB.Forms -Version 2.1.1 )
  2. Criar o FAB usando os recursos do Xamarin (ImageButton, Gridlayout, etc.)

Na primeira opção, o pacote FAB.Forms esta apresentando uma incompatibilidade com o .NET Standard 2.0. Por esse motivo quando o problema for resolvido voltaremos a ela.

Assim vou mostrar como criar um FAB via código.

Recursos usados:

Criando um FAB via código

Abra o  VS 2019 Community e clique em Create New Project e a seguir escolha:

Clique em Next e informe o nome XF_FloatButton;

A seguir clique no botão Create :

A seguir selecione o template Blank e a plataforma Android e clique no botão OK:

Pronto, nosso projeto já esta criado.

No projeto Android na pasta Resource/drawable vamos incluir 5 imagens que iremos usar no projeto:

Definindo o código do projeto

Agora abra a página MainPage.xaml e altere o código existente 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"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="XF_FloatButton.MainPage">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <ScrollView Grid.Row="0">
            <StackLayout>
                <StackLayout HeightRequest="250" BackgroundColor="AliceBlue" Padding="10">
                    <Image Source="paisagem1.jpg"/>
                </StackLayout>
                <StackLayout HeightRequest="250" BackgroundColor="DarkGray" Padding="10">
                    <Image Source="paisagem2.jpg"/>
                </StackLayout>
                <StackLayout HeightRequest="250" BackgroundColor="Beige" Padding="10">
                    <Image Source="paisagem3.jpg"/>
                </StackLayout>
                <StackLayout HeightRequest="250" BackgroundColor="LightSeaGreen" Padding="10">
                    <Image Source="paisagem4.jpg"/>
                </StackLayout>
                <StackLayout HeightRequest="250" BackgroundColor="LightCoral" Padding="10">
                    <Image Source="paisagem5.jpg"/>
                </StackLayout>
            </StackLayout>
        </ScrollView>

        <Button Grid.Row="0" Text="Incluir Imagem" BorderColor="#2b3c3c" BorderWidth="1"
                FontAttributes="Bold" BackgroundColor="DarkGoldenrod" BorderRadius="35"
                TextColor="White" HorizontalOptions="End" WidthRequest="160" HeightRequest="60"
                Margin="0,0,20,22" VerticalOptions="End" x:Name="btnIncluirImagem"        
                 Clicked="BtnIncluirImagem_Clicked"/>

    </Grid>

</ContentPage>

Aqui estamos usando o layout Grid para definir o botão que simula o FAB na página em um ScrollView que exibe as imagens.

Abra o arquivo MainPage.xaml.cs e inclua o código abaixo em azul:

using System.ComponentModel;
using Xamarin.Forms;
namespace XF_Shell2
{
    [DesignTimeVisible(false)]
    public partial class MainPage : Shell
    {
        public MainPage()
        {
            InitializeComponent();
        }
        private void BtnIncluirImagem_Clicked(object sender, EventArgs e)
        {
            DisplayAlert("Nova Imagem", "Uma nova imagem foi incluida", "OK");
        }
    }
}

Não precisamos fazer mais nada...

Executando o projeto iremos obter o seguinte resultado:

Pegue o código do projeto compartilhado aqui : XF_FloatButton.zip (sem as referências)

Na próxima parte do artigo veremos outra maneira de criar um FAB no Xamarin Forms.

"Bom é louvar ao SENHOR, e cantar louvores ao teu nome, ó Altíssimo;
Para de manhã anunciar a tua benignidade, e todas as noites a tua fidelidade;"
Salmos 92:1,2

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti