How to target elements in nested ControlTemplates

Question

In the style for my custom combobox I want to change the Background property of the Border element in the ToggleButton's ControlTemplate when the ComboBox.IsEditable property is set to true but am running into this error targeting the Border:

Cannot find the Trigger target. (The target must appear before any Setters, Triggers, or Conditions that use it.)

Things I've tried:

• Targeting the Border by it's name: TargetName="Border"
• Targeting the Border as a child of the ToggleButton: TargetName="ToggleButton.Border"

The only information I can find online says:

TargetName operates only within the one ControlTemplate section

But I'm not sure if this is relevant to my situation since the ToggleButtons's ControlTemplate is a child of my custom combobox's ControlTemplate.

Style (irrelevant code removed for brevity)

<Style x:Key="{x:Type local:CustomComboBox}" TargetType="{x:Type local:CustomComboBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomComboBox}">
                <Grid>
                    <ToggleButton x:Name="ToggleButton" Focusable="False" ClickMode="Press"
                                  VerticalContentAlignment="Center"
                                  IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                        <ToggleButton.Template>
                            <ControlTemplate TargetType="{x:Type ToggleButton}">
                                <Grid>
                                    <Border x:Name="Border" Grid.ColumnSpan="2"
                                            Background="{Binding Background, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:CustomComboBox}}"/>
                                </Grid>
                            </ControlTemplate>
                        </ToggleButton.Template>
                    </ToggleButton>                 
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="ComboBox.IsEditable" Value="True">
                        <Setter Property="Background" TargetName="ToggleButton.Border" Value="Green"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

Instead of setting a value on a nested template, do it the other way around, bind the IsEditable property of the parent CustomComboBox in the nested template via a relative source binding. Use a DataTrigger to set the color of the Border to Green in case the property is True.

<Style x:Key="{x:Type local:CustomComboBox}" TargetType="{x:Type local:CustomComboBox}">
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type local:CustomComboBox}">
            <Grid>
               <ToggleButton x:Name="ToggleButton" Focusable="False" ClickMode="Press"
                             VerticalContentAlignment="Center"
                             IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                  <ToggleButton.Template>
                     <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Grid>
                           <Border x:Name="Border" Grid.ColumnSpan="2"
                                   Background="{Binding Background, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:CustomComboBox}}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                           <DataTrigger Binding="{Binding IsEditable, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:CustomComboBox}}" Value="True">
                              <Setter TargetName="Border" Property="Background" Value="Green"/>
                           </DataTrigger>
                        </ControlTemplate.Triggers>
                     </ControlTemplate>
                  </ToggleButton.Template>
               </ToggleButton>                 
            </Grid>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>