Descubre unos interesantes trucos para usar los elementos Label de forma mas eficiente y divertida.
- Label con salto de línea
- Fondos con colores personalizados
- Añade emoticonos en los textos
- Formatos de cadena StringFormat
1- Label con salto de línea:
En código ajeno, en foros e incluso en otros tutoriales y webs me he encontrado que los programadores utilizan multiples labels (etiquetas) para reproducir un salto de linea en lugar de usar el código correspondiente.
|
1 2 3 4 |
<StackLayout Orientation="Vertical" HorizontalOptions="Center"> <Label Text="Linea de texto 1" /> <Label Text="Linea de texto 2" /> </StackLayout> |
Una forma más correcta y eficiente de conseguir esto sería usando el salto de linea . De esta forma, un código más sencillo y liviano nos proporciona el mismo resultado:
|
1 |
<Label Text="Linea de texto 1 Linea de texto 2" HorizontalTextAlignment="Center" /> |
2- Fondos con colores personalizados
Muchas veces necesitamos crear colores personalizados para nuestras aplicaciones. Por ejemplo, algo típico puede ser crear un efecto de transparencia sobre una vista sin poder usar uno de los colores predefinidos para conseguir el resultado deseado.
Para conseguirlo solo tenemos que crear un nuevo color mediante código c# para añadirlo a nuestra vista usaremos la siguiente linea. Cada valor en el constructor Color representan (mátiz, saturación, luminosidad, opacidad).
|
1 |
myLabel.BackgroundColor = new Color( 0,0,0,0.3); |
Pero si queremos hacer usando el código XAML, solo tenemos que añadir el color y pasar los parametros usando x:Arguments y especificar el tipo de metodo para crear el color (FromRGB, FromHex, FromHsla).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<Label Text="Linea de texto 1 Linea de texto 2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="White"> <Label.BackgroundColor> <Color x:FactoryMethod="FromHsla"> <x:Arguments> <x:Double>0</x:Double> <x:Double>0</x:Double> <x:Double>0</x:Double> <x:Double>0.3</x:Double> </x:Arguments> </Color> </Label.BackgroundColor> </Label> |
Podemos crear estos colores de forma global con solo añadir el código en el archivo App.xaml especificando una claro para usarlo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<Application.Resources> <ResourceDictionary> <Color x:FactoryMethod="FromHsla" x:Key="OverlayColor"> <x:Arguments> <x:Double>0</x:Double> <x:Double>0</x:Double> <x:Double>0</x:Double> <x:Double>0.3</x:Double> </x:Arguments> </Color> </ResourceDictionary> </Application.Resources> |
Y la etiqueta quedaría de la siguiente manera:
|
1 2 3 4 5 |
<Label Text="Linea de texto 1 Linea de texto 2" HorizontalTextAligment="Center" VerticalTextAligment="Center" TextColor="White" BacgroundColor="{StaticResource OverlayColor}" /> |
3- Añade emoticonos en los textos
Los emoticonos de bloque Unicode que contienen graficos que representan caras, los que habitualmente esta asociados con los clasicos emoticonos de representacion mediante marcas de puntuación como 🙂
Si necesitamos usar estos Emoticonos para hacer mas divertida nuestra aplicación. Solo tenemos que incluir el codigo del emoticono en el texto de la etiqueta. Por ejemplo:
|
1 |
<Label Text="Poder Xamarin 🙅 " /> |
Podeis consultar la lista de estos emoticonos y sus etiquetas correspondientes en: http://www.charbase.com/block/emoticons.
4- Formatos de cadena (StringFormat)
Son muy utiles cuando queremos cambiar el formato de la cadena de texto que queremos mostrar por pantalla de nuestro valor enlazado.
Por ejemplo partiendo del ViewModel llamado Titulo, en la página Xaml quiero mostrar esa propiedad más el texto «favoritos». En lugar de usar dos Labels con orientacion horizontal lo puedo hacer usando la propierdad StringFormat
|
1 2 3 4 |
public class MainPageViewModel { public string Titulo {get; set;} = "Spiderman"; } |
|
1 |
<Label Text="{Binding Titulo, StringFormat='{o} favoritos' HorizontalOptions="Center" /> |
Sin embargo además de esta aplicación también se puede usar para dar formato a fechas, horas y números.
|
1 2 3 |
<Label Text="{Binding Fecha, StringFormat='{0:MM dd, yyyy}'}" /> <Label Text="{Binding Hora, StringFormat='{0:hh\\:mm}'}" /> <Label Text="{Binding Id, StringFormat='{0:N}'}" /> |