A Dark Theme for the WPF XamDataGrid

Tem havido um pouco de interesse em temas sombrios recentemente. Isso ocorre porque mais usuários estão achando o fundo branco dos aplicativos forçando seus olhos, especialmente quando passam muito tempo na frente da tela do computador.

A conveniência de ter um tema mais escuro também foi reconhecida pela Microsoft no Visual Studio 2012, que vem com um tema tão escuro interno. Recebemos várias solicitações de temas escuros para nossos controles NetAdvantage para WPF e, até agora, só podíamos aconselhar sobre como os clientes poderiam criar um tema escuro por conta própria. Agora conseguimos criar um tema tão escuro para controles WPF selecionados e estamos felizes em fornecê-lo gratuitamente.

Decidimos iniciar o trabalho de temas com o controle de Infragistics mais usado em aplicativos de linha de negócios do WPF – o XamDataGrid (uma parte do NetAdvantage para WPF) – um controle de alto desempenho, completo e ricamente estilizável. Esta postagem de blog apresenta um tema escuro para o XamDataGrid e os controles do editor, que podem ser prontamente extraídos e usados para produzir uma interface do usuário agradável aos olhos.

Faça o download do projeto de exemplo– ele integra o XamDataGrid com um XamFormulaEditor e inclui o tema escuro para esses dois controles. Lembre-se de desbloquear o arquivo ZIP antes de extraí-lo. O projeto é criado usando o Visual Studio 2010 e o .NET Framework 4. Ele usa o XamDataGrid no produto 12.2 NetAdvantage para WPF, para que você possa compilá-lo e executá-lo sem nenhum download adicional. A avaliação gratuita de 30 dias totalmente funcional do produto NetAdvantage para WPF, que inclui o XamDataGrid, está disponível. Aqui está uma captura de tela do tema XamDataGrid com o tema escuro:

Como acessar o tema

O tema XamDataGrid Metro Dark está em arquivos DataPresenter_MetroDark.xaml e Editors_MetroDark.xaml. Como parte disso, também estamos disponibilizando estilos escuros para XamFormulaEditor – em DataTree_MetroDark.xaml e FormulaEditor_MetroDark.xaml. Eles contêm os modelos de controle e os pincéis e cores usados para estilizar esses controles.

Modifying the Theme

Você pode modificar as cores dos pincéis diretamente no DataPresenter_MetroDark.xaml e no Editors_MetroDark.xaml. Embora essa abordagem possa funcionar para algumas configurações de pincel, se você quiser alterar todas as cores do tema para um matiz de cor específico, é muito mais fácil usar um ResourceWasher. A lavagem de recursos permite alterar as cores de todos os pincéis no dicionário de recursos, dando a você a capacidade de personalizar a aparência visual de um controle, mantendo os tons relativos de cores em diferentes elementos do controle. Você pode ler mais sobre como usar um Lavadora de recursos aqui. Essa abordagem é ilustrada na amostra.

No exemplo, estamos usando um WashColor transparente no ResourceWasher no MainWindow para mostrar o tema escuro conforme ele é definido nos estilos. Se você quiser ativar a lavagem de recursos, altere a configuração WashColor para uma cor diferente.

Neste caso, estamos lavando todo o tema em uma única cor. A lavagem de recursos tem recursos muito maiores e pode lavar diferentes grupos de pincéis em cores diferentes, se o seu cenário exigir. Essa abordagem mais avançada é apresentada aqui.

Resumo

O estilo é cada vez mais importante em aplicativos de desktop, pois os aplicativos de desktop estão competindo com a interatividade e os temas em aplicativos móveis. Nesta postagem do blog, apresentamos um tema escuro para o XamDataGrid e o XamFormulaEditor, que permite obter uma aparência escura para seu aplicativo. Você pode usar esses estilos como eles são, ou pode usá-los facilmente como base para lavagem de recursos, o que permitirá produzir uma variedade de combinações de cores para atender às suas aplicações.