textbox border not setting correctly on focus - WPF - wpf

Question

I have a custom textbox I created in Expression Blend for WPF and I am trying to get the focus states to work correctly. When i tab into the textbox, the Focused part of the style works (and the border changes); however, if I do not have focus in the textbox and I click the textbox, it is not applying the style. If i click around the edges of the textbox (in the border part), it will set correctly. For some reason my scrollviewer is not firing off the focus event correctly.
Below is my style:
<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

Try this.may be this might be helpfull to you.thank you.
<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

Personally, I never use Blend or the designer window in Visual Studio, because they change the code in ways that I would not. I always write the XAML, so I know exactly what's going on. When I define a new ControlTemplate for a control, I always follow these simple steps and I've never had any problems.
First, find the default ControlTemplate from the TextBox Styles and Templates page on MSDN.
Next, add a Style for the TextBox that sets the Template property to a new ControlTemplate and copy and paste the whole default ControlTemplate in there.
You'll probably need to copy over some resources from the linked page too... basically for this step, get the TextBox control looking and behaving as normal.
Finally, tweak your ControlTemplate however you want, but always in small steps, so that you can keep checking that you haven't removed anything that might break some functionality.
That's it. You should now have a completely working custom TextBox now. Good luck.