Mahapps.Metro changing theme of single control

Question

Is there any way to change theme (light/dark) on a per control basis in mahapps metro? My problem is, that I have a window that uses the Light theme, but I have a part of it which has a really dark background and I cant make the ComboBox to show up properly, the little arrow remains black, even if I change the background color to black and the foreground to white. I found references about changing that arrow with some pretty serious trickery around controltemplates but not much luck so far... To make things a bit more complicated the combobox is inside an itemtemplate for a listbox.

I have a flyout elsewhere, and I realized that it has exactly the right kind of style for the comboboxes, because it is using the dark theme. Thats why I'm asking if there is a simple way to switch theme under single controls?

Thanks!

Answer 1

Not sure if I follow this question right, So you want to have your ComboBox use the Dark theme when it's parent control's are using the Light theme?

If so it's pretty simple. In the scope of the control within it's resources add the DarkTheme resource.

So say we got

 <Application.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      ...
      <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</Application.Resources>

Now pretty much everything in your App would be using the light theme. However if we have a ComboBox defined such as:

<ListBox>
  <!-- This is just for an example so you would ofc have this defined in the ItemTemplate normally -->
  <ListBoxItem>
    <ComboBox>
      <ComboBox.Resources>
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseDark.xaml" />
      </ComboBox.Resources>
      <ComboBoxItem Content="A" />
      <ComboBoxItem Content="A" />
      <ComboBoxItem Content="A" />
    </ComboBox>
  </ListBoxItem>
  <ListBoxItem Content="A" />
  <ListBoxItem Content="A" />
</ListBox>

Now we add the BaseDark.xaml resource in the scope for the ComboBox which should just make it get the Dark Theme applied to it.

The reason this works is just due to some Brush magic :) Control's are all Styled using Brushes they query and find. Now the Resource with the highest scope priority takes precedence when multiple Brushes have the same name.

So in essence BaseLight.xaml and BaseDark.xaml both define the same Brushes with different colors.

With this based on which resource applies to the control ends up defining which theme that control or it's children get's.