spiegelp / MaterialDesignExtensions

Material Design Extensions is based on Material Design in XAML Toolkit to provide additional controls and features for WPF apps
https://spiegelp.github.io/MaterialDesignExtensions/
MIT License
754 stars 122 forks source link

How to align dark theme with dark theme colors from MaterialDesignInXAML? #138

Closed bert2 closed 3 years ago

bert2 commented 3 years ago

I'm using the Autocomplete from MaterialDesignExtensions in an app using MaterialDesignInXAML. Unfortunately the colors of both dark themes do not match:

image

Is there a quick way to make MaterialDesignExtensions use the dark theme colors from MaterialDesignInXAML?

I could probably set the Background and Foreground on the Autocomplete explicitly, but that feels like working around the theming.

This is how I'm loading the styles in my App.xaml:

<Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <mat:BundledTheme BaseTheme="Dark" PrimaryColor="DeepPurple" SecondaryColor="Lime" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/Generic.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignExtensions;component/Themes/Generic.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignExtensions;component/Themes/MaterialDesignDarkTheme.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
bert2 commented 3 years ago

The workaround is the set the Background to MaterialDesignPaper:

<matex:Autocomplete
  Margin="0,16,0,0"
  AutocompleteSource="{Binding}"
  Background="{DynamicResource MaterialDesignPaper}"
  Hint="commit"
  SearchOnInitialFocus="True"
  SelectedItem="{Binding SelectedCommit, Mode=TwoWay}"
  Style="{StaticResource MaterialDesignAutocompleteDense}">
  <matex:Autocomplete.ItemTemplate>
    <DataTemplate DataType="{x:Type local:Commit_}">
      <TextBlock VerticalAlignment="Center">
        <Run FontFamily="Consolas" Text="{Binding ShortSha, Mode=OneWay}" />
        <Run Text="{Binding ShortMessage, Mode=OneWay}" />
      </TextBlock>
    </DataTemplate>
  </matex:Autocomplete.ItemTemplate>
</matex:Autocomplete>
spiegelp commented 3 years ago

@bert2 I use MaterialDesignBackground as background throughout the templates. It looks like that MaterialDesignInXAML tends to use MaterialDesignPaper.

Setting the color via the control's color properties might be a solution, because the templates rely on them with bindings and dynamic resources. Another way is to override MaterialDesignBackground in your App.xaml with the desired color like this:

<SolidColorBrush x:Key="MaterialDesignBackground" Color="{Binding Color, Source={StaticResource MaterialDesignPaper}}" />
bert2 commented 3 years ago

@spiegelp, that works too, thanks!

By the way, thank you for making it so super easy to replace those ugly default window borders šŸ‘