Xamarin.Forms: Diferentes Views numa mesma tela só com C#

Olá pessoal! Tudo bem? Depois de vários artigos sobre o Xamarin.Forms, com destaque ao início da montagem de uma interface de verdade usando StackLayouts, vamos agora começar a criar uma aplicação de verdade, com diferentes Views na mesma Page e fazendo com que elas interajam umas com as outras.

Neste exemplo, estou montando uma interface bem simples com três Views – um Button, uma Entry e um Label (na dúvida, leia os artigos sobre Views do Xamarin.Forms). Aqui estou usando apenas código C# para a montagem, sem usar Xaml. O objeto é fazer com que o texto digitado na Entry apareça no Label quando o Button for clicado.

De forma simples, dentro da MainPage (a Page que estou montando), eu devo declarar as Views como propriedades privadas. Apenas o get das propriedades é declarado porque as Views já serão instanciadas no construtor da View.

private Button Botao { get; }
private Entry CaixaDeTexto { get; }
private Label Texto { get; }

Dentro do construtor da MainPage, como dito anteriormente, vamos instanciar as três Views. Note que já estamos configurando o texto (Text) que será exibido no botão e no Label, e o tamanho que a caixa de texto ocupará (veja em HorizontalOptions).

Note também que já que estamos configurando a ação que o botão fará quando for clicado, através do evento Clicked. Apenas por curiosidade, a função foi escrita na forma de uma expressão lambda. O botão basicamente verifica se tem algum conteúdo na CaixaDeTexto. Se tiver, este texto será copiado para o Label (propriedade Text). Caso contrário, a propriedade Text do Texto receberá um alerta pré-definido

public MainPage()
{
    Botao = new Button { Text = "Clique aqui! "};
    CaixaDeTexto = new Entry
    {
        HorizontalOptions = LayoutOptions.FillAndExpand
    };
    Texto = new Label { Text = "Texto exemplo" };
    Botao.Clicked += (sender, args) =>
    {
        Texto.Text = string.IsNullOrEmpty(CaixaDeTexto.Text)
                    ? "Você precisa digitar um texto!"
                    : CaixaDeTexto.Text;
    };
}

Também dentro do construtor, precisamos criar um layout (neste caso, um StackLayout, é o mais simples) e colocá-las como Children do Layout. É apenas o layout que será adicionado como Content da MainPage. Veja o código (e veja que a configuração de layout do StackLayout fará com que todos os elementos sejam centralizados na tela):

Content = new StackLayout
{
    VerticalOptions = LayoutOptions.Center,
    Children = {
        Texto,
        Botao,
        CaixaDeTexto
    }
};

Este é o código completo da MainPage… note que quase toda a programação fica no construtor:

public class MainPage : ContentPage
{
    private Button Botao { get; }
    private Entry CaixaDeTexto { get; }
    private Label Texto { get; }

    public MainPage()
    {
        Botao = new Button { Text = "Clique aqui! "};
        CaixaDeTexto = new Entry { HorizontalOptions = LayoutOptions.Fill };
        Texto = new Label { Text = "Texto exemplo" };
        Botao.Clicked += (sender, args) =>
        {
            Texto.Text = string.IsNullOrEmpty(CaixaDeTexto.Text)
                    ? "Você precisa digitar um texto!"
                    : CaixaDeTexto.Text;
        };
        Content = new StackLayout
        {
            VerticalOptions = LayoutOptions.Center,
            Children = {
                Texto,
                Botao,
                CaixaDeTexto
            }
        };
    }
}

Quando o programa foi executado no emulador do Android, esta é a tela inicial, com tudo centralizado, como esperado.

Se o botão é clicado sem nenhum texto na caixa de texto, a mensagem pré-definida aparece no Label.

E se há algum texto na caixa de texto, é este que será exibido.

Este é o exemplo mais básico de interatividade entre Views no Xamarin.Forms, usando apenas código C#. Fique à vontade para baixar o código fonte deste artigo para estudos. Até a próxima!

[]’s
Paulo Roberto