Aprenda várias propriedades úteis para ajudá-lo a personalizar e aprimorar seus botões no .NET MAUI, como arredondar os cantos dos botões e ativar o dimensionamento automático.
Os botões são um dos elementos visuais mais importantes em qualquer aplicação. Por meio deles, os usuários podem realizar ações importantes que impulsionam o fluxo do aplicativo, como navegar para outra página ou chamar uma API. É por isso que é essencial compreender suas diferentes propriedades.
Existem várias propriedades interessantes que você talvez nem saiba que estão disponíveis para o Button no .NET MAUI, mas aprender sobre elas o ajudará a criar designs mais precisos e visualmente atraentes.
Neste artigo, você descobrirá seis dessas propriedades, entenderá como funcionam e verá como implementá-las. Mas antes de mergulhar em cada um deles, vamos dar uma rápida prévia do que está por vir. 🚀
- Transformação de texto
- FontAutoScalingEnabled
- Espaçamento entre caracteres
- Raio de Canto
- Família de fontes
- ModoQuebraLinha
1. Transformação de texto
Esta propriedade define como o texto dentro do seu botão será exibido – se ele aparece em letras maiúsculas, minúsculas ou exatamente como você o escreveu. Esta propriedade aceita os seguintes valores:
- Minúsculas: Exibe todo o texto em letras minúsculas.
- Maiúsculas: Exibe todo o texto em letras maiúsculas.
- Nenhum: Exibe o texto exatamente como você o escreveu.
Então… como podemos realmente usá-lo em um botão? Vamos conferir: 👇
<Button Text="cLICK heRe"
TextTransform="Lowercase" />
2. FontAutoScaling habilitado
Este é super importante! 😄 Ao acessar as configurações do dispositivo, você pode ajustar como deseja que o texto apareça: maior, menor ou qualquer valor intermediário. O sistema mostra uma lista de opções de tamanho para você escolher.
Com o FontAutoScalingEnabled propriedade, o .NET MAUI nos permite controlar se nosso aplicativo deve seguir as preferências de tamanho de texto que o usuário já definiu em seu dispositivo.
Por exemplo, você provavelmente já viu pessoas que possuem um texto de sistema muito grande. 📱 Se esta opção estiver habilitada, seus aplicativos .NET MAUI também se adaptarão e exibirão texto da mesma maneira.
Esta propriedade permite que você decida se deseja ativar ou desativar esse comportamento no seu botão:
- Se definido para verdadeiroo texto do botão se ajusta às preferências de escala de fonte do dispositivo.
- Se definido para falsoo texto permanece fixo, ignorando completamente a configuração do sistema.
Tudo bem, vamos ver isso em ação!
<Button Text="Hello!! "
FontAutoScalingEnabled="false" />
Mas… Como configuro as preferências no meu dispositivo? 🛠️
Para testar essas configurações em seu próprio dispositivo, veja como você pode aumentar ou diminuir o texto no iOS e no Android.
- 📱 No iOS: Vá para Configurações → Acessibilidade → Exibição e tamanho do texto → Texto maior e ajuste o controle deslizante para definir o tamanho do texto de sua preferência.
- No Android: Vá para Configurações → Mostrar → Tamanho e estilo da fonte e use o controle deslizante de visualização para ajustar o tamanho do texto.
Após seguir os passos acima, você deverá ver uma tela semelhante à mostrada abaixo:
3. Espaçamento entre caracteres
Define a quantidade de espaço entre cada caractere do texto do botão e assume um valor do tipo double. Esta propriedade nos permite brincar com o ritmo visual do botão. Você pode aumentar ou diminuir o espaçamento entre caracteres dependendo do estilo que você deseja alcançar:
- Se quiser aumentar o espaçamento, use um valor positivo.
- Se quiser criar um design ou efeito estilístico reduzindo o espaçamento, você pode usar valores negativos.
Vamos dar vida a isso dentro de um botão!
<Button
Text="CLICK HERE"
CharacterSpacing="5" />
4. Raio de Canto
Esta propriedade permite definir o quão arredondados serão os cantos do seu botão. (Leva um valor do tipo int.) Quanto maior o valor, mais arredondados os cantos aparecerão, e quanto menor o valor, mais nítidos eles ficarão.
💡 Dica profissional: Se você deseja criar um botão circular, basta definir o Solicitação de largura e Solicitação de Altura propriedades com o mesmo valor e atribua o Raio de Canto imóvel pela metade desse valor.
Por exemplo:
<Button
WidthRequest="80"
HeightRequest="80"
CornerRadius="40" />
5. Família de fontes
Com esta propriedade, você pode definir a fonte que seu botão usará, o que ajuda seu botão a manter uma identidade visual consistente com o estilo geral do seu aplicativo. Por padrão, ele usa Aberto sem.
Como usar?
<Button
Text="Click here"
FontFamily="MontserratBold" />
6. ModoQuebraLinha
Esta propriedade é responsável por organizar como o texto será exibido no botão quando ele ocupar mais de uma linha. Leva valores do LineBreakMode enumeração; dependendo do valor que você escolher, seu texto será exibido de diferentes maneiras. Os valores que você pode usar são os seguintes:
➖ Sem Envoltório: Independentemente do comprimento do texto, ele permanece em uma única linha e exibe apenas o número de caracteres que cabem na largura do botão.
➖ WordWrap: Move automaticamente o texto para a próxima linha assim que atingir os limites do botão. Lembre-se de que a quebra de linha ocorre após a última palavra completa que cabe; se uma palavra não couber completamente, ela será movida para a próxima linha.
➖ Envoltório de personagem: Move automaticamente o texto para a próxima linha. Isso pode fazer com que uma palavra seja dividida se houver espaço suficiente apenas para alguns caracteres. Por exemplo, se a palavra “Olá” só tiver espaço para as duas primeiras letras, ela irá quebrar e colocar as letras restantes na próxima linha.
➖ Cabeça Truncamento: Exibe o texto em uma única linha e mostra apenas a parte final do texto.
➖ Truncamento Médio: Exibe o início e o fim do texto, separados por reticências (…), tudo em uma única linha.
➖ Truncamento de cauda: Exibe apenas o início do texto e oculta o restante.
Vamos usar um exemplo visual para entender melhor como cada um se comporta:
Vamos dar vida a isso com um exemplo de botão!
<Button Text="Hello!! "
LineBreakMode="TailTruncation" />
✍️ Informações sobre bônus
Há também outra propriedade chamada ContentLayoutque permite controlar a posição dos ícones nos botões. Se você quiser aprender como usá-lo, recomendo conferir o artigo Além do básico: fácil posicionamento de ícones nos botões .NET MAUI.
Conclusão
E é isso! 🎉 Agora você conhece várias propriedades úteis que podem ajudá-lo a personalizar e aprimorar seus botões no .NET MAUI – desde TextTransform e CharacterSpacing para arredondar seus botões e permitir o dimensionamento automático.
Espero que este guia ajude você a descobrir novas maneiras de tornar seus botões mais dinâmicos e visualmente consistentes em seus aplicativos.
Se você tiver alguma dúvida ou quiser que eu me aprofunde em outros controles ou propriedades, fique à vontade para deixar um comentário – eu adoraria ajudá-lo! 💚
Vejo você no próximo artigo! 🙋♀️✨
Referências
A explicação foi baseada na documentação oficial:
