How to display the text cursor/caret when a textbox is focused in wpf?

Question

To be clear: My TextBox is already focused when my SignupWindow loads. My problem here is that the text cursor/caret doesn't show up unless I click my textbox (I think this will be a UI issue).

I already focus my TextBox at the Window level:

<Window x:Name="this"
        x:Class="Project.MVVM.Views.Windows.SignupWindow"
        <!-- some namespaces and properties here-->
        FocusManager.FocusedElement="{Binding ElementName=UsernameTextBox}">

My TextBox:

<TextBox x:Name="UsernameTextBox"
            Grid.Row="2"
            Width="303"
            Height="38"
            Text="{Binding Path=CurrentAccount.Username}"
            Style="{StaticResource TextBoxTheme}" />

This is what it looks like when the page loads:

The image above, doesn't show the text cursor/caret. I know that my TextBox is Focused because I can type in it:

The problem here is that, the text cursor/caret only shows when I click on the TextBox:

Here is how I style my textbox (if in case this is relevant to the issue):

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="{x:Type TextBox}"
           x:Key="TextBoxTheme">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Border CornerRadius="12"
                            Background="#2E3135"
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}">
                        <TextBox Text="{Binding Path=Text,
                                                RelativeSource={RelativeSource Mode=TemplatedParent},
                                                UpdateSourceTrigger=PropertyChanged,
                                                Mode=TwoWay}"
                                 BorderThickness="0"
                                 VerticalContentAlignment="Center"
                                 Padding="20,0,20,0"
                                 Background="Transparent"
                                 Foreground="#B8BDC1"
                                 CaretBrush="#B8BDC1" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

How about setting the focus from code behind on window_loaded event? Give us a try and let us know. — G K
@GK it focuses, but, unfortunately, the text cursor/caret still doesn't display... — JD Dalmao

emoacht emoacht · Accepted Answer · 2021-05-30T11:41:34

You defined TextBox inside TextBox and I guess you expected the inner TextBox to be focused when the window is shown but actually, the outer TextBox is focused.

I think nesting TextBox is not impossible but the source of trouble. Why don't you define a Style which is orthodox but has the same appearance?

<Style x:Key="TextBoxTheme" TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="#B8BDC1"/>
    <Setter Property="CaretBrush" Value="#B8BDC1"/>
    <Setter Property="Padding" Value="20,0,20,0"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Border CornerRadius="12"
                        Background="#2E3135">
                    <ScrollViewer x:Name="PART_ContentHost"
                                  Focusable="false"
                                  HorizontalScrollBarVisibility="Hidden"
                                  VerticalScrollBarVisibility="Hidden"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

How to display the text cursor/caret when a textbox is focused in wpf?

2 Answers