Почему моя кнопка XAML PointerOver VisualState не работает?

Question

Я пытаюсь получить следующие PointerOver VisualState для работы. В идеале, когда указатель мыши находится над кнопкой, я хочу выделить кнопку с черной рамкой.

Я пробовал различные способы сделать эту работу, пожалуйста, помогите.

Примечание: Если я установил значение BorderColor элемента BorderHighlight, Border, я получаю желаемую границу, но не тогда, когда я сделал это как часть VisualState.

<Style x:Key="SecondaryButton" TargetType="Button"> 
    <Setter Property="Background" Value="LightSkyBlue"></Setter> 
    <Setter Property="Foreground" Value="Black"></Setter> 
    <Setter Property="Padding" Value="5"></Setter> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Border Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="ButtonHighlight" BorderThickness="2" BorderBrush="Transparent"> 
        <Grid> 
         <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch" Stroke="Transparent" 
            StrokeThickness="20" Fill="{TemplateBinding Background}" 
            RadiusX="15" RadiusY="15" /> 

          <ContentPresenter x:Name="Text" Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal"> 
             <Storyboard> 
              <ColorAnimation From="Transparent" To="Black" Storyboard.TargetName="Text" Storyboard.TargetProperty="(Button.Foreground).(SolidColorBrush.Color)" BeginTime="0" Duration="1"></ColorAnimation> 
              <ColorAnimation From="Transparent" To="LightSkyBlue" Storyboard.TargetName="Text" Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" BeginTime="0" Duration="1"></ColorAnimation> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="PointerOver"> 
             <Storyboard> 
              <ColorAnimation From="Transparent" To="Black" Storyboard.TargetName="ButtonHighlight" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Duration="0:0:1"></ColorAnimation> 
             </Storyboard> 
              . 
              . 
              . 

Я отрезала посторонний код, чтобы держать этот вопрос коротко и точки, но все это скомпилировать, просто не получают желаемого результата. Я мог бы также использовать 2 прямоугольника (один меньше, чем другой), но хотел бы, чтобы он работал с фактической границей.

Кроме того, что будет разница между таргетингом:

<ColorAnimation From="Transparent" To="Black" 
    Storyboard.TargetName="ButtonHighlight" 
    Storyboard.TargetProperty="BorderBrush.(SolidColorBrush.Color)"   
    Duration="0:0:1"></ColorAnimation> 

и

<ColorAnimation From="Transparent" To="Black" 
    Storyboard.TargetName="ButtonHighlight" 
    Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" 
    Duration="0:0:1"></ColorAnimation> 

Answer 1

VisualState называется "MouseOver", а не "PointerOver"