CODEWITHSUNDEEP
wpfxamltextbox
Ben Clarke
Ben Clarke

Reputation: 1061

XAML textbox change border color on focus

Issue

The issue I am currently having is that on the 'IsFocused' property I am able to Trigger the background for the textbox to change but when I want to change the BorderBrush it does not work.

            <TextBox Padding="2" FontFamily="Sans Serif" Foreground="Red" FontSize="10px" FontWeight="Medium" Width="200" BorderThickness="2" VerticalAlignment="Center">
            <TextBox.Resources>
                <Style TargetType="{x:Type Border}">
                    <Setter Property="CornerRadius" Value="2"/>
                </Style>
            </TextBox.Resources>
            <TextBox.Style>
                <Style TargetType="{x:Type TextBox}">
                    <Setter Property="BorderBrush" Value="#858585"/>
                    <Style.Triggers>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter Property="BorderBrush" Value="Red" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TextBox.Style>
        </TextBox>

Can anyone see a reason why this would not work?

EDIT

I have just discovered that when I 'Right-Click' it changes to Red? I want it to change to red when the user clicks on the textbox.

Upvotes: 3

Views: 12733

Answers (3)

Ugur
Ugur

Reputation: 1256

try to use that code

        <TextBox 

                 Padding="2"  FontFamily="Sans Serif" 
                 Foreground="Red" FontSize="10px"
                 FontWeight="Medium" Width="200"  
                 VerticalAlignment="Center">


            <TextBox.Style>

                <Style BasedOn="{x:Null}" TargetType="{x:Type TextBox}">
                    <Setter Property="BorderThickness" Value="2"/>
                    <Setter Property="Padding" Value="1"/>
                    <Setter Property="AllowDrop" Value="true"/>
                    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TextBox}">
                                <Border x:Name="bg" BorderBrush="#FF825E5E" BorderThickness="1">
                                    <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                </Border>
                                <ControlTemplate.Triggers>

                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="BorderBrush" TargetName="bg" Value="Red"/>
                                        <Setter Property="BorderThickness" TargetName="bg" Value="2"/>
                                    </Trigger>

                                    <Trigger Property="IsFocused" Value="True">
                                        <Setter Property="BorderBrush" TargetName="bg" Value="Red"/>
                                        <Setter Property="BorderThickness" TargetName="bg" Value="2"/>
                                    </Trigger>


                                    <Trigger Property="IsFocused" Value="False">
                                        <Setter Property="BorderBrush" TargetName="bg" Value="#858585"/>
                                        <Setter Property="BorderThickness" TargetName="bg" Value="2"/>
                                    </Trigger>

                                    <Trigger Property="IsMouseOver" Value="False">
                                        <Setter Property="BorderBrush" TargetName="bg" Value="#858585"/>
                                        <Setter Property="BorderThickness" TargetName="bg" Value="2"/>
                                    </Trigger>

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

            </TextBox.Style>
       </TextBox>

Upvotes: 6

Karina K.
Karina K.

Reputation: 190

Try using the GotFocus and LostFocus events of the TextBox and do it from code behind.

<TextBox x:Name="txtBox" ...
             GotFocus="YourHandler1" LostFocus="YourHandler2"> ... </TextBox>

You'd then have to set the border color to red in YourHandler1 and set it back to default in YourHandler2. (The 'sender' would be your TextBox, so that's no big deal.)

Upvotes: 0

Dark Templar
Dark Templar

Reputation: 1155

This is caused by Visual state triggers implanted inside the textbox style itself, they override any trigger you would add, to change the color of the border you will have to change the style, it is quite simple just follow these steps:

Step 1: open your project in blend as it is better suited to design controls.

Step 2: add a textbox to your page.

Step 3: right click on your textbox and pick : "EditTemplate" \ "Edit a Copy..."

this will take you to the template designer stage.

Step 4: check this image: https://postimg.org/image/ocdn34is1/

Upvotes: 1

Related Questions