TextBox malfunctioning on style - wpf

Question

I'm using the following style on my wpf TextBox.
<Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid x:Name="Root">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3">
<VisualTransition.GeneratedEasingFunction>
<QuarticEase EasingMode="EaseOut"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="DarkGray" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
<VisualState x:Name="ReadOnly"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidUnfocused"/>
<VisualState x:Name="InvalidFocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1" BorderBrush="Gray">
<ScrollViewer x:Name="ContentElement" BorderThickness="0" IsTabStop="False" VerticalContentAlignment="Center" Padding="5,0,0,0" VerticalAlignment="Center" Margin="0,0,22,0"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
On using this style the textbox stops working. If i click on the textbox the mouse pointer disappears, no focus or text appears. What is wrong with this style?

Answer 1

Rename your scrollbox, and it will work
<ScrollViewer x:Name="PART_ContentHost" BorderThickness="0" IsTabStop="False" VerticalContentAlignment="Center" Padding="5,0,0,0" VerticalAlignment="Center" Margin="0,0,22,0"/>
hope this helps

Answer 2

It seems your Xaml did not provide a place for interaction with the keyboard/mouse. I'm not alltogether sure what you are trying to design, but if you place a TextBox inside your ScrollViewer, your template will stop exhibiting the 'malfunction' you are describing...
<Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="Gray" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1">
<ScrollViewer x:Name="ContentElement" Margin="0,0,22,0" Padding="5,0,0,0" BorderThickness="0" IsTabStop="False" VerticalAlignment="Center" VerticalContentAlignment="Center">
<TextBox />
</ScrollViewer>
</Border>
This snippet shows a modification to your Xaml where the ScrollViewer contains a TextBox. The MouseDown event sets focus on the control, and keyboard interaction occurs as expected.