WPF how to apply a style to a custom control item without overriding the derived style

user_11522147 0
Viewed 2621

I'm building a custom control search box in wpf based on the common windows search bar (my version). In the windows implementation the buttons would change background and foreground depending on whether they were pressed or not. To do this I'm using a style and triggers to change the button colors.

As I'm using MaterialDesign my custom control contains a button which uses the derived/default material design button. When a style is applied to this button the material design style is overridden in favor for the default wpf button. How can I apply a style while keeping the base material design style?

As my issue is solely with applying a style to a button I have omitted the search box style and instead created an example of my problem containing just a button.

Generic.xaml -CustomButton

 <Style TargetType="{x:Type local:CustomButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:CustomButton}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <!-- Normally the below button would be inside a grid with additional buttons, labels and content presenter. I have removed these for simplicity-->
                        <Button Name="MaterialButton"
                                Content="CustomButton">
                            <Button.Style>
                                <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type  Button}}">
                                    <Style.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Foreground" Value="Red"/>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </Button.Style>
                        </Button>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

App.xaml - (Material Design is in resource dictionary.)

 <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

What I've tried

I've tried using the BasedOn attribute as suggested here and here however this has not resolved my issue.

Deriving from a material style based on the "Material Design theme is lost" FAQ, results in this error: Exception: Cannot find resource named 'MaterialDesignFlatButton'. Resource names are case sensitive.

Generic.Xaml Attempted changes to CustomButton

<!--Same custon control as before--->
<Button.Style>
    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource MaterialDesignFlatButton}">
        <!--same trigger-->
material-design-in-xaml material-design wpf-controls xaml wpf
1 Answers

It looks like you haven't installed the correct dependencies. Right-click on the project which uses the style and choose the NuGet package manager. Search for a MaterialDesignThemes package and install it. If this is already installed, then reinstall it again. This should fix it.

The rest of your approach is correct.

Alternatively copy the original style (snapshot) and all references from the GitHub repository and paste it to your App.xaml.

If all dependencies are installed (or the original style copied), then use the following Style to apply the MaterialDesign default Button style to your CustomButton:

<Style TargetType="local:CustomButton" 
       BasedOn="{StaticResource MaterialDesignFlatButton}" />

Update

Now that you have edited your question to provide the necessary details, I can tell what went wrong.

You have not simply extended Button, but also overridden the default Style of the extended Button. Doing this requires a default Style to be defined inside the Generic.xaml file. This file doesn't allow merged dictionaries due to the way this default resources are resolved. Only references to resources in the same ResourceDictionary of Generic.xaml are allowed.

To solve this problem, you need to override the default Style explicitly. The override Style must be in the scope of the MaterialDesignFlatButton resource, otherwise the reference won't resolve and cause the error message you had posted before. The following example defines the override Stylein App.xaml:

  <Style TargetType="CustomButton" 
         BasedOn="{StaticResource MaterialDesignFlatButton}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
  </Style>
</ResourceDictionary>

Remarks

Since you are obviously not interested in a default Style, you should merge details of this default Style e.g. the ControlTemplate into the override Style. You can then delete the default Style from Generic.xaml. You then also need to remove the following lines from the static constructor of the custom control e.g. CustomButton: 

DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomButton), 
  new FrameworkPropertyMetadata(typeof(CustomButton)));

After merging the now obsolete default Style of CustomButton into the override Style, the new override Style that could look like this:

App.xaml

<Style TargetType="local:CustomButton"
       BasedOn="{StaticResource MaterialDesignFlatButton}">
  <Setter Property="OverridesDefaultStyle" Value="True" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type local:CustomButton}">
        <Border Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}">
          <ContentPresenter />
        </Border>

        <ControlTemplate.Triggers>
          <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Foreground" Value="Red" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
user_31417920
Related