fluent xaml theme editor
1.0.0
| page_type | nombre | lenguas | productos | descripción | ||||
|---|---|---|---|---|---|---|---|---|
muestra | Editor de temas de Fluent Xaml |
|
| Una aplicación de herramienta y muestra que le muestra cómo temas de su aplicación sin esfuerzo. Jumpstarting esto también brindándole una capacidad de herramienta ligera para ver que su tema personalizado cobra vida en su aplicación. |
Este repositorio contiene la solución completa y el código fuente del editor de temas Fluent XAML, una herramienta que ayuda a demostrar la flexibilidad del sistema de diseño Fluent, así como admite el proceso de desarrollo de aplicaciones al generar el marcado XAML para nuestro marco de recursos de recursos utilizados en aplicaciones de la plataforma de Windows Universal (UWP).
El código fuente ubicado en este repositorio se creó con la plataforma Universal Windows disponible en Visual Studio y está diseñado para ejecutarse en dispositivos de escritorio, móviles y futuros que admiten la plataforma Universal Windows.
Nota: Si no está familiarizado con XAML, la plataforma Universal Windows, el diseño o los recursos fluidos y los recursos de los recursos, se recomienda que visite el sitio de la plataforma de Windows Universal Design y se familiarice con el idioma y el marco para el que esta herramienta está destinada.
Esta aplicación requiere la actualización de Visual Studio 2017 o más y el Kit de desarrollo de software de Windows (SDK) versión 17763 o superior para Windows 10.
Obtenga una copia gratuita de Visual Studio 2017 Community Edition con soporte para la creación de aplicaciones de plataforma de Windows Universal
Además, para mantenerse al tanto de las últimas actualizaciones de Windows y las herramientas de desarrollo, conviértase en una fuente de Windows uniéndose al programa Windows Insider.
Conviértete en una fuente de Windows
Si no está buscando estar separados de este proyecto de código abierto y, en su lugar, solo le gustaría usar la aplicación en sí, para ir a la versión de Microsoft Store de esta herramienta y descargarla allí.
Con la compilación de la vista previa, puede seleccionar tres colores principales para los temas claros y oscuros en las propiedades de la derecha, la vista etiquetada como "Diccionario de color".
Además de los tres colores principales para cada tema, también puede expandir cualquiera de los colores principales para ver una lista de colores menores que cambian el aspecto de solo ciertas piezas de control, esto básicamente le permite obtener más detallado con sus opciones de color para los estados.
Para acceder a la vista detallada de los colores, simplemente haga clic en el chevron junto a las principales muestras de botones de color.
El editor enviará con algunos preajustes para que vea para tener una idea de cómo se ve un tema en la aplicación. El menú desplegable preestablecido se encuentra en la parte superior del panel de propiedades del diccionario de color.
Cuando se inicie por primera vez, siempre se establecerá en el valor predeterminado, que es el estilo de tema Light and Dark Predeterminado para todos nuestros controles. Puede seleccionar diferentes temas como Lavender y Nighttime para tener una idea de cómo la herramienta atenderá nuestros controles.
Una vez que esté listo para comenzar a hacer su propio tema, ¡comience a editar los colores! Una vez que haya comenzado a ajustarlos, notará que el Combobox preestablecido va del nombre del preajuste a "personalizado":
Esto significa que ha comenzado un nuevo tema temporal que es "personalizado". Cualquier cambio que realice no afectará a ninguno de los otros preajustes en ese cuadro.
La última parte del editor de temas es probablemente una de las partes más importantes de la creación de su tema, y es asegurarse de que en cualquier tema respectivo cumpla con el contraste. La herramienta le proporciona una pequeña lista de información de contraste en el lado izquierdo de la ventana de selección de color al elegir su color.
En esta ventana, puede ver su contraste con el color de texto más frecuente en el tema que está eligiendo editar, en el texto del caso de caso anterior porque está editando un valor de color del tema ligero.
Cuando elige un color que cae por debajo de la relación de contraste estándar de 4.5: 1 , será alertado con texto rojo junto a su valor de contraste.
Puede aprender más sobre las proporciones de contraste y su importancia aquí.
Una vez que haya temido todo, ¡querrá usarlo en su aplicación! Para hacerlo, deberá hacer clic en el botón "Exportar" en la parte inferior del panel de propiedades del diccionario de color.
Ese botón abrirá una ventana emergente con un trozo genérico y sin nombre de recursos (que se ve a continuación).
Sin embargo, esta ventana no hace nada final, si desea hacer algunos cambios en el tema y volver a expulsarlos a la ventana de exportación, se actualizará con sus valores de color cambiados.
Sin embargo, una vez que esté listo para usarlo en su aplicación, haga clic en el botón "Copiar al portapapeles" en la esquina inferior derecha y vaya a la solución UWP Visual Studio.
Una vez en Visual Studio, haga clic con el botón derecho en la solución del proyecto, ubicada en el explorador de soluciones.
Y vaya a agregar> nuevo elemento y luego elija el diccionario de recursos.
Nombre ese diccionario lo que tenga sentido para usted y haga clic en Agregar cuando haya terminado.
Que debería generar un cictición de recursos en blanco como este:
< ResourceDictionary
xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
xmlns : local = " using:MyAppName " >
</ ResourceDictionary >Ahora puede pegar el código de tema exportado del editor en ese recursos de recursos.
< ResourceDictionary
xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
xmlns : local = " using:MyAppName " >
<!-- Free Public License 1.0.0 Permission to use, copy, modify, and/or distribute this code for any purpose with or without fee is hereby granted. -->
< ResourceDictionary .ThemeDictionaries>
< ResourceDictionary x : Key = " Default " >
< ResourceDictionary .MergedDictionaries>
< ColorPaletteResources Accent = " #FF0073CF " AltHigh = " #FF000000 " AltLow = " #FF000000 " AltMedium = " #FF000000 " AltMediumHigh = " #FF000000 " AltMediumLow = " #FF000000 " BaseHigh = " #FFFFFFFF " BaseLow = " #FF333333 " BaseMedium = " #FF9A9A9A " BaseMediumHigh = " #FFB4B4B4 " BaseMediumLow = " #FF676767 " ChromeAltLow = " #FFB4B4B4 " ChromeBlackHigh = " #FF000000 " ChromeBlackLow = " #FFB4B4B4 " ChromeBlackMedium = " #FF000000 " ChromeBlackMediumLow = " #FF000000 " ChromeDisabledHigh = " #FF333333 " ChromeDisabledLow = " #FF9A9A9A " ChromeGray = " #FF808080 " ChromeHigh = " #FF808080 " ChromeLow = " #FF151515 " ChromeMedium = " #FF1D1D1D " ChromeMediumLow = " #FF2C2C2C " ChromeWhite = " #FFFFFFFF " ListLow = " #FF1D1D1D " ListMedium = " #FF333333 " />
< ResourceDictionary >
< Color x : Key = " SystemChromeAltMediumHighColor " >#CC000000</ Color >
< Color x : Key = " SystemChromeAltHighColor " >#FF000000</ Color >
< Color x : Key = " SystemRevealListLowColor " >#FF1D1D1D</ Color >
< Color x : Key = " SystemRevealListMediumColor " >#FF333333</ Color >
< Color x : Key = " RegionColor " >#FF000000</ Color >
< SolidColorBrush x : Key = " RegionBrush " Color = " {StaticResource RegionColor} " />
</ ResourceDictionary >
</ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >
< ResourceDictionary x : Key = " Light " >
< ResourceDictionary .MergedDictionaries>
< ColorPaletteResources Accent = " #FF0073CF " AltHigh = " #FFFFFFFF " AltLow = " #FFFFFFFF " AltMedium = " #FFFFFFFF " AltMediumHigh = " #FFFFFFFF " AltMediumLow = " #FFFFFFFF " BaseHigh = " #FF000000 " BaseLow = " #FFCCCCCC " BaseMedium = " #FF898989 " BaseMediumHigh = " #FF5D5D5D " BaseMediumLow = " #FF737373 " ChromeAltLow = " #FF5D5D5D " ChromeBlackHigh = " #FF000000 " ChromeBlackLow = " #FFCCCCCC " ChromeBlackMedium = " #FF5D5D5D " ChromeBlackMediumLow = " #FF898989 " ChromeDisabledHigh = " #FFCCCCCC " ChromeDisabledLow = " #FF898989 " ChromeGray = " #FF737373 " ChromeHigh = " #FFCCCCCC " ChromeLow = " #FFECECEC " ChromeMedium = " #FFE6E6E6 " ChromeMediumLow = " #FFECECEC " ChromeWhite = " #FFFFFFFF " ListLow = " #FFE6E6E6 " ListMedium = " #FFCCCCCC " />
< ResourceDictionary >
< Color x : Key = " SystemChromeAltMediumHighColor " >#CCFFFFFF</ Color >
< Color x : Key = " SystemChromeAltHighColor " >#FFFFFFFF</ Color >
< Color x : Key = " SystemRevealListLowColor " >#FFE6E6E6</ Color >
< Color x : Key = " SystemRevealListMediumColor " >#FFCCCCCC</ Color >
< RevealBackgroundBrush x : Key = " SystemControlHighlightListLowRevealBackgroundBrush " TargetTheme = " Light " Color = " {ThemeResource SystemRevealListMediumColor} " FallbackColor = " { StaticResource SystemListMediumColor} " />
< Color x : Key = " RegionColor " >#FFFFFFFF</ Color >
< SolidColorBrush x : Key = " RegionBrush " Color = " {StaticResource RegionColor} " />
</ ResourceDictionary >
</ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >
< ResourceDictionary x : Key = " HighContrast " >
< StaticResource x : Key = " RegionColor " ResourceKey = " SystemColorWindowColor " />
< SolidColorBrush x : Key = " RegionBrush " Color = " {StaticResource RegionColor} " />
</ ResourceDictionary >
</ ResourceDictionary .ThemeDictionaries>
</ ResourceDictionary >Ahora tiene un tema de color totalmente personalizado esperando ser usado, ¡así que apliquemos!
Para hacer eso, querrá ir a su página o App.xaml (dependiendo de cuánto de su aplicación desea que se aplique el tema) y fusionar su diccionario de temas en los recursos de esa página o aplicación.
< Page .Resources>
< ResourceDictionary >
< ResourceDictionary .MergedDictionaries>
< ResourceDictionary Source = " PurpleGreenTheme.xaml " />
</ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >
</ Page .Resources>Por último, no olvide establecer el color de fondo de su página en RegionColor que eligió para su tema. Es el único pincel que no se establecerá automáticamente.
< Grid Background = " {ThemeResource RegionBrush} " >
<!-- Your page layout/content here -->
</ Grid >Una vez que eso esté dentro, ¡ya! Los colores de su tema ahora serán generalizados en su aplicación o página dependiendo.
Para acceder a la API de ColorPaletteresources en código detrás, y para cambiar cualquiera de las propiedades de color en tiempo de ejecución, pase a través de los diccionarios fusionados en App.xaml (o en el alcance que fusionó sus temas) y obtenga una referencia al cictición de recursos utilizados actualmente como una instancia de ColorPaletteresource
Aquí hay un ejemplo de cómo agarrar y editar las propiedades en ColorPaletterSources en C#:
public MainPage ( )
{
this . InitializeComponent ( ) ;
ColorPaletteResources cpr = FindColorPaletteResourcesForTheme ( "Light" ) ;
cpr . Accent = Colors . Red ;
ReloadPageTheme ( this . RequestedTheme ) ;
}
private void ReloadPageTheme ( ElementTheme startTheme )
{
if ( this . RequestedTheme == ElementTheme . Dark )
this . RequestedTheme = ElementTheme . Light ;
else if ( this . RequestedTheme == ElementTheme . Light )
this . RequestedTheme = ElementTheme . Default ;
else if ( this . RequestedTheme == ElementTheme . Default )
this . RequestedTheme = ElementTheme . Dark ;
if ( this . RequestedTheme != startTheme )
ReloadPageTheme ( startTheme ) ;
}
private ColorPaletteResources FindColorPaletteResourcesForTheme ( string theme )
{
foreach ( var themeDictionary in Application . Current . Resources . ThemeDictionaries )
{
if ( themeDictionary . Key . ToString ( ) == theme )
{
if ( themeDictionary . Value is ColorPaletteResources )
{
return themeDictionary . Value as ColorPaletteResources ;
}
else if ( themeDictionary . Value is ResourceDictionary targetDictionary )
{
foreach ( var mergedDictionary in targetDictionary . MergedDictionaries )
{
if ( mergedDictionary is ColorPaletteResources )
{
return mergedDictionary as ColorPaletteResources ;
}
}
}
}
}
return null ;
}No recomendamos hacer esto con demasiada frecuencia en tiempo de ejecución, ya que podría experimentar algunos problemas de rendimiento, pero si se coloca en una página de configuración o áreas en las que no espera que los usuarios lo alternen a menudo, el rendimiento no debería ser tan malo.
¡Consejo! Debe recargar un recursos de recursos para que los recursos dentro obtengan nuevos cambios en el color que haya aplicado. Puede hacerlo volteando el THEME SELITEDTHEME a un tema diferente y regresa nuevamente. Eso es lo que está haciendo la función Reloadpagetheme.
Aunque la API utilizada en el código exportado para esta herramienta es para la versión 17744 o mayor, no es demasiado complicado hacer que su tema funcione en versiones SDK anteriores.
Cuando exporte su tema, verá un marcado de recursos de recursos con una definición de ColorPaletteresources similar a esta:
< ResourceDictionary .ThemeDictionaries>
< ResourceDictionary x : Key = " Default " >
< ResourceDictionary .MergedDictionaries>
< ColorPaletteResources Accent = " #FF8961CC " AltHigh = " #FF000000 " AltLow = " #FF000000 " AltMedium = " #FF000000 " AltMediumHigh = " #FF000000 " AltMediumLow = " #FF000000 " BaseHigh = " #FFFFFFFF " BaseLow = " #FF64576B " BaseMedium = " #FFB6AABC " BaseMediumHigh = " #FFCBBFD0 " BaseMediumLow = " #FF8D8193 " ChromeAltLow = " #FFCBBFD0 " ChromeBlackHigh = " #FF000000 " ChromeBlackLow = " #FFCBBFD0 " ChromeBlackMedium = " #FF000000 " ChromeBlackMediumLow = " #FF000000 " ChromeDisabledHigh = " #FF64576B " ChromeDisabledLow = " #FFB6AABC " ChromeGray = " #FFA295A8 " ChromeHigh = " #FFA295A8 " ChromeLow = " #FF332041 " ChromeMedium = " #FF3F2E4B " ChromeMediumLow = " #FF584960 " ChromeWhite = " #FFFFFFFF " ListLow = " #FF3F2E4B " ListMedium = " #FF64576B " />
< ResourceDictionary >
< Color x : Key = " RegionColor " >#FF262738</ Color >
< SolidColorBrush x : Key = " RegionBrush " Color = " {StaticResource RegionColor} " />
</ ResourceDictionary >
</ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >ColorPalTteresources es una API amigable para nuestros Systemcolors que se encuentran dentro de Generic.xaml y permite que esos Systemcolor se encuentren en cualquier nivel.
Si quisiera habilitar este mismo tema para que funcione a nivel, tendría que definir cada sistema de Systemcolor individualmente con cada color de su tema:
< ResourceDictionary >
< ResourceDictionary .ThemeDictionaries>
< ResourceDictionary x : Key = " Default " >
< Color x : Key = " SystemAltHighColor " >#FF000000</ Color >
< Color x : Key = " SystemAltLowColor " >#FF000000</ Color >
< Color x : Key = " SystemAltMediumColor " >#FF000000</ Color >
< Color x : Key = " SystemAltMediumHighColor " >#FF000000</ Color >
< Color x : Key = " SystemAltMediumLowColor " >#FF000000</ Color >
< Color x : Key = " SystemBaseHighColor " >#FFFFFFFF</ Color >
< Color x : Key = " SystemBaseLowColor " >#FF64576B</ Color >
< Color x : Key = " SystemBaseMediumColor " >#FFB6AABC</ Color >
< Color x : Key = " SystemBaseMediumHighColor " >#FFCBBFD0</ Color >
< Color x : Key = " SystemBaseMediumLowColor " >#FF8D8193</ Color >
< Color x : Key = " SystemChromeAltLowColor " >#FFCBBFD0</ Color >
< Color x : Key = " SystemChromeBlackHighColor " >#FF000000</ Color >
< Color x : Key = " SystemChromeBlackLowColor " >#FFCBBFD0</ Color >
< Color x : Key = " SystemChromeBlackMediumLowColor " >#FF000000</ Color >
< Color x : Key = " SystemChromeBlackMediumColor " >#FF000000</ Color >
< Color x : Key = " SystemChromeDisabledHighColor " >#FF64576B</ Color >
< Color x : Key = " SystemChromeDisabledLowColor " >#FFB6AABC</ Color >
< Color x : Key = " SystemChromeHighColor " >#FFA295A8</ Color >
< Color x : Key = " SystemChromeLowColor " >#FF332041</ Color >
< Color x : Key = " SystemChromeMediumColor " >#FF3F2E4B</ Color >
< Color x : Key = " SystemChromeMediumLowColor " >#FF584960</ Color >
< Color x : Key = " SystemChromeWhiteColor " >#FFFFFFFF</ Color >
< Color x : Key = " SystemChromeGrayColor " >#FFA295A8</ Color >
< Color x : Key = " SystemListLowColor " >#FF3F2E4B</ Color >
< Color x : Key = " SystemListMediumColor " >#FF64576B</ Color >
< Color x : Key = " SystemAccentColor " >#FF8961CC</ Color >
< Color x : Key = " RegionColor " >#FF262738</ Color >
< SolidColorBrush x : Key = " RegionBrush " Color = " {StaticResource RegionColor} " />
</ ResourceDictionary >
</ ResourceDictionary .ThemeDictionaries>
</ ResourceDictionary >En este caso, estamos usando el tema Lavendar para mostrar esta transición de nivel descendente.
ADVERTENCIA: Aunque este cambio de formato de marcado permitirá que su tema se aplique a través de los controles en versiones SDK anteriores, no funcionará en una página, contenedor o nivel de control de control. ColorPaletterSources es la API que permite el comportamiento de alcance . Este formato de marcado solo funcionará en el nivel App.xaml para SDK anteriores.
Esta herramienta se creó directamente a partir del equipo de características y, aunque agradecemos sus comentarios y sugerencias para mejoras en la herramienta, no aceptamos ninguna característica o cambio del público en este momento. Vuelva a consultar regularmente, ya que podemos evolucionar nuestro modelo de contribución en el futuro.
Este proyecto ha adoptado el Código de Conducta Open Open Microsoft. Para obtener más información, consulte el Código de Conducta Preguntas frecuentes o comuníquese con [email protected] con cualquier pregunta o comentario adicional.
Para obtener un código fuente adicional de Windows, herramientas y muestras, consulte Windows en GitHub.
