Xamarin Forms — Adicionando Placeholder ao controle Editor — Android e iOS

Milton Câmara
Aug 9, 2017 · 2 min read

Neste breve tutorial iremos aprender como aplicar o efeito “Marca d’água” no controle Editor.

Para iniciar o nosso tutorial, iremos criar um controle customizado herdando do Entry, aquele famoso Editor que já conhecemos (imagem abaixo).

EntryPlaceholder.cs

O próximo passo agora é criar as classes que irão sobrescrever a renderização padrão dos controles em cada plataforma, em nosso caso iOS e Android.

iOS — EntryPlaceholderRenderer.cs

Como vocês podem observar na classe acima, sobrescrevemos o controle Editor atribuindo então o valor definido no Placeholder ao Text do controle Editor do iOS, a sacada neste caso (já que não temos essa propriedade nativa), é definir então a cor do texto do controle para umm cinza claro, aparentando então uma Marca D’água ou Placeholder.

Para remover o texto quando focamos o cursor dentro do controle, registramos um evento chamado ShouldBeginEditing, quando o evento for disparado, alteramos a cor do texto para preto (formato normal) e limpamos então o valor do editor, para o processo contrário registramos o evento ShouldEndEditing, verificamos se não existe conteúdo dentro do controle, caso positivo atribuímos o texto original do Placeholder.

Android — EditorPlaceholderRenderer.cs

Para os devices Android é muito simples aplicar o efeito pois o mesmo possui uma propriedade nativa para isto, chamada Hint, neste caso é necessário atribuir o valor do Placeholder à propriedade Hint e já temos nossa Marca D’água aplicada!

Abaixo segue o XAML para exemplificar a chamada do controle nas telas necessárias.

EditorPlaceholder.xaml

Quando adotamos o Xamarin Forms em nossos projetos, as interfaces do usuário são renderizadas utilizando os controles nativos de cada plataforma mantendo então uma aparência adequada em cada device / plataforma. Os Custom Renderers nos dão mais poder permitindo personalizar o estilo e comportamento em cada plataforma específica.

O tutorial é bem simples, mas pode ser muito útil naquela hora que mais precisamos! :-)

Se tiverem alguma dúvida, deixe o seu comentário abaixo. :-)

Link do Projeto

Referências

Milton Câmara

Written by

Microsoft MVP, MCP & MCSA, Community Leader & Speaker, Cloud & DevOps Consultant.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade