Uso de temas modernos en aplicaciones controladas por modelos

Los usuarios de aplicaciones basadas en modelos con la experiencia del aspecto moderno y renovado para aplicaciones basadas en modelos habilitada proporcionan un estilo actualizado alineado con el sistema de diseño Microsoft Fluent 2. Dado que este aspecto moderno actualizado viene con un nuevo sistema de creación de tema, no se respeta el tema clásico ; Sin embargo, los creadores pueden modificar los colores usados por la aplicación para ayudar a alinearse con su personalización de marca organizativa para los usuarios que han habilitado la apariencia moderna y actualizada. En este artículo, conocerá las anulaciones de estilos disponibles con una apariencia moderna y renovada y cómo implementarlas en su organización.

Modificación del tema de la aplicación

[Este tema es documentación preliminar y está sujeto a modificaciones.]

Con la apariencia moderna y actualizada habilitada en la aplicación, los creadores pueden crear un tema personalizado que ayude a alinearse con su personalización de marca organizativa. Con un tema personalizado, puedes cambiar el encabezado de la aplicación, hipervínculos, búsquedas, botones principales, indicadores de pestaña activos, selección de filas y efectos de desplazamiento. El tema personalizado también permite cambiar la fuente que se usa en la aplicación. Para ello, encapsula la información de tema deseada en un recurso XML, usa una configuración de aplicación para apuntar a este recurso web y, a continuación, comprueba que el nuevo tema moderno coincida con tus expectativas.

Información general sobre el recurso XML del tema personalizado

El primer paso para crear un tema moderno personalizado es crear un archivo XML con los parámetros de tema deseados, con uno o varios de los atributos siguientes definidos dentro de una CustomTheme etiqueta.

• BasePaletteColor – Color de inicialización (código HEX) utilizado como base para generar una paleta de colores de 16 ranuras para el tema.
• LockPrimary : un valor booleano que determina cómo se usa el color de inicialización seleccionado para generar la paleta de colores de 16 ranuras.
  • Falso (por defecto, valor predeterminado): la paleta está optimizada para la accesibilidad, pero no garantiza que el color semilla aparezca en ningún lugar de la paleta generada. Esta es la configuración predeterminada. Use el generador de temas fluent para obtener una vista previa de la paleta generada en función de las selecciones de basePaletteColor, vibrancyy hueTorsion.
  • Verdadero: el color de inicialización se coloca en la ranura principal (central) de la paleta. Los colores restantes se generan haciendo que los colores sean incrementalmente más claros en un lado y más oscuros en el otro lado. Es posible que la paleta generada no cumpla los requisitos de accesibilidad de la relación de contraste.
• Font – La fuente para tu tema personalizado. La fuente que representa el tema personalizado depende de la capacidad del explorador y de la máquina de destino para mostrar esa fuente.
• Vibrancy – Un parámetro opcional que afecta a la silenciación o brillo de la paleta, especialmente los colores más claros. Los valores permitidos están entre -100 y 100, con un valor predeterminado de 0. Esta opción solo es aplicable cuando lockPrimary="true".
• HueTorsion – Un parámetro opcional que afecta al tono, la sombra o el tono de la paleta, especialmente los colores más claros. Los valores permitidos están entre -100 y 100, con un valor predeterminado de 0. Esta opción solo es aplicable cuando lockPrimary="true".

Invalidación de la paleta

Anular ranuras individuales en la paleta del tema proporciona al creador un control total sobre los colores de las ranuras, lo que es especialmente útil cuando se necesitan modificaciones adicionales más allá de los parámetros estándar del tema mencionados anteriormente. Para reemplazar una ranura específica, asigne un valor a la ranura deseada utilizando su nombre. Por ejemplo, puede especificar el código HEX para darker70, primaryo lighter10 para adaptar la apariencia exactamente a su preferencia. Establecer valores para las 16 ranuras invalida completamente todas las opciones de paleta descritas en la sección anterior, lo que permite una combinación de colores altamente personalizada y única.

Los nombres de las ranuras para la paleta de más oscuro a más claro son: darker70, darker60, …<>, darker10, primary, lighter10, lighter20, …, lighter80. Consulte al diseñador del tema Fluent para averiguar cómo se utilizan generalmente estos espacios en los controles Fluent.

XML de ejemplo para un tema personalizado

Por ejemplo, este XML especifica un tema personalizado que es verde con una fuente diferente.

<CustomTheme 
    basePaletteColor="#00FF00"
    vibrancy="0"
    hueTorsion="-50"
    font="'GreatVibes', cursive"
/>

Este XML especifica un tema personalizado mediante el algoritmo de generación de paletas alternativo con una invalidación para una sola ranura.

<CustomTheme 
    basePaletteColor="#00FF00"
    lockPrimary="false"
    font="'GreatVibes', cursive"

    lighter70="#FFFFFF"
/>

Modificación de los colores del encabezado de la aplicación

Los creadores pueden personalizar el estilo del encabezado de la aplicación para desviarse del tema de la aplicación. Para ello, se puede extender el XML creado para el tema moderno personalizado con uno o varios de los atributos siguientes definidos dentro de una AppHeaderColors etiqueta.

• Background : color de fondo del encabezado de la aplicación. Este elemento debe definirse para que los cambios surtan efecto.
• Foreground : color de texto del encabezado de la aplicación. Si no se especifica, el sistema intenta calcular un color adecuado que tenga suficiente contraste con el color de fondo proporcionado.
• BackgroundHover : color de fondo de los botones del encabezado de la aplicación al pasar el ratón sobre ellos. Si no se especifica ningún valor, el sistema calcula un color basado en el color de fondo.
• ForegroundHover – El color del texto de los botones en el encabezado de la aplicación cuando se pasa el cursor sobre ellos. Si no se especifica ningún valor, el sistema intenta calcular un color adecuado que tenga suficiente contraste con el backgroundHover color.
• BackgroundPressed : color de fondo de los botones del encabezado de la aplicación cuando se presionan. La lógica predeterminada es la misma que backgroundHover.
• ForegroundPressed – El color del texto de los botones en la barra de la aplicación cuando se presionan. La lógica predeterminada es la misma que foregroundHover.
• BackgroundSelected : color de fondo de los botones del encabezado de la aplicación cuando se seleccionan. La lógica predeterminada es la misma que backgroundHover.
• ForegroundSelected : el color de texto de los botones en el encabezado de la aplicación cuando se seleccionan. La lógica predeterminada es la misma que backgroundHover.

XML de ejemplo para un tema moderno

Por ejemplo, este XML extiende el tema personalizado verde con un encabezado de aplicación negro. Para una facilidad de uso óptima, se recomienda especificar valores de color diferentes para cada estado de interacción.

<CustomTheme
    basePaletteColor="#00FF00"
    vibrancy="0"
    hueTorsion="-50"
    font="'GreatVibes', cursive"
>  
  <AppHeaderColors
    background="#000000" 
    foreground="#FFFFFF" 
    backgroundHover="#313131" 
    foregroundHover="#FFFFFF"
    backgroundPressed="#494949"
    foregroundPressed="#FFFFFF"
    backgroundSelected="#717171" 
    foregroundSelected="#FFFFFF"  
  />
</CustomTheme>

Creación del recurso web

1. Con un editor de texto o XML, guarde el XML que se usa para crear el recurso web. XML de ejemplo para un tema moderno

2. Inicie sesión en Power Apps.

3. Seleccione Soluciones en el panel de navegación izquierdo y, a continuación, cree una nueva solución.

4. Seleccione Nuevo>Más>Recurso web.

5. Seleccione Elegir archivo, vaya a y seleccione el archivo de texto XML que creó anteriormente.

6. En el panel Nueva propiedad de recurso web , escriba los valores siguientes:

   • Nombre para mostrar: Escriba un nombre para mostrar, como tema personalizado verde.
   • Nombre. Acepte el elemento generado automáticamente o escriba un nombre único para el recurso web.
   • Tipo: Datos (XML)

7. Haga clic en Guardar. Publique esta personalización con los pasos de la siguiente sección.

Aplicar el tema personalizado a las aplicaciones de su entorno

Después de seleccionar los colores y crear el recurso web, siga estos pasos para habilitar este estilo de encabezado de aplicación para todas las aplicaciones de su entorno que tengan habilitada la nueva apariencia .

1. En la solución que usó para crear el recurso web, seleccione Agregar más>> existente.
2. Escriba tema personalizado en el cuadro Buscar , seleccione Definición de tema personalizado, Siguiente y, a continuación, seleccione Agregar.
3. En la solución, seleccione Definición de tema personalizado y, a continuación, seleccione Editar en la barra de comandos.
4. En el panel de propiedades Editar definición de tema personalizado a la derecha, seleccione Nuevo valor de entorno en Establecer valor de entorno y escriba el nombre único del recurso web que creó anteriormente (consulte la columna Nombre en la solución para encontrar el nombre único). Quite las comillas dobles y asegúrese de agregar el prefijo del publicador para el recurso web. Por ejemplo, el nombre podría aparecer como contoso_green-custom-theme como en este ejemplo.
5. Haga clic en Guardar.
6. Seleccione Configuración en el panel Objetos de la izquierda y, a continuación, seleccione Publicar todas las personalizaciones en la barra de comandos. (Este comando aparece cuando no se selecciona ningún componente de la solución).

Una aplicación basada en modelo personalizada usando el ejemplo de tema verde extendido.

Comprobación de los nuevos colores del encabezado de la aplicación

Después de publicar el tema personalizado, querrá validar la aplicación del tema en la aplicación para asegurarse de que todo aparece como se espera.

Modificar solo los colores del encabezado de la aplicación

Los creadores solo pueden elegir personalizar el estilo del encabezado de la aplicación para desviarse del tema de la aplicación predeterminado. Para ello, siga estos pasos:

1. Cree un archivo XML con sus diversas selecciones de color, con uno o más de los atributos de la sección de la aplicación de anulaciones de color del encabezado definidos dentro de una etiqueta AppHeaderColors.
2. Cree un recurso web con el mismo proceso descrito para temas personalizados, pero asegúrese de proporcionar al recurso XML un nombre para mostrar descriptivo adecuado, como XML de encabezado de aplicación verde.
3. Aplique colores de encabezado de aplicación personalizados a las aplicaciones del entorno mediante la asignación de este recurso web al entorno o la aplicación en la configuración Invalidar color del encabezado de la aplicación . Siga los pasos descritos en Aplicación de temas personalizados a su entorno , pero use la configuración invalidar el color del encabezado de la aplicación en su lugar.

   Nota:

   Cualquier configuración definida en la configuración de Anular color de encabezado de aplicación se ignora si se ha definido la definición de Configuración de tema personalizado.

4. Compruebe los visuales del encabezado de su aplicación personalizada, incluidos todos los estados de los botones, para asegurarse de que todo aparezca como se espera y que haya relaciones de contraste adecuadas para la accesibilidad. Debe comprobar las siguientes opciones de color:
   • Los colores deseados se muestran para el encabezado de la aplicación en reposo y para cada estado de interacción del botón.
   • Hay un mínimo de una relación de contraste 4.5:1 entre los colores de primer plano y de fondo para el estado de reposo y cada estado de interacción del botón.

XML de ejemplo para la sobrescritura del color del encabezado de la aplicación

Por ejemplo, este XML especifica un color de fondo verde para el encabezado de la aplicación con texto blanco, con colores de fondo más oscuros para los distintos estados de interacción del botón. Para una facilidad de uso óptima, se recomienda especificar valores de color diferentes para cada estado.

<AppHeaderColors 
  background="#12783F"
  foreground="#FFFFFF" 
  backgroundHover="#165A31" 
  foregroundHover="#FFFFFF"
  backgroundPressed="#0F1C12"
  foregroundPressed="#FFFFFF"
  backgroundSelected="#153D23" 
  foregroundSelected="#FFFFFF"
/>

Con esta configuración, el encabezado de la aplicación debe ser similar al siguiente al reproducir la aplicación. Es posible que tenga que actualizar la pestaña del explorador para mostrar el tema.

Consulte también

Tematización clásica

Aspecto actualizado moderno