In WPF how do you put a border around the part of a window that has focus?

I have a Window th开发者_JAVA百科at has two primary areas. One is a TextBox inside of a ScrollViewer and the other is a TabControl. I want to have a red border around the part that currently has focus, so I wrote the following code to do that

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>

Code

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);
    }
}

The problem is that if I click on the TextBox it does not update the border around the ScrollViewer. If I click on a Tab in the TabControl it updates the border so that I can see the border, but doesn't "remove" it when I click somewhere else. Is there some better way to do this?

First off, I'd highly recommend not using code and keeping this all in XAML.

Secondly, I'd also recommend using a Border to do this.

Third, I'd use IsKeyboardFocusedWithin in your style trigger.

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

The accepted answer did not work for me. However I figured out a way without using a border and still getting the same effect.

Below is the style used for the text box.

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

I did run into some trouble with the style. Originally I declared the border thickness and the color in the Trigger. The problem with that is when there was text in the box it seemed to jump. To get around jumping effect is to declare a border thickness by default and set the border to transparent so when the color is changed on the focus there is not a jumping effect.

Then you just have to set the style to your textbox:

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

And this is the effect you will see.