ComboBox is Focused change Border-CodePudding

Can someone help me get this Combobox to change the borderthickness when IsFocus=True?

I've tried several different things in the past two hours but can't seem to get it to work.

I know I have to set the triggers...

            <Style.Triggers>
            <Trigger Property="IsFocused" Value="True">
                <Setter Property="BorderThickness" Value="2,2,2,2"/>
                <Setter Property="Foreground" Value="White"/>
            </Trigger>
        </Style.Triggers>

But can't seem to figure out where to set them.

Also ignore the colors. they are all set at run time or upon user change.

Any help would be greatly appreciated.

     <SolidColorBrush x:Name="BrushCBForeGround" x:Key="KeyBrushCBForeGround" Color="Orange"/>
    <SolidColorBrush x:Name="BrushCBBorder" x:Key="KeyBrushCBBorder" Color="orange"/>
    <SolidColorBrush x:Name="BrushCBBorderBG" x:Key="KeyBrushCBBorderBG" Color="Orange"/>
    <SolidColorBrush x:Name="BrushCBBG" x:Key="KeyBrushCBBG" Color="Purple"/>
    <SolidColorBrush x:Name="BrushCBHighlightBG" x:Key="KeyBrushCBHighlightBG" Color="Pink"/>
    <SolidColorBrush x:Name="BrushCBHighlightFore" x:Key="KeyBrushCBHighlightFore" Color="DarkBlue"/>
    <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="20" />
            </Grid.ColumnDefinitions>
            <Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="6" Background="{DynamicResource KeyBrushCBBorderBG}" BorderBrush="{DynamicResource KeyBrushCBBorder}" BorderThickness="0" />
            <Border Grid.Column="0" CornerRadius="4"  Margin="1"  Background="{DynamicResource KeyBrushCBBorderBG}" BorderBrush="{DynamicResource KeyBrushCBBorder}" BorderThickness="0,1,0,1" />
            <Path  x:Name="Arrow" Grid.Column="1" Fill="{DynamicResource KeyBrushButtonForeground}"  HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" Stroke="{DynamicResource KeyBrushCBForeGround}"/>
        </Grid>
    </ControlTemplate>
    <ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
        <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
    </ControlTemplate>
    <Style TargetType="{x:Type ComboBox}">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
        <Setter Property="MinWidth" Value="120"/>
        <Setter Property="MinHeight" Value="20"/>
        <Setter Property="Foreground" Value="{DynamicResource KeyBrushCBForeGround}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">
                    <Grid>
                        <ToggleButton Name="ToggleButton"  Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2" Focusable="false"
                                      IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press">
                        </ToggleButton>
                        <ContentPresenter Name="ContentSite" IsHitTestVisible="False"  Content="{TemplateBinding SelectionBoxItem}"
                                          ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                          Margin="8,3,23,3" VerticalAlignment="Center" HorizontalAlignment="Left" />
                        <TextBox x:Name="PART_EditableTextBox" Style="{x:Null}"  Template="{StaticResource ComboBoxTextBox}"  HorizontalAlignment="Left" 
                                 VerticalAlignment="Center" Margin="15,3,23,3" Focusable="True"  Background="Purple" Foreground="Green" Visibility="Hidden"
                                 IsReadOnly="{TemplateBinding IsReadOnly}" />
                        <Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True"  Focusable="False" PopupAnimation="Scroll">
                            <Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                <Border  x:Name="DropDownBorder" Background="{DynamicResource KeyBrushCBBG}" BorderThickness="1,2,1,2"  BorderBrush="{DynamicResource KeyBrushCBBorder}"/>
                                <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                </ScrollViewer>
                            </Grid>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
                            <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="8"/>
                            <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>


        <Style.Triggers>
            <Trigger Property="IsFocused" Value="True">
                <Setter Property="BorderThickness" Value="2,2,2,2"/>
                <Setter Property="Foreground" Value="White"/>
            </Trigger>
        </Style.Triggers>


    </Style>
    <!-- SimpleStyles: ComboBoxItem -->
    <Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="Foreground" Value="{DynamicResource KeyBrushCBForeGround}"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                    <Border Name="Border" Padding="2" SnapsToDevicePixels="true">
                        <ContentPresenter />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsHighlighted" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="{DynamicResource KeyBrushCBHighlightBG}"/>
                            <Setter Property="Foreground" Value="{DynamicResource KeyBrushCBHighlightFore}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource KeyBrushCBHighlightFore}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

CodePudding user response：

You must modify the ToggleButton template. The ToggleButton is responsible for the border. You have currently set the BorderThickness to a fixed value. Simply bind it to the parent ComboBox:

<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>

        <!-- The outer border enclosing the complete ComboBox -->
        <Border x:Name="Border" 
                Grid.ColumnSpan="2" CornerRadius="6" 
                Background="{DynamicResource KeyBrushCBBorderBG}" BorderBrush="{DynamicResource KeyBrushCBBorder}" 
                BorderThickness="{Binding RelativeSource={RelativeSource AncestorType=ComboBox}, Path=BorderThickness}" />

        <!-- The inner border enclosing the TextBox -->
        <Border Grid.Column="0" CornerRadius="4"  Margin="1"  Background="{DynamicResource KeyBrushCBBorderBG}" BorderBrush="{DynamicResource KeyBrushCBBorder}" BorderThickness="0,1,0,1" />

        <Path  x:Name="Arrow" Grid.Column="1" Fill="{DynamicResource KeyBrushButtonForeground}"  HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" Stroke="{DynamicResource KeyBrushCBForeGround}"/>
    </Grid>
</ControlTemplate>

Bind other properties like BorderBrush and other propertries you want to control from the ComboBox element the same way.