I am trying to get the following PointerOver VisualState to work. Ideally when the mouse pointer is over the button, I want to highlight the button with a black border.
I have been trying various ways to make this work, please help.
Note: If I set the BorderColor value of the BorderHighlight, Border element, I get the border desired, but not when I made it as part of the 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>
.
.
.
I snipped the extraneous code to keep the question short and to the point, but this all compile, just not getting the result desired. I could also use 2 rectangles (one smaller than the other), but would like to make it work with actual border.
Additionally what would be the difference between targeting:
<ColorAnimation From="Transparent" To="Black"
Storyboard.TargetName="ButtonHighlight"
Storyboard.TargetProperty="BorderBrush.(SolidColorBrush.Color)"
Duration="0:0:1"></ColorAnimation>
and
<ColorAnimation From="Transparent" To="Black"
Storyboard.TargetName="ButtonHighlight"
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
Duration="0:0:1"></ColorAnimation>
