WPF TextBox Style Customization: CaretBrush Disappeared After Trigger Setup

StreamingMoon 20 Reputation points
2024-10-06T11:49:55.66+00:00

Seeking assistance with customizing the style properties of a TextBox in WPF:

  • Background: MouseOver #505050 & not MouseOver #303030
  • Foreground: #FFFFFF
  • BorderBrush: MouseOver #868686 & not MouseOver #666666
  • CaretBrush

Despite setting up triggers for the styles, the caret appears as the default blue color instead of the specified color.

Here is the code used:

<Style TargetType="TextBox">
    <Setter Property="CaretBrush" Value="#505050" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Border
                    Name="border"
                    Background="{TemplateBinding Background}"
                    BorderBrush="#666666"
                    BorderThickness="1"
                    CornerRadius="5">

                    <ScrollViewer
                        Margin="0"
                        HorizontalScrollBarVisibility="Disabled"
                        VerticalScrollBarVisibility="Disabled">
                        <TextBlock
                            Margin="2,0,2,0"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Center"
                            FontSize="15"
                            Foreground="{TemplateBinding Foreground}"
                            Text="{Binding Path=Text, RelativeSource={RelativeSource TemplatedParent}}" />
                    </ScrollViewer>

                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter Property="CaretBrush" Value="#505050" />
                        <Setter TargetName="border" Property="Background" Value="#303030" />
                        <Setter Property="Foreground" Value="#FFFFFF" />
                        <Setter TargetName="border" Property="BorderBrush" Value="#666666" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="CaretBrush" Value="#505050" />
                        <Setter TargetName="border" Property="Background" Value="#505050" />
                        <Setter Property="Foreground" Value="#FFFFFF" />
                        <Setter TargetName="border" Property="BorderBrush" Value="#868686" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

While the Background, Foreground, and BorderBrush are functioning correctly, the caret DISAPPEARED. Any suggestions on how to resolve this issue?

Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,804 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
11,152 questions
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
824 questions
0 comments No comments
{count} votes

Accepted answer
  1. Hongrui Yu-MSFT 3,645 Reputation points Microsoft Vendor
    2024-10-07T02:50:30.4833333+00:00

    Hi,@StreamingMoon. Welcome to Microsoft Q&A. 

    Reason:CaretBrush is a property of TextBoxBase, and TextBlock does not inherit TextBoxBase, so it does not have a CaretBrush property.

    Solution: Adjust code

    <ScrollViewer
          Margin="0"
          HorizontalScrollBarVisibility="Disabled"
          VerticalScrollBarVisibility="Disabled">
                <TextBlock
                   Margin="2,0,2,0"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Center"
                   FontSize="15"
                   Foreground="{TemplateBinding Foreground}"
                   Text="{Binding Path=Text, RelativeSource={RelativeSource TemplatedParent}}" />
    </ScrollViewer> 
    

    To

    <ScrollViewer 
    	x:Name="PART_ContentHost" 
    	Margin="2,0,2,0" 
    	HorizontalAlignment="Left" 
    	VerticalAlignment="Center" 
    	FontSize="15" 
    	Foreground="{TemplateBinding Foreground}"
    	HorizontalScrollBarVisibility="Disabled" 
    	VerticalScrollBarVisibility="Disabled">
    </ScrollViewer>
    

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.
    0 comments No comments

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.