USANDO MATERIAL FRAME EN XAMARIN FORMS Parte 2

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.

app.xaml

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

Color.xaml

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

Material Frame 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

About Page

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.

 

Comments are closed.

A %d blogueros les gusta esto: