Binding In WPF Style Not Working - wpf

Question

WPF 4.5
Can someone please take the below default style for ComboBox and show me how to change it so that I can set a BorderBrush color (or resource brush) via Style setter at the top "ComboBox" level...and then have that same color to flow all the way down to the BorderBrush property of the Border named "Border" within the ToggleButton template with key "ComboBoxToggleButton"?
THANKS!!!
<!--##########-->
<!--ComboBox-->
<!--##########-->
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" Grid.ColumnSpan="2" CornerRadius="2,2,2,2" Background="{StaticResource FlowWhiteBrush}" BorderThickness="3,3,3,3" />
<Border Grid.Column="0" CornerRadius="2,0,0,2" Margin="3,3,3,3" Background="{StaticResource FlowWhiteBrush}" />
<Canvas x:Name="canDownArrow" Width="13" Height="13" HorizontalAlignment="Right" Margin="0,0,-19,0">
<Polygon Fill="{StaticResource FlowBlackBrush}">
<Polygon.Points>
<Point X="1" Y="1" />
<Point X="13" Y="1" />
<Point X="7" Y="13" />
</Polygon.Points>
</Polygon>
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Control.IsEnabled" Value="False">
<Setter TargetName="Border" Property="Opacity" Value="0.5"/>
<Setter TargetName="canDownArrow" Property="Opacity" Value="0.35"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource FlowMediumGrayBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource FlowMediumGrayBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource FlowMediumGrayBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource FlowMediumGrayBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Padding="0,3,0,3" Focusable="False" Background="{TemplateBinding Background}" IsEnabled="{TemplateBinding IsEnabled}" />
</ControlTemplate>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="BorderBrush" Value="Green" /><!-- GREEN DOES NOT MAKE IT DOWN TO ComboBoxToggleButton BorderBrush -->
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="IsEditable" Value="False" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock FontSize="18" FontWeight="SemiBold" Text="{Binding}" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton x:Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2" FocusVisualStyle="{x:Null}" ClickMode="Press" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
<ContentPresenter x:Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="6,4,36,5" VerticalAlignment="Center" HorizontalAlignment="Left"></ContentPresenter>
<TextBox x:Name="PART_EditableTextBox" TextBlock.FontSize="18" TextBlock.FontWeight="SemiBold" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="6,4,36,5" Focusable="True" Background="{TemplateBinding Background}" IsEnabled="{TemplateBinding IsEnabled}" IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">
<Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" BorderThickness="3,3,3,3" BorderBrush="{StaticResource FlowMediumGrayBrush}" Background="{StaticResource FlowWhiteBrush}" />
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEditable" Value="False">
<Setter TargetName="PART_EditableTextBox" Property="IsEnabled" Value="False" />
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="PART_EditableTextBox" Property="Opacity" Value="0.5" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
<Trigger SourceName="Popup" Property="AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4" />
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border MinHeight="32" x:Name="Border" Padding="2,2,2,2" SnapsToDevicePixels="True" Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected" />
<VisualState x:Name="SelectedUnfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource FlowLightGrayBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource FlowLightGrayBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 1

Try this.I have added BorderBrush binding in Toggle button Template like this.
<Border x:Name="Border" BorderBrush="{Binding BorderBrush,RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Grid.ColumnSpan="2" CornerRadius="2,2,2,2" Background="{StaticResource FlowWhiteBrush}" BorderThickness="3,3,3,3" />
<Window.Resources>
<SolidColorBrush x:Key="FlowBlackBrush" Color="Black"></SolidColorBrush>
<SolidColorBrush x:Key="FlowWhiteBrush" Color="White"></SolidColorBrush>
<SolidColorBrush x:Key="FlowMediumGrayBrush" Color="DarkGray"></SolidColorBrush>
<SolidColorBrush x:Key="FlowLightGrayBrush" Color="LightGray"></SolidColorBrush>
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" BorderBrush="{Binding BorderBrush,RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Grid.ColumnSpan="2" CornerRadius="2,2,2,2" Background="{StaticResource FlowWhiteBrush}" BorderThickness="3,3,3,3" />
<Border Grid.Column="0" CornerRadius="2,0,0,2" Margin="3,3,3,3" Background="{StaticResource FlowWhiteBrush}" />
<Canvas x:Name="canDownArrow" Width="13" Height="13" HorizontalAlignment="Right" Margin="0,0,-19,0">
<Polygon Fill="{StaticResource FlowBlackBrush}">
<Polygon.Points>
<Point X="1" Y="1" />
<Point X="13" Y="1" />
<Point X="7" Y="13" />
</Polygon.Points>
</Polygon>
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Control.IsEnabled" Value="False">
<Setter TargetName="Border" Property="Opacity" Value="0.5"/>
<Setter TargetName="canDownArrow" Property="Opacity" Value="0.35"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource FlowMediumGrayBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource FlowMediumGrayBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource FlowMediumGrayBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource FlowMediumGrayBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Padding="0,3,0,3" Focusable="False" Background="{TemplateBinding Background}" IsEnabled="{TemplateBinding IsEnabled}" />
</ControlTemplate>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="BorderBrush" Value="Green" />
<!-- GREEN DOES NOT MAKE IT DOWN TO ComboBoxToggleButton BorderBrush -->
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="IsEditable" Value="False" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock FontSize="18" FontWeight="SemiBold" Text="{Binding}" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton x:Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2" FocusVisualStyle="{x:Null}" ClickMode="Press" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
<ContentPresenter x:Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="6,4,36,5" VerticalAlignment="Center" HorizontalAlignment="Left"></ContentPresenter>
<TextBox x:Name="PART_EditableTextBox" TextBlock.FontSize="18" TextBlock.FontWeight="SemiBold" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="6,4,36,5" Focusable="True" Background="{TemplateBinding Background}" IsEnabled="{TemplateBinding IsEnabled}" IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">
<Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" BorderThickness="3,3,3,3" BorderBrush="{StaticResource FlowMediumGrayBrush}" Background="{StaticResource FlowWhiteBrush}" />
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEditable" Value="False">
<Setter TargetName="PART_EditableTextBox" Property="IsEnabled" Value="False" />
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="PART_EditableTextBox" Property="Opacity" Value="0.5" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
<Trigger SourceName="Popup" Property="AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4" />
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border MinHeight="32" x:Name="Border" Padding="2,2,2,2" SnapsToDevicePixels="True" Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected" />
<VisualState x:Name="SelectedUnfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource FlowLightGrayBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource FlowLightGrayBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<ComboBox Width="200" Height="30"></ComboBox>