Search code examples
wpfxamlthemesmaterial-design-in-xaml

Custom colors for TabControl

Working with Material Design in XAML, I first used the default colors.

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepOrange" SecondaryColor="Amber" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

After that, I wanted to use custom colors, and followed their wiki for Custom Colors and updated to the following:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <materialDesign:BundledTheme BaseTheme="Light" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
        </ResourceDictionary.MergedDictionaries>
        <SolidColorBrush x:Key="SecondaryHueLightBrush" Color="#92c9a6"/>
        <SolidColorBrush x:Key="SecondaryHueLightForegroundBrush" Color="#FFFFFF"/>
        <SolidColorBrush x:Key="SecondaryHueMidBrush" Color="#1C8875"/>
        <SolidColorBrush x:Key="SecondaryHueMidForegroundBrush" Color="#FFFFFF"/>
        <SolidColorBrush x:Key="SecondaryHueDarkBrush" Color="#0b4d49"/>
        <SolidColorBrush x:Key="SecondaryHueDarkForegroundBrush" Color="#FFFFFF"/>
        <!-- accent -->
        <SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#6F91B2"/>
        <SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#FFFFFF"/>
        <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#104F7A"/>
        <SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#FFFFFF"/>
        <SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#0D3351"/>
        <SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="#FFFFFF"/>
    </ResourceDictionary>
</Application.Resources>

This changes the color of the application, except for the inactive TabItems in the TabControl. The header of the inactive TabItems disappears.

With the default colors it looks like this: Theme with standard colors.

When changing to the custom colors, the header text of the inactive TabItem "Scan History" disappears.

Theme with custom colors.

Am I doing something wrong or missing something?

Update

The XAML of the TabControl itself:

<TabControl Name="AppTabs" Grid.Row="0" Grid.Column="0">
    <TabItem Header="Scan Configuration">
    </TabItem>
    <TabItem Header="Scan History">
    </TabItem>
</TabControl>
Solution

  • MaterialDesign themes have a notion of a base theme, a primary and a secondary color, where the base theme specifies whether it is a light or dark theme. When using the BundledTheme, you have to specify all three parameters, like you did in your first example, otherwise the theme is incomplete and will not be applied. Hence, this line in your custom approach will not pull in any theme resources.

    <materialDesign:BundledTheme BaseTheme="Light" />

    If you would create a complete theme resource dictionary with all colors that are used by the MaterialDesign styles and templates, then you would not need this line anyway. However, you only override a subset of all colors, the others are undefined, since there are no other (fallback) theme resource.

    You have two options to solve the issue:

    • Pull in a fallback theme that applies all other colors that you did not override by specifying the base theme and both primary and secondary colors in the BundledTheme.

      <Application.Resources>
   <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
         <materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepOrange" SecondaryColor="Amber" />
         <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
      </ResourceDictionary.MergedDictionaries>
      <SolidColorBrush x:Key="SecondaryHueLightBrush" Color="#92c9a6"/>
      <SolidColorBrush x:Key="SecondaryHueLightForegroundBrush" Color="#FFFFFF"/>
      <SolidColorBrush x:Key="SecondaryHueMidBrush" Color="#1C8875"/>
      <SolidColorBrush x:Key="SecondaryHueMidForegroundBrush" Color="#FFFFFF"/>
      <SolidColorBrush x:Key="SecondaryHueDarkBrush" Color="#0b4d49"/>
      <SolidColorBrush x:Key="SecondaryHueDarkForegroundBrush" Color="#FFFFFF"/>
      <!-- accent -->
      <SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#6F91B2"/>
      <SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#FFFFFF"/>
      <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#104F7A"/>
      <SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#FFFFFF"/>
      <SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#0D3351"/>
      <SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="#FFFFFF"/>
   </ResourceDictionary>
</Application.Resources>

    • Define all colors that are used by the styles and templates. In your specific case, the inactive brush is MaterialDesignBody, but of course there are many more colours that need to be defined, especially if you are using other controls as well.

      <Application.Resources>
   <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
      </ResourceDictionary.MergedDictionaries>
      <SolidColorBrush x:Key="MaterialDesignBody" Color="#FF00FF"/>
      <SolidColorBrush x:Key="SecondaryHueLightBrush" Color="#92c9a6"/>
      <SolidColorBrush x:Key="SecondaryHueLightForegroundBrush" Color="#FFFFFF"/>
      <SolidColorBrush x:Key="SecondaryHueMidBrush" Color="#1C8875"/>
      <SolidColorBrush x:Key="SecondaryHueMidForegroundBrush" Color="#FFFFFF"/>
      <SolidColorBrush x:Key="SecondaryHueDarkBrush" Color="#0b4d49"/>
      <SolidColorBrush x:Key="SecondaryHueDarkForegroundBrush" Color="#FFFFFF"/>
      <!-- accent -->
      <SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#6F91B2"/>
      <SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#FFFFFF"/>
      <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#104F7A"/>
      <SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#FFFFFF"/>
      <SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#0D3351"/>
      <SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="#FFFFFF"/>

      <!-- Many, many more brushes... -->
   </ResourceDictionary>
</Application.Resources>

    For TabControl you can find the used brushes in its styles and templates here.