WPF Combobox Style not binding property

Question

In my WPF project I have this ComboBox style:

<Style x:Key="ComboBoxTextBoxStyle" TargetType="{x:Type TextBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Grid>
                        <Border CornerRadius="5,0,0,5"
                            
                            Background="{TemplateBinding Background}"
                                >
                            <ScrollViewer x:Name="PART_ContentHost"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="comboboxitem" TargetType="ComboBoxItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBoxItem">
                    <Border CornerRadius="3" Height="30" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                        <ContentPresenter VerticalAlignment="Center"/>
                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" >
                                <Setter.Value>
                                    <SolidColorBrush Color="{DynamicResource BackgroundColour}"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>



    <Style x:Key="combobox" TargetType="{x:Type ComboBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition MaxWidth="18"/>
                        </Grid.ColumnDefinitions>
                        <TextBox Background="{TemplateBinding Background}" Name="PART_EditableTextBox" IsReadOnly="{TemplateBinding IsReadOnly}" FontSize="{TemplateBinding FontSize}" Style="{StaticResource ComboBoxTextBoxStyle}" Foreground="White" VerticalAlignment="Center" Height="{TemplateBinding Height}"/>
                        <ToggleButton Grid.Column="1" Background="{TemplateBinding Background}" Margin="0" Height="{TemplateBinding Height}" Focusable="False" Foreground="White" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press">
                            <ToggleButton.Template>
                                <ControlTemplate>
                                    <Border BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="0 5 5 0">
                                        <Border.Background>
                                            <SolidColorBrush Color="{TemplateBinding Background}"/>
                                        </Border.Background>
                                        <Path Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z" Fill="#DF464B" />
                                    </Border>
                                </ControlTemplate>
                            </ToggleButton.Template>

                        </ToggleButton>
                        <ContentPresenter Name="ContentSite"
                                      Content="{TemplateBinding SelectionBoxItem}"
                                      ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                                      ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                      VerticalAlignment="Center"
                                      HorizontalAlignment="Left"
                                      Margin="5,0,0,0"/>
                        <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"
                                    BorderThickness="1"
                                    CornerRadius="0 0 5 5"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="#DF464B"/>
                                <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained">

                                    </StackPanel>
                                </ScrollViewer>
                            </Grid>
                        </Popup>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

But on the arrow dropdown part (styled as a border) I try and set the Background property to bind to the template's property using <SolidColorBrush Color="{TemplateBinding Background}"/> but it won't work. I'm guessing it has something to do with the fact that it is trying to get the Background from the actual border instead of when I am calling the Combobox like this:<Combobox Style="combobox" Background="DesiredBackground"/>. How can I make it so that it binds to the correct Background?

Answer 1

You should bind the Border's Background property, not the Color, to ComboBox Background property.

It works with "TemplateBinding" as well, but then you are binding to the ToggleButton and not to the ComboBox. But since the ToggleButton is getting its Background from ComboBox it will work anyway.

   <Border BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="0 5 5 0"
           Background="{Binding Background, RelativeSource={RelativeSource FindAncestor, AncestorType=ComboBox}}">