wpf XAML 文本框在焦点上更改边框颜色

XAML textbox change border color on focus

提问by Ben Clarke

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.

我目前遇到的问题是，在“IsFocused”属性上，我能够触发文本框的背景更改，但是当我想更改 BorderBrush 时它不起作用。

            <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.

我刚刚发现当我“右键单击”时它会变成红色？当用户单击文本框时，我希望它变为红色。

回答by Ugur

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>

回答by Dark Templar

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.

步骤 1：以混合方式打开您的项目，因为它更适合设计控件。

Step 2: add a textbox to your page.

第 2 步：将文本框添加到您的页面。

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

第 3 步：右键单击您的文本框并选择：“EditTemplate”\“Edit a Copy...”

this will take you to the template designer stage.

这将带您进入模板设计器阶段。

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

第 4 步：检查此图像：https: //postimg.org/image/ocdn34is1/

回答by Karina K.

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

尝试使用 TextBox 的 GotFocus 和 LostFocus 事件，并从后面的代码中进行。

<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.)

然后，您必须在 YourHandler1 中将边框颜色设置为红色，并在 YourHandler2 中将其设置回默认值。（“发件人”将是您的 TextBox，所以这没什么大不了的。）