fluent xaml theme editor
1.0.0
| Page_type | Name | Sprachen | Produkte | Beschreibung | ||||
|---|---|---|---|---|---|---|---|---|
Probe | Fluent XAML Theme Editor |
|
| Ein Tool und eine Beispiel -App, die Ihnen zeigt, wie Sie Ihre App mühelos testen können. Wenn Sie dies starten, geben Sie Ihnen auch eine leichte Werkzeugfähigkeit, um zu sehen, dass Ihr benutzerdefiniertes Thema in Ihrer App zum Leben erweckt wird. |
Dieses Repo enthält die vollständige Lösung und den Quellcode für den Fluent XAML -Themeditor - ein Tool, mit dem die Flexibilität des Fluent -Designsystems demonstriert und den App -Entwicklungsprozess unterstützt wird, indem er XAML -Markup für unser Ressourcen -Framework generiert, das in UWP -Anwendungen (Ressourcenictionary Framework verwendet wird.
Der Quellcode in diesem Repo wurde mit der in Visual Studio verfügbaren Universal Windows -Plattform erstellt und ist so konzipiert, dass sie auf Desktop-, Mobil- und zukünftigen Geräten ausgeführt werden, die die Universal Windows -Plattform unterstützen.
Hinweis: Wenn Sie mit XAML, der universellen Windows -Plattform, dem fließenden Design oder der Ressourcen und der Ressourcenförderungen nicht vertraut sind, wird dringend empfohlen, die Design der universellen Windows -Plattform von Designs zu besuchen und sich mit der Sprache und dem Rahmen vertraut zu machen, für das dieses Tool bestimmt ist.
Diese Anwendung erfordert Visual Studio 2017 Update 4 oder höher und das Windows Software Development Kit (SDK) Version 17763 oder höher für Windows 10.
Holen Sie sich eine kostenlose Kopie der Visual Studio 2017 Community Edition mit Unterstützung für das Erstellen von Apps mit universellen Windows -Plattform
Um auf dem neuesten Stand der aktuellen Updates für Windows und der Entwicklungstools zu einem Windows -Insider zu bleiben, indem Sie das Windows Insider -Programm verbinden.
Werden ein Windows -Insider
Wenn Sie nicht von diesem Open -Source -Projekt getrennt sind und stattdessen nur die App selbst verwenden möchten, gehen Sie bitte die Microsoft Store -Version dieses Tools und laden Sie sie dort herunter.
Mit dem Vorschau-Build können Sie drei Hauptfarben für die hellen und dunklen Themen in der rechten Eigenschaften auswählen, die als „Farbwörterbuch“ bezeichnet werden.
Zusätzlich zu den drei Hauptfarben für jedes Thema können Sie auch eine der Hauptfarben erweitern, um eine Liste kleinerer Farben anzuzeigen, die das Aussehen nur bestimmter Steuerteile ändern. Dies ermöglicht Ihnen im Grunde, dass Sie mit Ihren Farbauswahl für Zustände detaillierter werden.
Um auf die detaillierte Ansicht der Farben zuzugreifen, klicken Sie einfach auf das Chevron neben den Hauptfarben -Schaltflächen.
Der Herausgeber wird mit einigen Voreinstellungen versendet, die Sie sich ansehen können, um eine Vorstellung davon zu bekommen, wie ein Thema in der App aussieht. Der voreingestellte Dropdown befindet sich oben im Panel Color Dictionary Properties.
Wenn Sie zum ersten Mal starten, wird es immer auf die Standardeinstellung eingestellt - das ist der Standard -Styling -Styling für alle unsere Steuerelemente. Sie können verschiedene Themen wie Lavendel und Nacht auswählen, um eine Vorstellung davon zu bekommen, wie das Tool unsere Steuerelemente unterstellt.
Sobald Sie bereit sind, Ihr eigenes Thema zu erstellen, beginnen Sie einfach die Farben zu bearbeiten! Sobald Sie angefangen haben, sie zu optimieren, werden Sie feststellen, dass der Presets Combobox vom Namen des Voreingangs zum „Custom“ geht:
Dies bedeutet, dass Sie ein neues temporäres Thema begonnen haben, das „individuell“ ist. Alle Änderungen, die Sie vornehmen, wirken sich nicht auf die anderen Voreinstellungen in dieser Box aus.
Der letzte Teil des Themas -Editors ist wahrscheinlich einer der wichtigsten Teile des Erstellens Ihres Themas, und das heißt, dass Sie in beiden jeweiligen Themen kontrastierend sind. Das Tool bietet Ihnen eine kleine Liste von Kontrastinformationen auf der linken Seite des Farbauswahlfensters bei der Auswahl Ihrer Farbe.
In diesem Fenster können Sie Ihren Kontrast zu der am häufigsten vorkommenden Textfarbe in dem Thema sehen, das Sie bearbeiten möchten, im obigen Fall Schwarzer Text, da Sie einen Farbwert des Lichtthemens bearbeiten.
Wenn Sie eine Farbe auswählen, die unter das Standardkontrastverhältnis von 4,5: 1 fällt, werden Sie neben Ihrem Kontrastwert mit rotem Text aufmerksam gemacht.
Sie können hier mehr über Kontrastverhältnisse und ihre Bedeutung erfahren.
Sobald Sie alles thematisiert haben, möchten Sie es in Ihrer App verwenden! Dazu müssen Sie am unteren Rand der Schaltfläche "Exportieren" am unteren Rand des Panels für Farbwörterbuch -Eigenschaften klicken.
Diese Taste öffnet ein Popup -Fenster mit einem generischen, nicht genannten Ressourcen -Stub (siehe unten).
Dieses Fenster macht nichts endgültig. Wenn Sie jedoch einige Änderungen am Thema vornehmen und sie in das Exportfenster erneut aussetzen möchten, wird es mit Ihren geänderten Farbwerten aktualisiert.
Sobald Sie es jedoch in Ihrer App verwenden können, klicken Sie in der unteren rechten Ecke auf die Schaltfläche „In die Zwischenablage kopieren“ und gehen Sie zu UWP Visual Studio -Lösung.
Einmal in Visual Studio, klicken Sie mit der rechten Maustaste auf die Projektlösung im Lösungs-Explorer.
Und wählen Sie zu einem neuen Element hinzu und wählen Sie dann das Ressourcenwörterbuch.
Nennen Sie das Wörterbuch für Sie, was auch immer sinnvoll ist, und klicken Sie auf Hinzufügen, wenn Sie fertig sind.
Das sollte ein leeres Ressourcenschutz wie folgt erzeugen:
< ResourceDictionary
xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
xmlns : local = " using:MyAppName " >
</ ResourceDictionary >Jetzt können Sie den exportierten Themencode aus dem Editor in dieses Ressourcenmut einfügen.
< 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 >Jetzt haben Sie ein vollständig angepasstes Farbthema, das darauf wartet, verwendet zu werden. Lassen Sie es uns also anwenden!
Dazu möchten Sie in Ihre Seite oder Ihre Seite oder app.xaml gehen (je nachdem, wie viel von Ihrer App das Thema anwenden soll) und Ihr Themenwörterbuch in die Ressourcen dieser Seite oder App zusammenführen.
< Page .Resources>
< ResourceDictionary >
< ResourceDictionary .MergedDictionaries>
< ResourceDictionary Source = " PurpleGreenTheme.xaml " />
</ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >
</ Page .Resources>Vergessen Sie nicht, die Hintergrundfarbe Ihrer Seite auf das RegionColor zu setzen, das Sie für Ihr Thema ausgewählt haben. Es ist der einzige Pinsel, der nicht automatisch eingestellt wird.
< Grid Background = " {ThemeResource RegionBrush} " >
<!-- Your page layout/content here -->
</ Grid >Sobald das drin ist, sind Sie fertig! Ihre Themenfarben sind jetzt je nach App oder Seite überzeugend.
Sozug auf die ColorPalettteresources -API im Code dahinter und um die Farbeigenschaften zur Laufzeit zu ändern, durch die zusammengeführten Wörterbücher in App.xaml (oder in den Umfang, das Sie Ihre Themen zusammengeschlossen haben)
Hier ist ein Beispiel dafür, wie Sie die Eigenschaften für ColorPaletteresources in C#greifen und bearbeiten:
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 ;
}Wir empfehlen nicht, dies zur Laufzeit zu oft zu tun, da Sie einige Leistungsprobleme aufweisen können. Wenn Sie jedoch auf einer Einstellungsseite oder in Bereichen platziert werden, in denen Sie nicht erwarten, dass Benutzer sie häufig umschalten, sollte die Leistung nicht schlecht sein.
Tipp! Sie müssen ein Ressourcenschutz neu laden, damit die Ressourcen innerhalb der Ressourcen neue Farbänderungen erhalten, die Sie angewendet haben. Sie können dies tun, indem Sie das angeforderte Thema zu einem anderen Thema und wieder zurücklegen. Das ist es, was die Reloadpagie -Funktion tut.
Obwohl die im exportierte Code für dieses Tool verwendete API für Version 17744 oder größer ist, ist es nicht zu kompliziert, dass Ihr Thema an früheren SDK -Versionen funktioniert.
Wenn Sie Ihr Thema exportieren, sehen Sie ein Ressourcenictionary -Markup mit einer ColorPaletterSources -Definition ähnlich folgender:
< 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 >ColorPaletterSources ist eine freundliche API für unsere Systemcolors, die in generic.xaml sitzen und es ermöglicht, dass diese Systemcolors auf jeder Ebene abgebildet werden.
Wenn Sie das gleiche Thema ermöglichen möchten, um unten zu arbeiten, müssten Sie jedes SystemColor mit jeder Farbe aus Ihrem Thema einzeln definieren:
< 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 >In diesem Fall verwenden wir das Lavendar -Thema, um diesen Abgrenzungsübergang zu zeigen.
WARNUNG: Obwohl diese Änderung des Markup -Formats ermöglicht, Ihr Thema in früheren SDK -Versionen auf Steuerelemente anzuwenden, funktioniert es nicht auf einer Seite, einem Container oder einer Steuerung des Schirmens. ColorPaletterSources ist die API, die das Scoping -Verhalten ermöglicht. Dieses Markup -Format funktioniert nur auf der Ebene von App.xaml für frühere SDKs.
Dieses Tool wurde direkt aus dem Feature -Team erstellt. Obwohl wir Ihre Eingaben und Vorschläge für Verbesserungen des Tools begrüßen, akzeptieren wir zu diesem Zeitpunkt keine Funktionen oder Änderungen der Öffentlichkeit. Bitte schauen Sie regelmäßig nach, da wir in Zukunft unser Beitragsmodell entwickeln können.
Dieses Projekt hat den Microsoft Open Source -Verhaltenscode übernommen. Weitere Informationen finden Sie im FAQ oder wenden Sie sich an [email protected] mit zusätzlichen Fragen oder Kommentaren.
Weitere Windows -Quellcode, Tools und Samples finden Sie unter Windows unter GitHub.
