How to override ComboBox ToggleButton from Material Design for XAML?

790 Views Asked by At

I'm new in WPF. I have an issue with overriding MaterialDesignComboBoxToggleButton style. I wanna to replace "Template" setter with own, but my content from control template always ignores. Why this occurred? With other styles i haven't this problem.

Bellow code demonstrates what i need.

Overriedes.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ComboBox.xaml" />
</ResourceDictionary.MergedDictionaries>

<Style BasedOn="{StaticResource MaterialDesignComboBoxToggleButton}" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <TextBlock FontSize="50" FontWeight="Bold">$$</TextBlock>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

App.xaml

<Application x:Class="Wpf.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         
         xmlns:local="clr-Wpf" xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
         StartupUri="Views/MainWindow.xaml">
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <materialDesign:CustomColorTheme BaseTheme="Light" PrimaryColor="#FFD8E1FF" SecondaryColor="#FFD8E1FF" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            <ResourceDictionary Source="/Overrides.xaml" />
        </ResourceDictionary.MergedDictionaries>
        
    </ResourceDictionary>
</Application.Resources>
2

There are 2 best solutions below

4
AmRo On

Add the same resource key to your custom style like this:

<Style 
    x:Key="MaterialDesignComboBoxToggleButton"
    BasedOn="{StaticResource MaterialDesignComboBoxToggleButton}" 
    TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <TextBlock FontSize="50" FontWeight="Bold">$$</TextBlock>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and you don't need to add resources like this in Overrides.xaml file:

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

because the MDIX resources already included by MaterialDesignTheme.Defaults.xaml that you added in App.xaml file.

0
da jowkar On

In my case override style in window not working ,but when I tried in App.xml then it works. I changed the style for toggle button by another style . the code is :

  <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Themes/IG/IG.MSControls.Core.Implicit.xaml" />
                <ResourceDictionary Source="Themes/IG/IG.MSControls.Toolkit.Implicit.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml" />

            </ResourceDictionary.MergedDictionaries>

            <Style TargetType="{x:Type ToggleButton}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Border CornerRadius="8" BorderBrush="{TemplateBinding BorderBrush}" 
                                Background="{TemplateBinding Background}">
                                <ContentPresenter HorizontalAlignment="Center"                  
                                              VerticalAlignment="Center"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Background" Value="#FF0F0F4B" />
                        <Setter Property="Foreground" Value="White" />
                    </Trigger>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter Property="Background" Value="#FF73ADDE" />
                        <Setter Property="Foreground" Value="#FF150404" />
                    </Trigger>
                </Style.Triggers>
            </Style>




        </ResourceDictionary>
    </Application.Resources>