USANDO MATERIAL FRAME EN XAMARIN FORMS Parte 2
Que tal amigos, llegamos al 19 de Diciembre de 2020, y es agradable leer cada una de las aportaciones de la comunidad, con diversos temas en el calendario de adviento de la comunidad de Xamarin en español.
En mi aportación del Día 4 de diciembre Usando Material Frame en Xamarin mencione los pasos para implementar el paquete Nuget de Sharpnado Material Frame y dejar todo listo para su uso.
Si bajaste el Git del proyecto. https://github.com/jucaripo/materialframe-ejemplo. encontraras algunos puntos interesantes que son aportación del creador del paqueteSharpnado.
Como podrás ver en la imagen tenemos de la linea 9 a las 29 los parámetros del proyecto por default.
lo que quiero compartirte es cómo el creador del Nuget separo en la carpeta /Styles las diferentes partes del diseño de la app para facilitar el mantenimiento y cambio rápido de colores en la app.
En lo particular te recomiendo esta aproximación si tienes un proyecto que requiera de tener muchos estilos en toda la app.
Lo que hace un MergedDictionaries es permitirnos juntar varios archivos con recursos y poderlos administrar de forma separada, dando mas claridad que estilos son para Colores “Colors.xaml”, los que son Globales “Global.xaml”, etc.
En el Archivo Colors.Xaml están las definiciones principales de color para los temas
Como verán en la imagen
tenemos el uso de 2 temas de colores para Material Design como esta en los comentarios tema oscuro y claro, tanto fondos como color de texto, también encontramos la parte de AcylicSurface esta parte define los colores a usar en Neumorfismos y será el “Color base de la superficie” y este se llama AcrylicSurface, el segundo color es el AcrylicFrameBackground “color de los Frames”, el siguiente paso es ver el archivo
MaterialFrame.xaml
en este archivo se define el acabado de los frames aquí se agrega las propiedades que tendrán en pantalla cada recuadro utilizado.
Margenes, Espacio exterior, Angulo de esquinas, Color del Frame, Tema del Material, tipo de Blur, este es un punto interesante en Neumorfismos los colores son planos, pero hay otro patrón de Diseño que se llama Glass el cual da transparencia a los recuadros con un efecto de blur “en este punto es donde nos es útil el blur”, la elevación la cual es el efecto visual de que tan elevado con respecto al fondo se vera el elemento.
Esta parte es al gusto del Diseñador, ya que igual puede tener el mismo valor para todos, o tener un diseño que de la sensación de múltiples alturas entre cuadros, en este punto de la app todos siguen la misma elevación.
Ya la parte final es aplicarla a nuestras paginas de Xaml, y para esto lo mostrare con la Página de Acerca “AboutPage.xaml”
Para esto abrimos la pagina AboutPage.Xaml
y agregamos
xmlns:rv=”clr-namespace:Sharpnado.MaterialFrame;assembly=Sharpnado.MaterialFrame”
para poder usar la etiqueta Frame que generar el efecto del recuadro.
<rv:MaterialFrame x:Name=”SettingsFrame” Padding=”10,10,10,10″>
<—- contenido a decorar con el recuadro —>
</rv:MaterialFrame>
puedes cambiar parámetros en la etiqueta y generar distinta variaciones directamente.
En nuestro siguiente post pasaremos a ver sharpnado.shadow para generar los volúmenes en botones fotos y textos.
con lo que podrás generar un Neumorfismo completo a tu diseño.
te recomiendo darle una visita a
https://www.behance.net/search/projects?search=neumorphism&tracking_source=typeahead_search_suggestion
encontraras ideas e inspiración para aplicar este estilo.
un cordial saludo amigos y que estas festividades tengan salud y un Feliz año nuevo.
