在 WPF 中，如何在窗口焦点部分周围添加边框？

Question

我有一个有两个主要区域的窗口。一个是 ScrollViewer 内的 TextBox，另一个是 TabControl。我想在当前具有焦点的部分周围有一个红色边框，因此我编写了以下代码来执行该

Xaml

<ScrollViewer BorderBrush="Red" 
              BorderThickness="0"
              GotFocus="Border_GotFocus"  
              LostFocus="Border_LostFocus">
    <TextBox/>
</ScrollViewer>
<TabControl BorderBrush="Red" 
            BorderThickness="0"
            GotFocus="Border_GotFocus"  
            LostFocus="Border_LostFocus">
</TabControl>

代码

private void Border_LostFocus(object sender, RoutedEventArgs e)
{
    var control = sender as Control;
    if (control != null)
    {
        control.BorderThickness = new Thickness(0);
    }
}

private void Border_GotFocus(object sender, RoutedEventArgs e)
{
    var control = sender as Control;
    if (control != null)
    {
        control.BorderThickness = new Thickness(2);
    }
}

问题是，如果我单击 TextBox，它不会更新 ScrollViewer 周围的边框。如果我单击 TabControl 中的选项卡，它会更新边框，以便我可以看到边框，但当我单击其他位置时不会“删除”它。有更好的方法来做到这一点吗？

Answer 1

首先，我强烈建议不要使用代码并将其全部保留在 XAML 中。

其次，我还建议使用 Border 来执行此操作。

第三，我会在样式触发器中使用 IsKeyboardFocusedWithin 。

<Window.Resources>
    <Style x:Key="FocusedBorder" TargetType="Border">
        <Setter Property="BorderThickness" Value="2"></Setter>
        <Setter Property="BorderBrush" Value="Transparent"></Setter>
        <Style.Triggers>
            <Trigger Property="IsKeyboardFocusWithin" Value="True">
                <Setter Property="BorderBrush" Value="Red"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<StackPanel Width="400">
    <ScrollViewer>
        <Border Style="{StaticResource FocusedBorder}">
            <TextBox>
            </TextBox>
        </Border>
    </ScrollViewer>
    <TabControl>
        <TabItem Header="Foo">
            <Border Style="{StaticResource FocusedBorder}">
                <TextBox></TextBox>
            </Border>
        </TabItem>
        <TabItem Header="Bar">
            <Border Style="{StaticResource FocusedBorder}">
                <TextBox></TextBox>
            </Border>
        </TabItem>
    </TabControl>
</StackPanel>

Answer 2

接受的答案对我不起作用。然而我找到了一种不使用边框并且仍然获得相同效果的方法。

以下是文本框使用的样式。

<Style x:Key="DefaultTextbox" TargetType="{x:Type TextBox}">
    <Setter Property="FontSize" Value="14" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Margin" Value="5 2 10 2" />
    <Setter Property="FontFamily" Value="Arial" />
    <Setter Property="FontStyle" Value="Normal" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="BorderBrush" Value="Transparent" />
    <Style.Triggers>
        <Trigger Property="IsFocused" Value="True" >
            <Setter Property="BorderBrush" Value="#4E82EC" />
        </Trigger>
    </Style.Triggers>
</Style>

我确实在风格上遇到了一些麻烦。最初我在触发器中声明了边框厚度和颜色。问题是，当框中有文本时，它似乎会跳跃。要避免跳跃效果，请默认声明边框厚度并将边框设置为透明，这样当焦点上的颜色发生变化时，就不会出现跳跃效果。

然后您只需将样式设置为文本框即可：

<TextBox Style="{StaticResource DefaultTextbox}" />

这就是您将看到的效果。