A Dark Theme for the WPF XamDataGrid

Últimamente ha habido bastante interés por los temas oscuros. Esto se debe a que cada vez más usuarios encuentran que el fondo blanco de las aplicaciones cansa la vista, especialmente cuando pasan mucho tiempo frente a la pantalla de la computadora.

La conveniencia de tener un tema más oscuro también fue reconocida por Microsoft en Visual Studio 2012, que viene con un tema tan oscuro incorporado. Hemos recibido una serie de solicitudes de temas oscuros para nuestros controles de NetAdvantage para WPF y, hasta ahora, solo podíamos asesorar sobre cómo los clientes podían crear un tema oscuro de este tipo por sí mismos. Ahora hemos podido crear un tema tan oscuro para determinados controles de WPF y estamos encantados de proporcionarlo libremente.

Decidimos comenzar el trabajo de creación de temas con el control Infragistics que se usa con más frecuencia en las aplicaciones de línea de negocio de WPF: XamDataGrid (parte de NetAdvantage para WPF), un control de alto rendimiento, con todas las características y con estilos enriquecidos. En esta entrada de blog se presenta un tema oscuro para XamDataGrid y los controles del editor, que se pueden extraer y usar fácilmente para generar una interfaz de usuario que sea agradable a la vista.

Descargue el proyecto de ejemplo: integra XamDataGrid con XamFormulaEditor e incluye el tema oscuro para estos dos controles. Recuerde desbloquear el archivo ZIP antes de extraerlo. El proyecto se ha creado con Visual Studio 2010 y .NET Framework 4. Usa XamDataGrid en el producto NetAdvantage 12.2 para WPF, por lo que puede compilarlo y ejecutarlo sin ninguna descarga adicional. Está disponible una versión de prueba gratuita de 30 días totalmente funcional del producto NetAdvantage para WPF, que incluye XamDataGrid. Esta es una captura de pantalla del tema XamDataGrid en el tema oscuro:

Cómo acceder al tema

El tema XamDataGrid Metro Dark se encuentra en archivos DataPresenter_MetroDark.xaml y Editors_MetroDark.xaml. Como parte de esto, también estamos disponibles estilos oscuros para XamFormulaEditor, en DataTree_MetroDark.xaml y FormulaEditor_MetroDark.xaml. Contienen las plantillas de control y los pinceles y colores utilizados para aplicar estilo a estos controles.

Modifying the Theme

Puedes modificar los colores de los pinceles directamente en los archivos DataPresenter_MetroDark.xaml y Editors_MetroDark.xaml. Si bien este enfoque puede funcionar para algunas configuraciones de pincel, si desea cambiar todos los colores del tema a un tono de color en particular, es mucho más fácil usar un ResourceWasher. El lavado de recursos permite cambiar los colores de todos los pinceles del diccionario de recursos, lo que le permite personalizar la apariencia visual de un control, al tiempo que mantiene los tonos relativos de los colores en los diferentes elementos del control. Puedes leer más sobre cómo usar un Lavadora de recursos aquí. Este enfoque se ilustra en el ejemplo.

En el ejemplo, usamos un WashColor transparente en ResourceWasher en MainWindow para mostrar el tema oscuro tal como se define en los estilos. Si desea activar el lavado de recursos, cambie la configuración de WashColor a un color diferente.

En este caso, estamos lavando todo el tema en un solo color. El lavado de recursos tiene capacidades mucho mayores y puede lavar diferentes grupos de pinceles en diferentes colores si su escenario lo requiere. Este enfoque más avanzado se presenta aquí.

Resumen

El estilo es cada vez más importante en las aplicaciones de escritorio, ya que las aplicaciones de escritorio compiten con la interactividad y la tematización de las aplicaciones móviles. En esta entrada de blog, presentamos un tema oscuro para XamDataGrid y XamFormulaEditor, que le permite lograr un aspecto oscuro para su aplicación. Puede usar estos estilos tal como están, o puede usarlos fácilmente como base para el lavado de recursos, lo que le permitirá producir una variedad de combinaciones de colores para adaptarse a sus aplicaciones.