2. Leomaris Reyes
Leomaris Reyes
● Ingeniera de software
● Microsoft MVP
● Platzi Master Coach
● Creadora y escritora del blog
de Xamarin AskXammy.com
● CEO & Founder de Stemelle.
● Xamarin Certified Mobile
Developer
3. Algunos mitos del diseño en Xamarin Forms
❌ 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.
6. 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.
7. 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 aquí"
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.
8. <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>
9. 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.
10. 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 XAML6.
12. Colores directos Como buscar la imagen correcta en Android
Agrega las imágenes en sus dimensiones correctas8.
13. 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:
14. 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.
