How to make a custom control follow the current “theme/style” on WPF?

Question

I'm trying to use: Modern UI for WPF and Extended WPF Toolkit , more specifically IntegerUpDown , and the problem is, the IntegerUpDown don't follow the selected ModernUI theme. It's clearer when we changed it to dark theme, the IntegerUpDown stays with white background.

First, I try something like...

<Style TargetType="{x:Type local:IntegerUpDown}" BasedOn="{StaticResource {x:Type TextBox}}" />

...but in runtime I get the exception "Can only base on a Style with target type that is base type 'IntegerUpDown'." I understand it, in the end IntegerUpDown is a "composite" control, not directly derived from Textbox...

So, I don't know how I do. In my research, I found that files that can be relevant:

• NumericUpDown Theme File on WPF ToolKit
• Style for Button on ModernUI

BUT I'm not a XAML expert to tie the 2 informations to get a solution OR if there is another some simple solution that I cannot see...

Thanks for any help.

Answer 1

As you have noticed, when dealing with Custom Controls you'll often need to do some custom styling to reconfigure the layout. It all depends how far you want to take it, but to give you an idea I believe the workflow below should fix the backgroundcolor.

The backgroundcolor is bound to Xceed's resource themes, snippet from Wpf Toolkit :

<Style x:Key="NumericUpDown" TargetType="{x:Type prim:InputBase}">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
        <Setter Property="Background" Value="{DynamicResource {x:Static themes:ResourceKeys.ControlNormalBackgroundKey}}" />
        <Setter Property="BorderBrush" Value="{DynamicResource {x:Static themes:ResourceKeys.ControlNormalBorderKey}}" />
</Style>

The ModernUI Style (following the chosen theme) for these properties folows eg ModernUI TextBox :

<Style TargetType="{x:Type TextBoxBase}">
        <Setter Property="Foreground" Value="{DynamicResource InputText}"/>
        <Setter Property="Background" Value="{DynamicResource InputBackground}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource InputBorder}"/>
</Style>

The DynamicResources are found in the theme file, for example ModernUI.Dark.xaml

<SolidColorBrush x:Key="InputText" Color="#d1d1d1" />

<SolidColorBrush x:Key="InputBackground" Color="#333333" />
<SolidColorBrush x:Key="InputBackgroundHover" Color="#3e3e42" />
<SolidColorBrush x:Key="InputBorder" Color="#333333" />

You can now hard code them in your Style, making them fixed on 1 theme

<Style TargetType="{x:Type local:IntegerUpDown}">
      <Setter Property="Foreground" Value="#d1d1d1" />
      <Setter Property="Background" Value="#333333" />
      <Setter Property="BorderBrush" Value="#333333" />
</Style>

For extensive styling you'll need to put in more work, for example this post adresses restyling the Watermark property.