Border style for TextBox doesn't show up at editable ComboBox in WPF

Question

I've made a nice border around a textbox using a style. Notice the border, which I've simply named "Border", below . It works fine when the textbox receives the focus as specified in the IsFocused-Trigger:

<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource ErrorTemplate}">

    <Setter Property="KeyboardNavigation.TabNavigation" Value="None" />
    <Setter Property="AllowDrop" Value="true" />
    <Setter Property="Background" Value="Transparent"></Setter>
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="FontFamily" Value="Segoe UI" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="Padding" Value="3,3,3,3" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="SnapsToDevicePixels" Value="True" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Border 
                        Name="Border"
                        CornerRadius="4" 
                        Padding="0"
                        Background="{StaticResource WindowBackgroundBrush}"
                        BorderBrush="{StaticResource SolidBorderBrush}"
                        BorderThickness="1,1,1.4,1.4" >
                    <ScrollViewer Margin="0" x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter TargetName="Border" Property="BorderThickness" Value="1.4,1.4,1.8,1.8"></Setter>
                    </Trigger>
                    <Trigger Property="IsReadOnly" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}"/>
                    </Trigger>
                    <Trigger Property="Validation.HasError" Value="true">
                        <Setter Property="ToolTip"
                                Value="{Binding RelativeSource={RelativeSource Self}, 
                                Path=(Validation.Errors).CurrentItem.ErrorContent}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Now I wanted to apply the same border style at a combobox. I've read that editable comboboxes make a bit of trouble, and I saw that it is recommended to use IsKeyboardFocusWithin instead of IsFocused. When I do that, I can e.g.trigger a dropshadow effect. That works.

But my little border doesn't want to.

I've put the same Border definition as above in the Grid part below the ControlTemplate dealing with the type ComboBox and then hoped that I could make the border appear around the combobox. The targetname is obviously recognized, but still it doesn't show up...

                    <Trigger Property="IsKeyboardFocusWithin" Value="true">
                        <Setter TargetName="Border" Property="BorderThickness" Value="1.4,1.4,1.8,1.8"></Setter>
                    </Trigger>

What's wrong with the code? And: Can the definition of the border be put into an own style that can be referenced easily be it textbox or combobox (as there seems to be an issue with referencing the correct targetname)?

Any help would be appreciated!

my note is probably too late, but this is interesting puzzle; it took me a few different tries to get it to work. If still curious, check out my post (I stripped most of the styling to keep it simple) — denis morozov

denis morozov denis morozov · Accepted Answer · 2012-04-04T15:40:04

Copy/Paste/Run this: (I know the style's are exaggerated and incomplete, but the purpose is to show that you can do it, relatively simply...and to give you ideas, and point out that when the needed properties are missing, you can always trigger on the event too)

I put a stack panel with a few textBlocks there just so when you run it you can click different them vs. the combobox to see the triggers at work.

Might be obvious, but not that if you want to add triggers for Border thickness, make sure you increase the Combo Margin by the same amount.

<StackPanel>
    <TextBox>sfddf</TextBox>

    <Control>
        <Control.Template>
            <ControlTemplate>
                <Grid>
                    <Border x:Name="Border" BorderBrush="Green" BorderThickness="3"/>
                    <ComboBox x:Name="Combo" BorderThickness="0" BorderBrush="Transparent" Margin="3"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <EventTrigger SourceName="Combo" RoutedEvent="Control.GotFocus">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush.Color" From="Green" To="Red" Duration="0:0:0.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger SourceName="Combo" RoutedEvent="Control.LostFocus">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush.Color" From="Red" To="Green" Duration="0:0:0.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Control.Template>
    </Control>

    <TextBox>sdfsdfsd</TextBox>
</StackPanel>

Border style for TextBox doesn't show up at editable ComboBox in WPF

1 Answers