重写ControlTemplate - VisualState MouseOver仅在MouseClick上执行

Question

我已覆盖滚动条的默认模板。它只是一个矩形和一个箭头图片。我有2张图片，一张为普通状态，另一张为MouseOver。

在我的VisualStates中，我更改了MouseOver上的图像可见性。

当我现在使用鼠标over滚动条时，它什么都不做，但是当我click图像时它正在从NormalPicture变为HoverPicture。

我做错了什么？

ScrollBarStyle:

<Style x:Key="ScrollBarStyle" TargetType="ScrollBar">
   <Setter Property="IsTabStop" Value="False"/>
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="ScrollBar">
             <Grid x:Name="Root">
                 <VisualStateManager.VisualStateGroups>
                     <VisualStateGroup x:Name="CommonStates">
                         <VisualState x:Name="Normal"/>
                         <VisualState x:Name="MouseOver">
                             <Storyboard>
                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NormalState">
                                     <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                           <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                     </DiscreteObjectKeyFrame>
                                 </ObjectAnimationUsingKeyFrames>
                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="HoverState">
                                     <DiscreteObjectKeyFrame KeyTime="0">
                                         <DiscreteObjectKeyFrame.Value>
                                             <Visibility>Visible</Visibility>
                                         </DiscreteObjectKeyFrame.Value>
                                     </DiscreteObjectKeyFrame>
                                  </ObjectAnimationUsingKeyFrames>
                             </Storyboard>
                         </VisualState>
                         <VisualState x:Name="Disabled">
                             <Storyboard>
                                 <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
                             </Storyboard>
                         </VisualState>
                     </VisualStateGroup>
                  </VisualStateManager.VisualStateGroups>
                  <Grid x:Name="VerticalRoot">
                      <Grid.ColumnDefinitions>
                          <ColumnDefinition/>
                      </Grid.ColumnDefinitions>
                      <Rectangle Stroke="#00000000" StrokeThickness="1" Fill="Black" />
                      <Image x:Name="NormalState" Source="/SlDragDropTest;component/Images/ArrowUpNormal.png"></Image>
                      <Image x:Name="HoverState" Source="/SlDragDropTest;component/Images/ArrowUpHover.png" Visibility="Collapsed"></Image>
                  </Grid>
               </Grid>
         </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>