fluent xaml theme editor
1.0.0
| page_type | nom | langues | produits | description | ||||
|---|---|---|---|---|---|---|---|---|
échantillon | Éditeur de thème XAML CLUENT |
|
| Un outil et un exemple d'application qui vous montrent comment thème votre application sans effort. Sautez cela en vous donnant également une ouvrabilité légère pour voir votre thème personnalisé prendre vie dans votre application. |
Ce réprimande contient la solution complète et le code source de l'éditeur de thème XAML fluide - un outil qui aide à démontrer la flexibilité du système de conception Fluent ainsi que prend en charge le processus de développement des applications en générant un balisage XAML pour nos applications de plateforme Windows Universal Windows (UWP).
Le code source situé dans ce dépôt a été créé avec la plate-forme Windows universelle disponible dans Visual Studio et est conçue pour s'exécuter sur des appareils de bureau, mobiles et futurs qui prennent en charge la plate-forme Windows universelle.
Remarque: Si vous n'êtes pas familier avec XAML, la plate-forme Windows universelle, la conception ou les ressources et les ressources et les ressources courants, il est fortement recommandé de visiter le site de la plate-forme Windows universel de conception et de vous familiariser avec le langage et le cadre pour lesquels cet outil est destiné.
Cette application nécessite Visual Studio 2017 Update 4 ou supérieur et le Kit de développement de logiciels Windows (SDK) version 17763 ou plus pour Windows 10.
Obtenez une copie gratuite de Visual Studio 2017 Community Edition avec la prise en charge de la création d'applications Universal Windows Platform Windows
De plus, pour rester au-dessus des dernières mises à jour de Windows et des outils de développement, devenez un initié Windows en rejoignant le programme Windows Insider.
Devenez un initié Windows
Si vous ne cherchez pas à vous séparer de ce projet open source et que vous souhaitez plutôt utiliser l'application elle-même, veuillez passer la version Microsoft Store de cet outil et le télécharger là-bas.
Avec la construction d'aperçu, vous pouvez sélectionner trois couleurs principales pour les thèmes clairs et sombres dans la vue de propriétés de droite étiquetée «Dictionnaire couleur».
En plus des trois principales couleurs de chaque thème, vous pouvez également étendre l'une des principales couleurs pour voir une liste de couleurs mineures qui changent l'apparence de certaines parties de contrôle - cela vous permet essentiellement de devenir plus détaillé avec vos choix de couleurs pour les états.
Pour accéder à la vue détaillée des couleurs, cliquez simplement sur le Chevron à côté des échantillons de bouton de couleur principaux.
L'éditeur sera expédié avec des préréglages pour que vous puissiez regarder pour avoir une idée de ce à quoi ressemble un thème dans l'application. La liste déroulante Preset est située en haut du panneau des propriétés du dictionnaire couleur.
Lorsque vous démarrez pour la première fois, il sera toujours défini par défaut - ce qui est le style de thème clair et sombre par défaut pour tous nos contrôles. Vous pouvez sélectionner différents thèmes comme la lavande et la nuit pour avoir une idée de la façon dont l'outil thème nos contrôles.
Une fois que vous êtes prêt à commencer à créer votre propre thème, commencez simplement à modifier les couleurs! Une fois que vous avez commencé à les peaufiner, vous remarquerez que les préréglages Combobox passent du nom du préréglage à «Custom»:
Cela signifie que vous avez lancé un nouveau thème temporaire «personnalisé». Toutes les modifications que vous apportez n'affecteront aucun des autres préréglages de cette case.
La dernière partie de l'éditeur de thème est probablement l'une des parties les plus importantes de la création de votre thème, et c'est de vous assurer que dans l'un ou l'autre thème respectif, vous êtes conforme au contraste. L'outil vous fournit une petite liste d'informations de contraste sur le côté gauche de la fenêtre de sélection des couleurs lors du choix de votre couleur.
Dans cette fenêtre, vous pouvez voir votre contraste avec la couleur de texte la plus répandue dans le thème que vous choisissez de modifier, dans le texte noir ci-dessus parce que vous modifiez une valeur de couleur de thème léger.
Lorsque vous choisissez une couleur qui tombe en dessous du rapport de contraste standard de 4,5: 1 , vous serez alerté avec du texte rouge à côté de votre valeur de contraste.
Vous pouvez en savoir plus sur les ratios de contraste et leur importance ici.
Une fois que vous avez tout thème, vous voudrez l'utiliser dans votre application! Pour ce faire, vous devrez cliquer sur le bouton «Exporter» en bas du panneau des propriétés du dictionnaire couleur.
Ce bouton ouvrira une fenêtre contextuelle avec un talon de ressourcement générique et sans nom (vu ci-dessous).
Cette fenêtre ne fait rien final, cependant, si vous souhaitez apporter des modifications au thème et les réexporter dans la fenêtre d'exportation, elle actualisera vos valeurs de couleur modifiées.
Cependant, une fois que vous êtes prêt à l'utiliser dans votre application, cliquez sur le bouton «Copier dans le presse-papiers» dans le coin inférieur droit et accédez à la solution UWP Visual Studio.
Une fois dans Visual Studio, cliquez avec le bouton droit sur la solution du projet, situé dans l'explorateur de solutions.
Et allez pour ajouter> nouvel élément, puis choisissez Resource Dictionary.
Nommez ce dictionnaire qui a du sens pour vous et cliquez sur Ajouter lorsque vous avez terminé.
Cela devrait générer un ressourcementaire vierge comme celui-ci:
< ResourceDictionary
xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
xmlns : local = " using:MyAppName " >
</ ResourceDictionary >Vous pouvez maintenant coller le code de thème exporté de l'éditeur dans ce ressourcedictionnaire.
< 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 >Maintenant, vous avez un thème de couleur entièrement personnalisé en attente d'être utilisé, alors appliquons-le!
Pour ce faire, vous voudrez accéder à votre page ou à app.xaml (selon la quantité de votre application à laquelle vous souhaitez que le thème s'applique) et fusionnez votre dictionnaire de thème dans les ressources de cette page ou de cette application.
< Page .Resources>
< ResourceDictionary >
< ResourceDictionary .MergedDictionaries>
< ResourceDictionary Source = " PurpleGreenTheme.xaml " />
</ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >
</ Page .Resources>Enfin, n'oubliez pas de définir la couleur d'arrière-plan de votre page sur le RegionColor que vous avez choisi pour votre thème. C'est le seul pinceau qui ne sera pas réglé automatiquement.
< Grid Background = " {ThemeResource RegionBrush} " >
<!-- Your page layout/content here -->
</ Grid >Une fois que c'est dedans, vous avez terminé! Les couleurs de votre thème seront désormais omniprésentes sur votre application ou votre page en fonction.
Pour accéder à l'API ColorPaletTeResources dans le code derrière, et pour modifier l'une des propriétés des couleurs lors de l'exécution, parcourez les dictionnaires fusionnés dans app.xaml (ou à la portée que vous avez fusionné) et prenez une référence au ressourcement actuellement utilisé comme un instance colorpaletteresource
Voici un exemple de la façon de saisir et de modifier les propriétés sur ColorPaletTeResources 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 ;
}Nous ne recommandons pas de le faire trop souvent au moment de l'exécution car vous pourriez rencontrer des problèmes de performances, mais si vous êtes placé dans une page de paramètres ou des zones où vous ne vous attendez pas à ce que les utilisateurs le basculent souvent, les performances ne devraient pas être trop mauvaises.
Conseil! Vous devez recharger un ressourcementaire pour que les ressources à l'intérieur d'obtenir de nouvelles modifications de couleur que vous avez appliqués. Vous pouvez le faire en renversant lethemedTheme sur un thème différent et vice-versa. C'est ce que fait la fonction de reloadpagetheme.
Bien que l'API utilisée dans le code exporté pour cet outil soit pour la version 17744 ou plus, il n'est pas trop compliqué de faire fonctionner votre thème sur les versions SDK antérieures.
Lorsque vous exportez votre thème, vous verrez un balisage de ressources avec une définition ColorPaletTereSources similaire à ceci:
< 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 >ColorPaletTeResources est une API conviviale pour nos SystemColors qui se trouvent dans générique.xaml et permet à ces SystemColors d'être étendus à n'importe quel niveau.
Si vous vouliez permettre à ce même thème de travailler en panne, vous devrez définir chaque système systémique individuellement avec chaque couleur à partir de votre thème:
< 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 >Dans ce cas, nous utilisons le thème Lavendar pour montrer cette transition de bas niveau.
AVERTISSEMENT: Bien que ce changement de format de balisage permettra l'application de votre thème entre les contrôles dans les versions SDK antérieures, elle ne fonctionnera pas sur une page, un conteneur ou un niveau de contrôle. ColorPaletTteResources est l'API qui permet le comportement de portée . Ce format de balisage ne fonctionnera qu'au niveau app.xaml pour les SDK antérieurs.
Cet outil a été créé directement à partir de l'équipe de fonctionnalités et bien que nous saluons vos contributions et suggestions d'amélioration de l'outil, nous n'acceptons aucune fonctionnalité ou modification du public pour le moment. Veuillez vérifier régulièrement car nous pouvons faire évoluer notre modèle de contribution à l'avenir.
Ce projet a adopté le code de conduite open source Microsoft. Pour plus d'informations, consultez le code de conduite FAQ ou contactez [email protected] avec toute question ou commentaire supplémentaire.
Pour un code source Windows supplémentaire, des outils et des échantillons, veuillez consulter Windows sur GitHub.
