Charla mejorando nuestras habilidades de UI en Xamarin Forms. Microsoft 365 live jueves 16 2020.

2. PATROCINADORES
Comprometidos con una visión de
desarrollo social e integral que
generando un alto impacto el acceso al
conocimiento y favorezca la apropiación
social del mismo, las siguientes empresas
hacen posible la existencia de este gran
evento:

3. Muchas gracias
a nuestras amigas
comunidades.

4. Mejorando nuestras
habilidades de UI en Xamarin
Forms

5. MICROSOFT
365 LIVE
Leomaris Reyes
Ingeniera de software, Microsoft MVP
● Ingeniera de software
● Microsoft MVP
● Creadora y escritora del blog
de Xamarin AskXammy.com
● CEO & Founder de Stemelle.
● Xamarin Certified Mobile
Developer

6. Estaremos viendo diferentes tips para mejorar
nuestras habilidades de UI en Xamarin Forms! 😍
En estos Tips podremos ver mejores prácticas y
recursos de UI que nos harán la vida más fácil a la
hora de desarrollar nuestra aplicación.
AGENDA

7. ❌ Xamarin es solo para prototipos
❌ Sino tenemos presupuesto para
comprar controles de terceros no
podemos hacer un UIs bonitos.
❌ No podemos hacer diseños
agradables con Xamarin Forms.
Algunos mitos del diseño en Xamarin Forms

8. Buen uso de layouts: Utiliza solo los layouts necesarios1.
<StackLayout>
<Button BackgroundColor="DarkOrange" />
</StackLayout>
<StackLayout>
<Button BackgroundColor="DarkOrange" />
</StackLayout>
<StackLayout>
<Button BackgroundColor="DarkOrange" />
</StackLayout>
Escenario 😐 Escenario 😍
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto”/>
<RowDefinition Height="Auto”/>
<RowDefinition Height="Auto”/>
</Grid.RowDefinitions>
<Button Grid.Row="0" BackgroundColor="DarkOrange"/>
<Button Grid.Row="1" BackgroundColor="DarkOrange"/>
<Button Grid.Row="2" BackgroundColor="DarkOrange"/>
</Grid>
1
2
3
1

9. Distancia entre un elemento y sus elementos
adyacentes, se utiliza para controlar la posición de
del elemento y la de de sus vecinos.
________________________________________
<Button BackgroundColor="DarkOrange"
Margin="0,80,0,0" />
Margin ✔ Padding ✔
Distancia entre un elemento y sus elementos
secundarios, se usa para separar el espacio entre el
y su propio contenido.
________________________________________
<Button BackgroundColor="DarkOrange" Padding="0,80,0,0" />
Margin vs Padding: No los confundas please! 😔2.

10. Sin el uso de estilo tendremos que repetir las
mismas propiedades de cada elemento tantas
veces lo declaremos..
________________________________________
<Button Text ="Click aquí"
BackgroundColor ="DarkOrange"
Padding = "0,80,0,0"
TextColor ="White"
FontAttributes ="Bold" />
Sin estilos Usando estilo
Implementando estilos solo tenemos que agregar las
propiedades una vez y dicho estilo podrá ser llamado
desde los elementos que necesitemos!.
_____________________________________________
<Button Text="Click aqui"
Style="{StaticResource MainButtons}" />
_____________________________________________
<Style x:Key="MainButtons" TargetType="Button">
<Setter Property="BackgroundColor" Value="DarkOrange"/>
<Setter Property="Padding" Value="0,80,0,0"/>
<Setter Property="TextColor” Value="White" />
<Setter Property="FontAttributes" Value="Bold" />
</Style>
Utiliza estilos: Al utilizarlos tu código se mantiene más
limpio y organizado!
3.

11. <StackLayout>
<Button BackgroundColor="#FF8008" />
<Button BackgroundColor="#FF8008" />
<Button BackgroundColor="FF8008" />
</StackLayout>
Colores directos Colores agregados en el Application.Resource
Crea tu paleta de colores en el Application.Resource:
Así mantienes los colores de tu App centralizados!4.
<StackLayout>
<Button BackgroundColor="{StaticResource HeaderColor}" />
<Button BackgroundColor="{StaticResource HeaderColor}" />
<Button BackgroundColor="{StaticResource HeaderColor}" />
</StackLayout>
_____________________________________________
Application.Resource:
<Color x:Key="HeaderColor">#FF8008</Color>

12. Es de mucha ayuda poder replicar aplicaciones, ya que gracias a ellas vamos
desarrollando y reforzando habilidades de reproducción de UI, tanto en el análisis de los
componentes a utilizar como en el XAML.
________________________________________________________________________
Buscar aplicaciones que puedas replicar!5.

13. Antes de empezar, dividir en bloques nuestro diseño nos puede ayudar a tener una idea
más precisa de los puntos que tendremos que realizar el XAML así como también el orden
de prioridad que tendremos al desarrollarlos pudiéndose ahorrar tiempo a la hora de
escribir código.
________________________________________________________________________
Analiza el diseño y divide en bloques para que tengas
claro el flujo a desarrollar en XAML
6.

14. Prueba tus interfaces en diferentes dispositivos,
plataformas y orientaciones
7.

15. Colores directos Como buscar la imagen correcta en Android
Agrega las imágenes en sus dimensiones correctas8.

16. Sin ScrollView Con ScrollView ✔
No todos los dispositivos tienen la misma dimensión,
utiliza ScrollView, así el usuario no se queda con un
diseño a medias.
9.
❌
Pantalla 1 Pantalla 2
Con el ScrollView se visualizan:

17. Design time data para datos de pruebas: Así puedes
mostrar data de prueba sin que tu data real se vea afectada y
por tanto también tu tiempo de desarrollo.
10.

18. <StackLayout Orientation="Horizontal">
<Label Text="Bienvenid@s" FontSize="30" TextColor="Fuchsia" />
<Label Text="Welcome" FontSize="28" TextColor="Blue" />
<Label Text="Bienvenue" FontSize="20" />
</StackLayout>
Sin FormattedText Con FormattedText
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="Bienvenid@s" FontSize=30"
ForegroundColor="Fuchsia" />
<Span Text="Welcome" FontSize="28"
ForegroundColor="Blue" />
<Span Text="Bienvenue" FontSize="20" />
</FormattedString>
</Label.FormattedText>
</Label>
Utiliza FormattedText11.

19. <StackLayout Padding="0,0,20,0">
<ImageButton Source="{Binding Picture}"
HorizontalOptions="Start"
WidthRequest="40"
HeightRequest="40""/>
<Button Text="{Binding Quantity}"
TextColor="#4D4B4B"
CornerRadius="10" />
</StackLayout>
Sin BindableLayout Con BindableLayout
<StackLayout Orientation="Horizontal"
BindableLayout.ItemsSource="{Binding fruitBar}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0,0,20,0">
<ImageButton Source="{Binding Picture}"
HorizontalOptions="Start"
WidthRequest="40"
HeightRequest="40""/>
<Button Text="{Binding Quantity}"
TextColor="#4D4B4B"
CornerRadius="10" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
Utiliza BindableLayout12.
El deberás repetir el StackLayout
tantas veces necesites
1 2 3 ..n
No necesitas repetirlo!

20. xmlns:ios="clr-namespace:Xamarin.Forms.
PlatformConfiguration.iOSSpecific;assembly=
Xamarin.Forms.Core"
ios:Page.UseSafeArea="true"
Ajustando nuestro TitleBar en IOS13.
Utilizando el área segura

21. <Label Text= "&lt;Hello people!!!&gt;" />
Agregando texto con caracteres especiales14.
🔹 < – Menor que – &lt;
🔹 > – Mayor que – &gt;
🔹 & – Ampersand – &amp;
🔹 “ – Comillas – &quot;
🔹 ‘ – Apóstrofe – &apos;

22. <Button
WidthRequest ="80"
HeightRequest ="80"
CornerRadius ="40"
VerticalOptions ="Center"
HorizontalOptions ="Center"
BackgroundColor ="#F77DF9"/>
Puedes crear botones circulares!15.

23. Mejor manejo de imágenes con FFImageLoading16.
✔ Mejor manejo de la memoria
✔ Efectos especiales extras con Xamarin.FFImageLoading.Transformation

24. 📌 Más flexibilidad en tus diseños
haciéndolos horizontales y verticales.
📌 Mejor manejo de performance
Utiliza CollectionView para tus listas17.

25. Uso de Triggers para cambios Visuales18.
Triggers de propiedad
Triggers de data
Triggers de evento

26. <Image
Source="{OnPlatform Android=’AndroidIcon’,
iOS='IOSIcon}" />
Onplatform19.

27. Utiliza Font Icons20.

28. Mantén siempre informado al usuario21.
Diseño de Dribble (Barek Berendt )Diseño de Dribble (Hega Putra)

29. Échale un vistazo a PancakeView y al Canal de Kim Phillpotts

30. Recomendaciones

31. GRACIAS
@Microsoft365Live @m365live Microsoft 365 Live
@LeomarisReyes
@LeomarisReyes11
@LeomarisReyes