Change WPF Combobox arrow using a data trigger - wpf

Question

I am using a multi-select combobox that I found on CodeProject [http://www.codeproject.com/Articles/563862/Multi-Select-ComboBox-in-WPF].
I am attempting to change the shape of the arrow depending on whether or not all of the items are selected. However I have been unable to correctly reference the x:Name of Arrow in the setter.
Here is the code I've been trying to modify:
<UserControl x:Class="Z_Sys_UI.System.MultiSelectComboBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" >
<ComboBox
x:Name="MultiSelectCombo"
SnapsToDevicePixels="True"
OverridesDefaultStyle="True"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True"
IsSynchronizedWithCurrentItem="True"
>
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Title}"
IsChecked="{Binding Path=IsSelected, Mode=TwoWay}"
Tag="{RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}"
Click="CheckBox_Click" />
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBox.Template>
<ControlTemplate TargetType="ComboBox">
<Grid >
<ToggleButton
x:Name="ToggleButton"
Grid.Column="2" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
Focusable="false"
ClickMode="Press" HorizontalContentAlignment="Left" >
<ToggleButton.Template>
<ControlTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="18"/>
</Grid.ColumnDefinitions>
<Border
x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="2"
Background="White"
BorderBrush="Black"
BorderThickness="1,1,1,1" />
<Border
x:Name="BorderComp"
Grid.Column="0"
CornerRadius="2"
Margin="1"
Background="White"
BorderBrush="Black"
BorderThickness="0,0,0,0" >
<TextBlock Text="{Binding Path=Text,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"
Background="White" Padding="3" />
</Border>
<Path
x:Name="Arrow"
Grid.Column="1"
Fill="Black"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z">
</Path>
</Grid>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<Popup
Name="Popup"
Placement="Bottom"
AllowsTransparency="True"
Focusable="False" IsOpen="{TemplateBinding IsDropDownOpen}"
PopupAnimation="Slide">
<Grid
Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border
x:Name="DropDownBorder"
BorderThickness="1" Background="White"
BorderBrush="Black"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True" DataContext="{Binding}">
<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 SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
</Trigger>
<DataTrigger Binding="{Binding Path=SelectAll, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=UserControl}}" Value="false" >
<Setter TargetName="Arrow" Property="Data" Value="M 0 0 L 2 2 L 8 0 Z" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ComboBox.Template>
</ComboBox>
Right now it is giving errors that say The name Arrow is not recognized, and the member Data is not recognized or is not accessible.
It's also possible that the SelectAll path that I'm trying to trigger off of does not work either. The CodeProject code didn't seem to have that property fully implemented. I'll deal with that possibility later.
Thanks in advance for any answers or suggestions.

Answer 1

The name Arrow is out of scope in the ComboBox ControlTemplate, because it's defined in the ToggleButton ControlTemplate. The solution turns out to be easy: Just put the trigger in the template where the target control is in scope.
<ToggleButton.Template>
<ControlTemplate>
<Grid>
<!-- snip snip snip -->
<!-- snip snip snip -->
<!-- snip snip snip -->
<Path
x:Name="Arrow"
Grid.Column="1"
Fill="Black"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
>
</Path>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger
Binding="{Binding Path=SelectAll, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=UserControl}}"
Value="false" >
<Setter
TargetName="Arrow"
Property="Data"
Value="M 0 0 L 2 2 L 8 0 Z"
/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
I'm assuming that SelectAll is a boolean dependency property, and a member of MultiSelectComboBox, because that seems to be implied by what you're doing with it. Here's my dependency property definition:
public static readonly DependencyProperty SelectAllProperty =
DependencyProperty.Register("SelectAll", typeof(bool), typeof(MultiSelectComboBox),
new PropertyMetadata(false));
And here's the test XAML I used:
<StackPanel
Orientation="Vertical"
>
<CheckBox Content="SelectAll" x:Name="SelectAllCheckBox" />
<local:MultiSelectComboBox
SelectAll="{Binding IsChecked, ElementName=SelectAllCheckBox}" />
</StackPanel>