WPF - How to highlight a combobox border when focused

Question

I trying to create an application combo box theme. However I need the combo box border to change colour when tabbed to. I've tried everything, but I can't seem to get it right.

Any help would be appreciated.

<SolidColorBrush x:Key="NouvemWhiteBrush">White</SolidColorBrush>
<SolidColorBrush x:Key="NouvemSecondaryMainBrush">#FFF58E0F</SolidColorBrush>

<Style TargetType="{x:Type ComboBoxItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                <Grid>
                    <Border x:Name="Border" Background="Transparent">
                        <TextBlock FontSize="12"><InlineUIContainer>
                                <ContentPresenter/>
                            </InlineUIContainer></TextBlock>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsHighlighted" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="{StaticResource NouvemSecondaryMainBrush}"/>
                        <Setter Property="Foreground" Value="White"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


<SolidColorBrush x:Key="ButtonNormalBorder" Color="Black"/>
<Geometry x:Key="DownArrowGeometry">M 0 0 L 3.5 4 L 7 0 Z</Geometry>

<Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}">
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="ClickMode" Value="Press"/>
    <Setter Property="Background" Value="White"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="DarkGray"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">

                <Themes1:ButtonChrome x:Name="Chrome" 
                    BorderBrush="DarkGray"
                    Background="{StaticResource NouvemWhiteBrush}" 
                    RenderPressed="{TemplateBinding IsPressed}" 
                    SnapsToDevicePixels="true">

                    <Grid HorizontalAlignment="Right" 
                        Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
                        <Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}" Fill="Black" HorizontalAlignment="Center" Margin="3,1,0,0" VerticalAlignment="Center"/>
                    </Grid>
                </Themes1:ButtonChrome>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="true">
                        <Setter Property="BorderBrush" Value="{StaticResource NouvemSecondaryMainBrush}"/>
                        <Setter Property="BorderThickness" Value="10"/>
                        <Setter Property="Background" Value="{StaticResource NouvemWhiteBrush}"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter Property="BorderBrush" Value="{StaticResource NouvemSecondaryMainBrush}"/>
                        <Setter Property="BorderThickness" Value="10"/>
                        <Setter Property="Background" Value="{StaticResource NouvemWhiteBrush}"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF"/>
                    </Trigger>
                    <Trigger Property="IsFocused" Value="true">
                        <Setter Property="BorderBrush" Value="{StaticResource NouvemSecondaryMainBrush}"/>
                        <Setter Property="BorderThickness" Value="10"/>
                        <Setter Property="Background" Value="{StaticResource NouvemWhiteBrush}"/>
                    </Trigger>
                     <Trigger Property="IsEnabled" Value="True">
                        <Setter Property="BorderBrush" Value="{StaticResource NouvemSecondaryMainBrush}"/>
                        <Setter Property="BorderThickness" Value="10"/>
                        <Setter Property="Background" Value="{StaticResource NouvemWhiteBrush}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>




<Style  TargetType="{x:Type ComboBox}">
    <Setter Property="Height" Value="25"/>
    <Setter Property="Width" Value="Auto"/>
    <Setter Property="Margin" Value="0,0,0,8"/>
    <Setter Property="IsEditable" Value="False"/>
    <Setter Property="Focusable" Value="True"/>
    <Setter Property="Background" Value="{StaticResource NouvemWhiteBrush}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
    <Setter Property="BorderBrush" Value="DarkGray" />
    <Setter Property="BorderThickness" Value="0.8"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="Padding" Value="4,3"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBox}">
                <Grid x:Name="MainGrid" SnapsToDevicePixels="true">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
                    </Grid.ColumnDefinitions>
                    <Popup x:Name="PART_Popup" 
                           AllowsTransparency="true" 
                           Grid.ColumnSpan="2" 
                           IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" 
                           Margin="1" 
                           PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" 
                           Placement="Bottom">
                        <Themes1:SystemDropShadowChrome x:Name="Shdw" Color="Transparent" 
                            MaxHeight="{TemplateBinding MaxDropDownHeight}" 
                            MinWidth="{Binding ActualWidth, ElementName=MainGrid}">
                            <Border x:Name="DropDownBorder" 
                                BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" 
                                BorderThickness="1" 
                                Background="White">
                                <ScrollViewer x:Name="DropDownScrollViewer">
                                    <Grid RenderOptions.ClearTypeHint="Enabled">
                                        <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                            <Rectangle 
                                                x:Name="OpaqueRect" 
                                                Fill="{Binding Background, ElementName=DropDownBorder}" 
                                                Height="{Binding ActualHeight, ElementName=DropDownBorder}" 
                                                Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
                                        </Canvas>
                                        <ItemsPresenter 
                                            x:Name="ItemsPresenter"
                                            KeyboardNavigation.DirectionalNavigation="Contained" 
                                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                    </Grid>
                                </ScrollViewer>
                            </Border>
                        </Themes1:SystemDropShadowChrome>
                    </Popup>
                    <ToggleButton BorderBrush="White" 

                        Grid.ColumnSpan="2" 
                        IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 
                        Style="{StaticResource ComboBoxReadonlyToggleButton}"/>
                    <ContentPresenter ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" 
                        ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" 
                        Content="{TemplateBinding SelectionBoxItem}" 
                        ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" 
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        IsHitTestVisible="false" 
                        Margin="{TemplateBinding Padding}" 
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
                <ControlTemplate.Triggers >
                    <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
                        <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
                        <Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="{StaticResource NouvemWhiteBrush}"/>
                    </Trigger>

                    <Trigger Property="HasItems" Value="false">
                        <Setter Property="Height" TargetName="DropDownBorder" Value="95"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        <Setter Property="Background" Value="#FFF4F4F4"/>

                    </Trigger>
                    <Trigger Property="Selector.IsSelected" Value="True">
                        <Setter Property="Background" Value="{StaticResource NouvemWhiteBrush}"/>
                    </Trigger>

                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsGrouping" Value="true"/>
                            <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                    </MultiTrigger>
                    <Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false">
                        <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/>
                        <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/>
                    </Trigger>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter Property="BorderBrush" Value="{StaticResource NouvemSecondaryMainBrush}"/>
                        <Setter Property="BorderThickness" Value="1"/>
                        <Setter Property="Background" Value="{StaticResource NouvemWhiteBrush}"/>
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

Write your own style to highlight border and add as resource in FocusVisualStyle of Combobox.