xaml - ControlTemplate のオーバーライド - VisualState MouseOver は MouseClick でのみ実行されます

Question

スクロールバーのデフォルトのテンプレートをオーバーライドしました。それは単に長方形と矢印の絵です。通常状態用とマウスオーバー用の 2 つの画像があります。

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