Back to Home

AccentBrush for WPF Metro Theme

January 18, 20141 minute read
AccentBrush for WPF Metro Theme

Mah Apps provide a very easy way to style any WPF applications with Metro theme. They provided 22 different accent colours and two themes dark and light. Just by merging the resources in App.Resources, your app will look pretty much like Metro app.

<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatButton.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />

Theme and accent brush can be dynamically switched by using following code.

public MainWindow()
ThemeManager.ChangeTheme(App.Current, ThemeManager.DefaultAccents[0], Theme.Light);

When changing theme, the accent brush of all default controls will change and make your app more pretty. But some scenarios, we may want to colorize our app with our own colour like background gradient, etc. There is a way to make our own colour match with Metro accent. I have attached a sample, where on changing theme, in addition to controls, my own path icons (taken from Metro Studio) will also change the colour.

This can be achieved by using the “AccentColorBrush” as a dynamic resource.

<Path Stretch="Uniform"
Fill="{DynamicResource AccentColorBrush}"
Margin="10" />

Download Sample here

Happy theming… 🙂