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>

There is no Border property in ToggleButton. Anyways, in this case, you don't need TargetName="ToggleButton.Border". — emoacht
@emoacht Border is the name of the Border element in the ToggleButton's ControlTemplate. Please explain how I change the Background property of the Border element without targeting it in the trigger? — Andronomos
If TargetName is not given, the target will be local:CustomComboBox itself. And you set a binding between Border.Background of "Border" and local:CustomComboBox.Background. Accordingly, this trigger will change local:CustomComboBox.Background and then the value will be reflected to Border.Background of "Border". That's it. — emoacht

thatguy thatguy · Accepted Answer · 2021-04-06T14:05:54

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>

How to target elements in nested ControlTemplates

1 Answers