WPF template overridden when custom style applied

Question

I have a global style defined for a combobox in app.xaml as below:

<Style x:Key="{x:Type ComboBox}" TargetType="ComboBox">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    <Setter Property="MinHeight" Value="20"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <Grid Width="{TemplateBinding Width}">
                    <ToggleButton 
                                        Name="ToggleButton" 
                                        Template="{StaticResource ComboBoxToggleButton}" 
                                        Grid.Column="2" 
                                        Focusable="false"
                                        IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                                        ClickMode="Press">
                    </ToggleButton>
                    <ContentPresenter
                                        Name="ContentSite"
                                        IsHitTestVisible="False" 
                                        Content="{TemplateBinding SelectionBoxItem}"
                                        ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                                        ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                        Margin="3,3,23,3"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Left" />
                    <TextBox x:Name="PART_EditableTextBox"
                                        Style="{x:Null}" 
                                        Template="{StaticResource ComboBoxTextBox}" 
                                        HorizontalAlignment="Left" 
                                        VerticalAlignment="Center" 
                                        Margin="3,3,23,3"
                                        Focusable="True" 
                                        Background="Transparent"
                                        Visibility="Hidden"
                                        IsReadOnly="{TemplateBinding IsReadOnly}"/>
                    <Popup 
                                        Name="Popup"
                                        Placement="Bottom"
                                        IsOpen="{TemplateBinding IsDropDownOpen}"
                                        AllowsTransparency="True" 
                                        Focusable="False"
                                        PopupAnimation="Slide">
                        <Grid 
                                            Name="DropDown"
                                            SnapsToDevicePixels="True"                
                                            MinWidth="{TemplateBinding ActualWidth}"
                                            MaxHeight="{TemplateBinding MaxDropDownHeight}">
                            <Border x:Name="DropDownBorder" Background="{StaticResource BackgroundBrush}" />
                            <ScrollViewer Margin="4,4,4,4" SnapsToDevicePixels="True" Style="{StaticResource DropDownScrollViewer}">
                                <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasItems" Value="false">
                        <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                    </Trigger>
                    <Trigger Property="IsGrouping" Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                    </Trigger>
                    <Trigger Property="IsEditable" Value="true">
                        <Setter Property="IsTabStop" Value="false"/>
                        <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Then I create a combobox in a control:

<ComboBox Name="DataTypeSelector" ItemsSource="{Binding ElementName=DataItemsBuildWindow, Path=DataContext.Types}" SelectedValue="{Binding DataType}" HorizontalAlignment="Stretch" />                                      

The style is applied as expected.

If I change my combobox in the control to the below, the combobox goes back to its original style and the width and triggers defined work. It seems that the new global style is ignored.

<ComboBox Name="DataTypeSelector" ItemsSource="{Binding ElementName=DataItemsBuildWindow, Path=DataContext.Types}" SelectedValue="{Binding DataType}" HorizontalAlignment="Stretch">
                                    <ComboBox.Style>
                                        <Style TargetType="ComboBox">
                                            <Setter Property="Width" Value="160"></Setter>
                                            <Style.Triggers>
                                                <DataTrigger Value="List" Binding="{Binding SelectedValue, ElementName=DataTypeSelector, Converter={StaticResource ToStringConverter}}">
                                                    <Setter Property="Width" Value="80" />
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </ComboBox.Style>
                                </ComboBox>

How can I keep the global style but also apply the custom triggers?

Answer 1

You have to base the new style on the existing default style:

<ComboBox.Style>
    <Style TargetType="ComboBox"
           BasedOn="{StaticResource ResourceKey={x:Type ComboBox}}">
        ...
    </Style>
</ComboBox.Style>

---

By the way, it is not necessary to set the key of the default style in the resource dictionary in App.xaml. If you specify TargetType="ComboBox" the key is set to that type by default. So this is sufficient:

<Style TargetType="ComboBox">
    ...
</Style>