WPF combobox itemtemplate overrides togglebutton style

Question

i have problem with styling the combobox's togglebutton. my combobox xaml code looks like this:

<ComboBox Width="Auto"
      HorizontalContentAlignment="Stretch"
      FontFamily="HelveticaNeue-Bold"
      FontSize="20"
      FontWeight="Bold"
      Foreground="#FFC0C0C0"
      Padding="0,0,0,0"
      Style="{DynamicResource navigationComboBox}"
      ItemsSource="{Binding Tournaments}"
      SelectedValue="{Binding SelectedTournament}">
<ComboBox.Resources>
    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
</ComboBox.Resources>
<ComboBox.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel IsItemsHost="True" 
                    Orientation="Vertical" 
                    Width="auto"
                    Height="{Binding Tournaments, Converter={StaticResource CollectionToHeightConverter}}"/>
    </ItemsPanelTemplate>
</ComboBox.ItemsPanel>
<ComboBox.ItemTemplate>
    <DataTemplate>
        <DockPanel x:Name="comboDock">
            <DockPanel.Background>
                <ImageBrush ImageSource="{Binding Converter={StaticResource ImagePathConverter}, ConverterParameter=comboboxitem-line.png}" />
            </DockPanel.Background>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="50" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="41" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <DockPanel x:Name="comboArrow"
                            Grid.Column="0"
                            Visibility="Collapsed">
                    <DockPanel.Background>
                        <ImageBrush ImageSource="{Binding Converter={StaticResource ImagePathConverter}, ConverterParameter=SportsSubMenuActive.png}" />
                    </DockPanel.Background>
                </DockPanel>
                <TextBlock x:Name="comboText"
                            Grid.Column="1"
                            FontFamily="HelveticaNeue-Bold"
                            FontSize="20"
                            FontWeight="Bold"
                            Foreground="#FFC0C0C0"
                            Padding="0,0,10,0"
                            Text="{Binding Path=Name}"
                            TextAlignment="Left"
                            TextWrapping="Wrap" />
            </Grid>
        </DockPanel>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ComboBoxItem}}" Value="True">
                <Setter TargetName="comboArrow" Property="Visibility" Value="Visible" />
                <Setter TargetName="comboText" Property="Foreground" Value="#F94B01" />
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</ComboBox.ItemTemplate>

so i'm trying to remove the background set to on togglebutton, but it is not possible. if i remove the background on itemtemplate, then i can style the toggle button background. is there any special order in the process to prevent me from changing the background of the togglebutton content if it is set in itemtemplate?

thanks in advance guys, Kristo

Answer 1

Setting a property directly takes priority over any Setter(s) . Instead of setting the property directly, use a Style for your DockPanel and use a Setter to set the background similar to what you do in your DataTrigger . That should allow you to change the background property elsewhere.