fluent xaml theme editor
1.0.0
| page_type | имя | языки | продукция | описание | ||||
|---|---|---|---|---|---|---|---|---|
образец | Свободный редактор темы XAML |
|
| Инструмент и пример, который показывает вам, как легко тему вашего приложения. Прыгая это, также предоставив вам легкую инструментальность, чтобы увидеть, как ваша пользовательская тема оживает в вашем приложении. |
Этот репо содержит полное решение и исходный код для редактора темы Fluent XAML - инструмента, который помогает продемонстрировать гибкость системы проектирования бегемота, а также поддерживает процесс разработки приложения, генерируя разметку XAML для нашей ресурсной структуры, используемой в приложениях Universal Windows Platform (UWP).
Исходный код, расположенный в этом репо, был создан с универсальной платформой Windows, доступной в Visual Studio и предназначен для работы на рабочем столе, мобильных и будущих устройствах, которые поддерживают универсальную платформу Windows.
Примечание. Если вы не знакомы с XAML, универсальной платформой Windows, свободным дизайном или ресурсами и ресурсами, настоятельно рекомендуется посетить сайт Design Universal Windows Platform и ознакомиться с языком и структурой, для которых предназначен этот инструмент.
Это приложение требует Visual Studio 2017 Update 4 или выше, а также версию программного обеспечения Windows (SDK) 17763 или выше для Windows 10.
Получите бесплатную копию Visual Studio 2017 Community Edition при поддержке создания приложений Universal Windows Platform
Кроме того, чтобы оставаться на вершине последних обновлений для Windows и инструментов разработки, стать инсайдером Windows, присоединившись к программе Windows Insider.
Стать инсайдером Windows
Если вы не хотите быть в стороне от этого проекта с открытым исходным кодом и вместо этого просто хотели бы использовать само приложение, пожалуйста, чтобы перейти в версию этого инструмента Microsoft Store и загрузить его там.
При сборке предварительного просмотра вы можете выбрать три основных цвета как для легких, так и для темных тем в правых свойствах.
В дополнение к трем основным цветам для каждой темы, вы также можете расширить любой из основных цветов, чтобы увидеть список незначительных цветов, которые изменяют внешний вид только определенных деталей управления - это в основном позволяет вам получить более подробную информацию с вашим цветом для состояний.
Чтобы получить доступ к подробному представлению цветов, просто нажмите Chevron рядом с основными образцами кнопок цветов.
Редактор отправит несколько пресетов, на которые вы можете посмотреть, чтобы понять, как выглядит тема в приложении. ПРЕДУПТИРОВАНИЕ ПРЕДУПРЕЖДЕНИЯ расположен в верхней части панели свойств цветового словаря.
Когда вы сначала загружаетесь, он всегда будет настроен на по умолчанию - это легкий и темный стиль темы для всех наших элементов управления. Вы можете выбрать различные темы, такие как лаванда и ночное время, чтобы получить представление о том, как инструмент будет тематическим тематическим управлением.
Как только вы будете готовы начать создавать собственную тему, просто начните редактировать цвета! После того, как вы начали их настраивать, вы заметите, что Prefets Combobox переходит от названия предустановки к «пользовательскому»:
Это означает, что вы начали новую временную тему, которая является «обычной». Любые изменения, которые вы вносите, не повлияют на другие предустановки в этой коробке.
Последняя часть редактора тем, вероятно, является одной из самых важных частей создания вашей темы, и это убедиться, что в любой теме вы соответствуют контрастному соответствию. Инструмент предоставляет вам небольшой список контрастной информации на левой стороне окна выбора цвета при выборе цвета.
В этом окне вы можете увидеть свой контраст с наиболее распространенным цветом текста в теме, которую вы выбираете для редактирования, в черном тексте выше, потому что вы редактируете светлое значение цвета темы.
Когда вы выбираете цвет, который падает ниже стандартного соотношения контрастности 4,5: 1 , вы будете предупреждены с красным текстом рядом с вашим контрастным значением.
Вы можете узнать больше о соотношении контрастности и их важности здесь.
После того, как вы все это сделаете, вы захотите использовать его в своем приложении! Для этого вам нужно нажать кнопку «Экспорт» в нижней части панели свойств цветового словаря.
Эта кнопка откроет всплывающее окно с общим, неназванным ResourceDictionary STUB (показано ниже).
Это окно ничего не делает окончательным, однако, если вы хотите внести некоторые изменения в тему и реэкспортировать их в окно экспорта, оно будет обновляться с вашими измененными значениями цвета.
Однако, как только вы будете готовы использовать его в своем приложении, нажмите кнопку «Скопировать в буфер обмена» в правом нижнем углу и перейдите в решение UWP Visual Studio.
Оказавшись в Visual Studio, щелкните правой кнопкой мыши на проектном решении, расположенном в исследователе решения.
И перейдите, чтобы добавить> новый элемент, а затем выберите словарь ресурсов.
Назовите этот словарь, что для вас имеет смысл, и нажмите «Добавить», когда вы закончите.
Это должно генерировать пустой ресурс, как это:
< ResourceDictionary
xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
xmlns : local = " using:MyAppName " >
</ ResourceDictionary >Теперь вы можете вставить экспортируемый код темы из редактора в этот ресурс.
< 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 >Теперь у вас есть полностью индивидуальная цветовая тема, ожидающая использования, так что давайте применим ее!
Для этого вы захотите перейти на свою страницу или app.xaml (в зависимости от того, на какое из вашего приложения вы хотите применить тему) и объединить ваш словарь темы в ресурсах этой страницы или приложения.
< Page .Resources>
< ResourceDictionary >
< ResourceDictionary .MergedDictionaries>
< ResourceDictionary Source = " PurpleGreenTheme.xaml " />
</ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >
</ Page .Resources>Наконец, не забудьте установить цвет фона вашей страницы в регион, который вы выбрали для своей темы. Это единственная кисть, которая не будет установлена автоматически.
< Grid Background = " {ThemeResource RegionBrush} " >
<!-- Your page layout/content here -->
</ Grid >Как только это будет, ты закончил! В зависимости от вашего приложения или страницы теперь будут распространены цвета вашей темы.
Чтобы получить доступ к API ColorPaletterSources в коде, и изменить любые цветовые свойства во время выполнения, пройти через объединенные словаря в app.xaml (или при сфере, который вы объединили свои темы) и получите ссылку на в настоящее время используемый ресурс в качестве экземпляра Colorpaletteresource
Вот пример того, как взять и отредактировать свойства на ColorPaletterSources в 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 ;
}Мы не рекомендуем делать это слишком часто во время выполнения, так как вы могли бы испытывать некоторые проблемы с производительностью, но если размещать на странице настроек или в областях, где вы не ожидаете, что пользователи будут их часто переключать, производительность не должна быть большой.
Кончик! Вам необходимо перезагрузить ресурсы, чтобы ресурсы внутри, чтобы получить любые новые изменения цвета, которые вы применили. Вы можете сделать это, переворачивая запрос на другую тему и обратно. Это то, что делает функция ReloadPagetheme.
Хотя API, используемый в экспортируемом коде для этого инструмента, предназначен для версии 17744 или более, не так уж сложно заставить вашу тему работать над более ранними версиями SDK.
Когда вы экспортируете свою тему, вы увидите разметку ResourceDictionary с определением ColorPaletterSources, аналогично этим:
< 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 - это дружелюбный API для наших систем, которые находятся внутри generic.xaml и позволяют использовать эти SystemColors на любом уровне.
Если бы вы хотели позволить этой же теме работать вниз, вам придется определить каждую систему индивидуально с каждым цветом из вашей темы:
< 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 >В этом случае мы используем тему Lavendar, чтобы показать этот переход по дальнейшему.
Предупреждение: хотя это изменение формата разметки позволит применять вашу тему в рамках элементов управления в более ранних версиях SDK, оно не будет работать на уровне страницы, контейнера или управления. ColorPaletterSources - это API, который позволяет поведение . Этот формат разметки будет работать только на уровне app.xaml для более ранних SDK.
Этот инструмент был создан непосредственно из команды функций, и хотя мы приветствуем ваш вклад и предложения по улучшению инструмента, мы не принимаем никаких функций или изменений от общественности в настоящее время. Пожалуйста, регулярно проверяйте, так как мы можем развивать нашу модель вклада в будущем.
Этот проект принял код поведения с открытым исходным кодом Microsoft. Для получения дополнительной информации см. Code of Perving FAQ или свяжитесь с [email protected] с любыми дополнительными вопросами или комментариями.
Для получения дополнительного исходного кода Windows, инструментов и образцов, см. Windows на GitHub.
