Xamarin Forms -  Usando Picker com MVVM  
 Este artigo mostra como usar a view Picker usando uma abordagem MVVM e fazendo a vinculação com dados estáticos.

A view Picker permite selecionar um elemento de uma lista de opções e eu já publiquei dois artigos sobre esta view. Confira:

  1. Xamarin Forms - Usando a view Picker - Macoratti

  2. Xamarin Android - Usando um Bindable Picker - Macoratti

Se você não conhece o básico sobre a View Picker leia os artigos acima antes de prosseguir.

Recursos usados:

Criando o projeto Xamarin Forms

Abra o  VS 2017 Community e clique em New Project e a seguir escolha Cross Platform -> Mobile App (Xamarin.Forms) e informe o nome XF_PickerMVVM;

A seguir selecione a Plataforma (eu marquei somente Android) e escolha a estratégia de compartilhamento que será .NET Standard.

Clique no botão OK.

Pronto, nosso projeto já esta criado. ( Atualmente(01/2019) a versão mais atual estável é a 3.5.0.16)

Aqui aceitamos a definição padrão que indica a página MainPage como a página que vai iniciar a nossa aplicação.

Definindo o modelo de domínio

Vamos definir um modelo de domínio criando uma pasta Model no projeto compartilhado e a seguir criando uma classe Passaro onde vamos definir propriedades que iremos usar em nosso projeto.

A seguir temos o código da classe Passaro:

namespace XF_PickerMVVM.Model
{
    public class Passaro
    {
        public string Nome { get; set; }
        public string Localizacao { get; set; }
        public string Detalhes { get; set; }
        public string ImagemUrl { get; set; }
    }
}

Agora vamos criar a classe PassaroData na mesma pasta onde vamos definir algumas informações que vamos vincular com os controles da MainPage em nosso projeto Xamarin Forms.

using System.Collections.Generic;

namespace XF_PickerMVVM.Model
{
    public class PassaroData
    {
        public static IList<Passaro> Passaros { get; private set; }
        static PassaroData()
        {
            Passaros = new List<Passaro>();
            Passaros.Add(new Passaro
            {
                Nome = "Beija-flor-preto",
                Localizacao = "Brasil",
                Detalhes = "O beija-flor-preto (Florisuga fusca) é um belíssimo beija-flor que pode ser encontrado da Paraíba ao Rio Grande do Sul. Os indivíduos jovens apresentam a plumagem manchada de pardo ",
                ImagemUrl = "http://www.macoratti.net/Imagens/passaros/beija-flor.jpg"
            });
            Passaros.Add(new Passaro
            {
                Nome = "Bem-te-vi",
                Localizacao = "Brasil",
                Detalhes = "Provavelmente uma das aves mais conhecidas em todo o Brasil. Chama a atenção pelo colorido das penas e também pelo comportamento. É audacioso, tem pouco medo das pessoas e seu canto é alto e inconfundível: bem-te-vi! ",
                ImagemUrl = "http://www.macoratti.net/Imagens/passaros/bem-te-vi.jpg"
            });
            Passaros.Add(new Passaro
            {
                Nome = "Anu-preto",
                Localizacao = "Brasil",
                Detalhes = "Muito sociável, o anu-preto é sempre visto em bandos. De dieta insetívora (embora não dispense frutinhos e até mesmo pequenos vertebrados, como lagartixas), o anu-preto acompanha o gado, como faz a garça-vaqueira.",
                ImagemUrl = "http://www.macoratti.net/Imagens/passaros/anu.jpg"
            });
            Passaros.Add(new Passaro
            {
                Nome = "Canário-da-terra",
                Localizacao = "Brasil",
                Detalhes = "O canário-da-terra é uma ave bastante conhecida pelos brasileiros. É a espécie com mais registros fotográficos no Wikiaves (veja os dados de 2013 aqui), deixando o sanhaço-cinzento em segundo lugar. ",
                ImagemUrl = "http://www.macoratti.net/Imagens/passaros/canario.jpg"
            });
            Passaros.Add(new Passaro
            {
                Nome = "Pardal",
                Localizacao = "Brasil",
                Detalhes = "O pardal (Passer domesticus) é um pássaro muito comum nas cidades de todo o mundo. No Brasil é uma espécie exótica, pois foi introduzida pelo homem, sendo originária da Europa.",
                ImagemUrl = "http://www.macoratti.net/Imagens/passaros/pardal.jpg"
            });
        }
    }
}

Definimos alguns dados estáticos e criamos uma lista de objetos Passaro estática que iremos vincular ao nosso BindingContext para exibir na view.

Definindo o ViewModel

Vamos criar uma pasta ViewModel no projeto compartilhado e nesta pasta criar a nossa ViewModel - PassaroViewModel -  onde vamos definir a propriedade para a lista de objetos Passaro que vamos exibir e uma propriedade para o objeto selecionado que vai permitir exibir os detalhes de cada pássaro.

Assim para deixar o código mais legível vamos criar duas viewmodels:

  1. BaseViewModel - É classe base que implementa INotifyPropertyChanged;
  2. PassaroViewModel - A classe que herda de BaseViewModel e define as propriedades da View;

1- Código da BaseViewModel

using System.ComponentModel;
using System.Runtime.CompilerServices;
namespace XF_PickerMVVM.ViewModel
{
    public class BaseViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

2- Código de PassaroViewModel

using System.Collections.Generic;
using XF_PickerMVVM.Model;
namespace XF_PickerMVVM.ViewModel
{
    public class PassaroViewModel : BaseViewModel
	{
        public IList<Passaro> Passaros { get { return PassaroData.Passaros; } }
        Passaro selectedPassaro;
        public Passaro SelectedPassaro
        {
            get { return selectedPassaro; }
            set
            {
                if (SelectedPassaro != value)
                {
                    selectedPassaro = value;
                    OnPropertyChanged();
                }
            }
        }
    }
}

Note que a propriedade Passaros retorna os dados estáticos definidos em PassaroData.Passaros, e que usamos OnPropertyChanged() herdado de BaseViewModel.

Definindo o View

A seguir inclua o código no arquivo MainPage.xaml conforme abaixo para exibir o item selecionado:

<?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:local="clr-namespace:XF_PickerMVVM"
             x:Class="XF_PickerMVVM.MainPage">

    <ScrollView>
        <StackLayout Margin="20">
            <Label Text="Lista de Pássaros" FontAttributes="Bold" HorizontalOptions="Center" />           

            <Picker Title="Selecione um pássaro"
                    ItemsSource="{Binding Passaros}"
                    ItemDisplayBinding="{Binding Nome}"
                    SelectedItem="{Binding SelectedPassaro}" />

            <Label Text="{Binding SelectedPassaro.Nome}" HorizontalOptions="Center"
                              Style="{DynamicResource TitleStyle}" />

            <Label Text="{Binding SelectedPassaro.Localizacao}" FontAttributes="Italic"
                                HorizontalOptions="Center" />

            <Image Source="{Binding SelectedPassaro.ImagemUrl}"
                   HeightRequest="200" WidthRequest="400"
                   HorizontalOptions="CenterAndExpand" />

            <Label Text="{Binding SelectedPassaro.Detalhes}" Style="{DynamicResource BodyStyle}" />
        </StackLayout>
    </ScrollView>

</ContentPage>

Observe que na view MainPage estamos usando os estilos dinâmicos, conhecidos como estilos de dispositivo, na classe Device.Styles.

Temos disponíveis os seguintes estilos :

Lebrando que estes estilos só podem ser aplicados a instãncias da view Label.

Agora é só alegria...

Executando o projeto iremos obter:

Pegue o projeto completo aqui :   XF_PickerMVVM.zip (sem as referências)

Bem-aventurados os limpos de coração, porque eles verão a Deus;
Bem-aventurados os pacificadores, porque eles serão chamados filhos de Deus;
Mateus 5:8,9

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