fluent xaml theme editor
1.0.0
| Page_type | nome | idiomas | produtos | descrição | ||||
|---|---|---|---|---|---|---|---|---|
amostra | Editor de temas XAML fluente |
|
| Um aplicativo de ferramentas e amostra que mostra como tema seu aplicativo sem esforço. Aumentar isso, oferecendo também uma ferramenta leve para ver seu tema personalizado ganhar vida em seu aplicativo. |
Este repositório contém a solução completa e o código -fonte para o Fluent Xaml Theme Editor - uma ferramenta que ajuda a demonstrar a flexibilidade do sistema de design fluente, além de suportar o processo de desenvolvimento de aplicativos, gerando a marcação XAML para nossa estrutura de recursos de recursos usados em aplicativos Universal Windows Platform (UWP).
O código -fonte localizado neste repositório foi criado com a plataforma universal do Windows disponível no Visual Studio e foi projetado para executar em dispositivos de desktop, móveis e futuros que suportam a plataforma universal do Windows.
NOTA: Se você não estiver familiarizado com o XAML, a plataforma universal do Windows, design ou recursos fluentes e recursos, é altamente recomendável que você visite o site de plataforma Windows universal do design e se familiarize com o idioma e a estrutura para a qual essa ferramenta se destina.
Este aplicativo requer a atualização 4 ou superior do Visual Studio 2017 e o Kit de Desenvolvimento de Software do Windows (SDK) versão 17763 ou superior para o Windows 10.
Obtenha uma cópia gratuita do Visual Studio 2017 Community Edition com suporte para a construção de aplicativos da Universal Windows Platform
Além disso, para permanecer no topo das atualizações mais recentes do Windows e das Ferramentas de Desenvolvimento, torne -se um Windows Insider, juntando -se ao programa Windows Insider.
Torne -se um Windows Insider
Se você não deseja fazer parte deste projeto de código aberto e, em vez disso, gostaria de usar o próprio aplicativo, por favor, para ir a versão da Microsoft Store desta ferramenta e baixá -la lá.
Com a compilação de visualização, você pode selecionar três cores principais para os temas claros e escuros nas propriedades da direita, visualizando o “Dicionário de cores”.
Além das três cores principais para cada tema, você também pode expandir qualquer uma das cores principais para ver uma lista de cores menores que alteram a aparência de certas peças de controle - isso basicamente permite que você fique mais detalhado com suas opções de cores para os estados.
Para acessar a visão detalhada das cores, basta clicar no chevron ao lado das principais amostras de botão colorido.
O editor enviará algumas predefinições para você olhar para ter uma idéia de como é um tema no aplicativo. O suspensão predefinido está localizado na parte superior do painel Propriedades do Dicionário de Cor.
Quando você inicializa, ele sempre será definido como padrão - que é o padrão de estilo de tema claro e escuro para todos os nossos controles. Você pode selecionar temas diferentes, como lavanda e noite, para ter uma idéia de como a ferramenta tema nossos controles.
Quando estiver pronto para começar a fazer seu próprio tema, comece a editar as cores! Depois de começar a ajustá -los, você notará que as predefinições ComboBox passa do nome da predefinição ao "personalizado":
Isso significa que você iniciou um novo tema temporário que é "personalizado". Quaisquer alterações que você fizer não afetarão nenhuma das outras predefinições nessa caixa.
A última parte do editor de temas é provavelmente uma das partes mais importantes da criação do seu tema, e é garantir que, em qualquer tema respectivo, você seja compatível com contraste. A ferramenta fornece uma pequena lista de informações de contraste no lado esquerdo da janela de seleção de cores ao escolher sua cor.
Nesta janela, você pode ver o seu contraste com a cor do texto mais prevalente no tema que está escolhendo editar, no caso de texto preto acima, porque está editando um valor de cor do tema leve.
Quando você escolhe uma cor que fica abaixo da taxa de contraste padrão de 4,5: 1 , você será alertado com o texto vermelho ao lado do seu valor de contraste.
Você pode aprender mais sobre taxas de contraste e sua importância aqui.
Depois de tema tudo, você vai querer usá -lo no seu aplicativo! Para fazer isso, você precisará clicar no botão "Exportar" na parte inferior do painel Propriedades do Dicionário de Cor.
Esse botão abrirá uma janela pop -up com um stub genérico e sem nome (visto abaixo).
Essa janela não faz nada final, no entanto, se você deseja fazer algumas alterações no tema e reexportar-as para a janela de exportação, ele atualizará com seus valores de cores alterados.
No entanto, depois que estiver pronto para usá -lo no seu aplicativo, clique no botão "Copiar para a área de transferência" no canto inferior direito e vá para a solução UWP Visual Studio.
Uma vez no Visual Studio, clique com o botão direito do mouse na solução do projeto, localizada no Solution Explorer.
E vá para adicionar> novo item e escolha o dicionário de recursos.
Nomeie esse dicionário, o que faz sentido para você e clique em Adicionar quando terminar.
Isso deve gerar um recurso em branco 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 >Agora você pode colar o código temático exportado do editor nesse recurso.
< 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 >Agora você tem um tema de cores totalmente personalizado esperando para ser usado, então vamos aplicá -lo!
Para fazer isso, você deseja entrar na sua página ou app.xaml (dependendo de quanto do seu aplicativo você deseja que o tema aplique) e mesclar seu dicionário de tema nos recursos dessa página ou aplicativo.
< Page .Resources>
< ResourceDictionary >
< ResourceDictionary .MergedDictionaries>
< ResourceDictionary Source = " PurpleGreenTheme.xaml " />
</ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >
</ Page .Resources>Por fim, não se esqueça de definir a cor de fundo da sua página para a região que você escolheu para o seu tema. É o único pincel que não será definido automaticamente.
< Grid Background = " {ThemeResource RegionBrush} " >
<!-- Your page layout/content here -->
</ Grid >Uma vez que você está pronto! As cores do seu tema agora serão difundidas em seu aplicativo ou página, dependendo.
Para acessar a API ColorPaletteResources na Código por trás e alterar qualquer uma das propriedades de cores em tempo de execução, percorra os dicionários mesclados no app.xaml (ou no escopo que você mesclou seus temas) e obter uma referência ao recurso atualmente usado como uma instância de colorPaletteResource
Aqui está um exemplo de como pegar e editar as propriedades no ColorPaletteResources em 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 ;
}Não recomendamos fazer isso com muita frequência em tempo de execução, pois você pode ter alguns problemas de desempenho, mas se colocado em uma página de configurações ou áreas em que você não espera que os usuários o alternem com frequência, o desempenho não deve ser tão ruim.
Dica! Você precisa recarregar um recurso para obter os recursos para obter novas alterações de cores que você aplicou. Você pode fazê -lo reclamando o tema solicitado para um tema diferente e novamente. É isso que a função ReloadPagetheme está fazendo.
Embora a API usada no código exportado para esta ferramenta seja para a versão 17744 ou maior, não é muito complicado fazer com que seu tema funcione nas versões anteriores do SDK.
Ao exportar seu tema, você verá uma marcação de recursos de recursos com uma definição de cores de cores semelhantes 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 >O ColorPaletteResources é uma API amigável para os nossos sistemas que ficam no genérico.xaml e permitem que esses SystemColors sejam escovos em qualquer nível.
Se você quisesse permitir que esse mesmo tema funcione para baixo, teria que definir cada SystemColor individualmente com cada cor do seu 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 >Nesse caso, estamos usando o tema Lavendar para mostrar essa transição para baixo.
Aviso: Embora essa alteração no formato de marcação permitirá que seu tema seja aplicado entre os controles nas versões anteriores do SDK, ela não funcionará em uma página, contêiner ou nível de controle. O ColorPaletteResources é a API que permite o comportamento do escopo . Esse formato de marcação funcionará apenas no nível App.xaml para SDKs anteriores.
Essa ferramenta foi criada diretamente a partir da equipe de recursos e, embora tenhamos recebido suas contribuições e sugestões de melhorias na ferramenta, não estamos aceitando nenhum recurso ou alteração do público no momento. Volte regularmente, pois podemos evoluir nosso modelo de contribuição no futuro.
Este projeto adotou o Código de Conduta Open Microsoft. Para obter mais informações, consulte o Código de Conduta Perguntas frequentes ou entre em contato com [email protected] com quaisquer perguntas ou comentários adicionais.
Para um código -fonte, ferramentas e amostras adicionais do Windows, consulte o Windows no GitHub.
