ComponentOne Studio Edition for WinForms Edition has now added new now includes Material and Material Dark themes. These themes are available as C1Themes that can be applied on any controls in WinForms edition as well as most of the commonly-used Microsoft controls. These two themes provide two different color schemes, adhere to the same material principle and color specifications, and can even act as base themes for your future material themes. Material theme is a light theme compared to Material Dark.
Here's a comparison of how controls look in their default themes and Material theme:
|Default Theme||Material Theme|
The Material Design color system consists of primary and secondary colors. These colors reflect your application’s branding and styling. ComponentOne's new Material Designer sample is an interactive designer that lets you select primary and secondary accent colors for your Material theme. You can save the theme and apply it in your WinForms application later.
To change the color scheme for your theme, follow these easy steps:
See the Material Theme Designer in action:
Material themes can be applied at design time as well as on runtime. You can apply a theme at design time with the Theme Controller dialog or by modifying the ‘App.config’ file. To apply at runtime, use the C1ThemeController static class to apply themes.
From the designer's toolbox, drag a C1ThemeController and drop it on your form. A ThemeController dialog box appears. This enables you to select the:
In the dialog that pops up, the theme is initially specified as "(none)" for all supporting controls already on the form. This prevents unintentional loss of property settings on those controls.
Click the All to (default) button in the dialog so that the default theme is set on all controls. Note: If you've customized some of the controls already, this will be ignored, and the default theme will not be restored.
Select Material from the list of available built-in themes. You can also select the material theme you created with Material Theme Designer.
Include C1.Win.C1Themes.(4/2).dll in your application. You can add the following app settings in your App.Config to apply the basic theme:
<configuration> <appSettings> <add key="C1ApplicationTheme" value="Material"/> </appSettings> </configuration>
Include C1.Win.C1Themes.(4/2).dll in your application and add the following code in your application before it loads.
C1Theme theme = C1.Win.C1Themes.C1ThemeController.GetThemeByName(“Material”, false); C1ThemeController.ApplyThemeToControlTree(control, theme);
C1Theme Designer Application allows easy designing of new themes for any controls in WinForms Edition. It also lets you edit/modify an existing theme to achieve the appearance of your choice, or match with the application theme. You can further use this application to tweak the Material theme to the most granular level allowed by the control.
A theme is an XML file with .c1theme extension that consists of a set of properties and their values (which determines the look and feel of a control). Themes are divided internally into different sections corresponding to different controls. A section Base Theme Properties is accessible to all other controls. This section contains a sub section, Material, which stores the Material properties that can be altered to created different material themes.
For example, let’s start changing our material theme for FlexGrid, where the headers are the primary color.
Open the ComponentOne Theme Designer from ComponentOne Start Menu. Press Ctrl + N or File > New. Select Material as the base theme for your new theme.
Click on BTP Editor button (1). This opens a new Base Theme Property Editor. Select “Material” properties (2). Here, you can see different colors used in Material:
Go to the theme tree and expand C1FlexGrid node.
You can select the Reference tab in the picker dropdown to select the primary color.
You can save this theme and use it as mentioned in the "Applying Material Themes in your application" section. Your FlexGrid should now have a header color based on your primary color settings.
Share with us how you're designing your desktop applications and how Material theme works with your application.