文本框边框未在焦点上正确设置 - WPF

Question

我有一个在 WPF 表达式混合中创建的自定义文本框，我正在尝试使焦点状态正常工作。当我按 tab 键进入文本框时，样式的焦点部分有效(边框会发生变化);但是，如果我在文本框中没有焦点并单击文本框，则它不会应用样式。如果我单击文本框的边缘(在边框部分)，它将正确设置。由于某种原因，我的滚动查看器没有正确触发焦点事件。

以下是我的风格：

<Style x:Key="TextBoxDark" TargetType="{x:Type TextBox}">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="#FF171717" />
<Setter Property="Background" Value="#FF212121" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid x:Name="grid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="0.395"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ReadOnly">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="scrollViewer">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#FF0B5A8F"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer x:Name="scrollViewer" Margin="{TemplateBinding Padding}" Foreground="{TemplateBinding Foreground}"
ToolTipService.ToolTip="{TemplateBinding Text}" VerticalScrollBarVisibility="Hidden" Content="{TemplateBinding Text}" VerticalAlignment="Center"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" Value="#FF007ACC"/>
<Setter Property="BorderThickness" Value="1"/>
</Trigger>
</Style.Triggers>
</Style>

Answer 1

试试这个。也许这对你有帮助。谢谢。

<Window.Resources>
<Style x:Key="TextBoxDark" TargetType="TextBox">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="#FF171717" />
<Setter Property="Background" Value="#FF212121" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Border Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer  Margin="{TemplateBinding Padding}" VerticalScrollBarVisibility="Hidden" ToolTipService.ToolTip="{TemplateBinding Text}" x:Name="PART_ContentHost" Foreground="{TemplateBinding Foreground}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="Border" Property="BorderBrush" Value="#FF007ACC"/>
<Setter TargetName="Border" Property="BorderThickness" Value="1"/>
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter TargetName="Border" Property="BorderBrush" Value="#FF007ACC"/>
<Setter TargetName="Border" Property="BorderThickness" Value="1"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="BorderBrush" Value="#FF0B5A8F"/>
<Setter TargetName="Border" Property="BorderThickness" Value="1"/>
</Trigger>
<Trigger Property="IsReadOnly" Value="True">
<Setter TargetName="PART_ContentHost"  Property="Opacity" Value="0.5"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="BorderBrush" Value="#FF171717"/>
<Setter TargetName="Border" Property="BorderThickness" Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TextBox Style="{StaticResource TextBoxDark}" Foreground="Red" Height="35" Width="100"></TextBox>

Answer 2

就个人而言，我从不使用Visual Studio 中的Blend或设计器窗口，因为它们以我不会的方式更改代码。我总是编写 XAML，所以我确切地知道发生了什么。当我为控件定义新ControlTemplate时，我总是遵循这些简单的步骤，并且从未遇到任何问题。

1. 首先，从 MSDN 上的"文本框样式和模板"页中找到默认ControlTemplate。

2. 接下来，为将Template属性设置为新ControlTemplate的TextBox添加一个Style，并将整个默认ControlTemplate复制并粘贴到其中。

3. 您可能还需要从链接页面复制一些资源......基本上，对于此步骤，让TextBox控件的外观和行为正常。

最后，根据需要

4. 调整ControlTemplate，但始终采用小步骤，以便您可以继续检查是否没有删除任何可能破坏某些功能的内容。

就是这样。您现在应该有一个完全有效的自定义TextBox。祝你好运。