Buenas. En este artículo os voy a hablar sobre los controles modernos frente a los clásicos, que ventajas e inconvenientes tienen, como podemos trabajar con ambos y además os daré mi opinión sobre el tema. Vamos a ello.
¿Cómo puedo activarlos?
Para activarlos debes ir a los ajustes de la app y activar el siguiente check.
¿Qué ventajas ofrecen?
Tienen un diseño más actual y acorde al resto de elementos de la Power Platform. Siguiendo la temática Fluent UI.
Al cambiar la paleta de colores cambiarán los colores de todos los componentes modernos (Cómo podemos ver en estas imágenes).
¿Desventajas?
Hay pocos componentes modernos (de momento, imagino que irán añadiendo más).
Ofrecen muy pocas opciones de personalización (Por ejemplo, un botón clásico tiene 44 parámetros que podemos modificar, frente a solo los 14 que ofrecen los botones modernos (que no permiten modificar el color al pasar el cursor por encima, ni su borde, radio, etc.).
En resumen.
Estos componentes modernos se ajustan más al diseño actual y aportan funcionalidades muy interesantes, por lo que seguramente irán aumentando en número y funcionalidades, pero por desgracia actualmente están muy verdes. Por lo que para muchos casos tendrás que usar los controles clásicos, lo cual nos lleva al siguiente punto.
¿Cómo puedo trabajar combinando ambos controles?
Cómo has podido ver, Microsoft está dando mucha importancia a la estética de las app y a unificar todos los tonos en una paleta de color. Algo que antes ya se hacía (aunque tenías que currártelo un poco más) por ejemplo creando una paleta de colores y colocándola en el onStart de la aplicación (o ahora en las named functions (si no sabes lo que son te recomiendo ir a mi artículo número 10). Es decir, colocar algo como esto, y luego en la propiedad FILL de cada componente usarlo. Tal que así.
Set(
AppTheme3;
{
palette: {
themePrimary: ColorValue("#0078d4");
themeLighterAlt: ColorValue("#eff6fc");
themeLighter: ColorValue("#deecf9");
themeLight: ColorValue("#c7e0f4");
themeTertiary: ColorValue("#71afe5");
themeSecondary: ColorValue("#2b88d8");
themeDarkAlt: ColorValue("#106ebe");
themeDark: ColorValue("#005a9e");
themeDarker: ColorValue("#004578");
neutralLighterAlt: ColorValue("#faf9f8");
neutralLighter: ColorValue("#f3f2f1");
neutralLight: ColorValue("#edebe9");
neutralQuaternaryAlt: ColorValue("#e1dfdd");
neutralQuaternary: ColorValue("#d0d0d0");
neutralTertiaryAlt: ColorValue("#c8c6c4");
neutralTertiary: ColorValue("#a19f9d");
neutralSecondary: ColorValue("#605e5c");
neutralPrimaryAlt: ColorValue("#3b3a39");
neutralPrimary: ColorValue("#323130");
neutralDark: ColorValue("#201f1e");
black: ColorValue("#000000");
white: ColorValue("#ffffff")
}
}
);;
De esta manera cambiando solo el código en un punto puedes lograr que cambie el tema en toda la app. Muy bien, la cuestión es que ahora ya no hace falta crear un tema personalizado, siempre y cuando te valga con alguno de los que ya ofrece el diseñador.
Lo que igual no sabes es que cada tema tiene configurada una escala de colores como la que muestro en la imagen e la derecha. De tal forma que, si queremos usar en un control clásico la misma funcionalidad que en los componentes modernos, lo único que tendremos que colocar es en su propiedad FILL (o en la que queramos usar) el siguiente código.
App.Theme.Colors.Lighter50
De esta manera al cambiar el tema, también se ajustan los controles clásicos.
Y así podrás usar ambos tipos de controles sin perder la funcionalidad que aporta cada uno.
Espero que os sea de utilidad y lo tengáis en cuenta para vuestra futuras canvas app.
Un saludo.