MouseOver state for Border element

Question

I have a Border element on my page that contains some TextBlock elements contained in a grid, e.g. (simplified):

<Border Style="{StaticResource borderStyle}">
  <Grid Background="Transparent">
    <Grid.RowDefinitions>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Something" Grid.Column="0" Grid.Row="0" />
    <TextBlock Text="Something else" Grid.Column="1" Grid.Row="0" />
  </Grid>
</Border>

I have the following style defined:

<Style x:Key="borderStyle" TargetType="Border">
  <Setter Property="CornerRadius" Value="0,0,15,15"/>
  <Setter Property="Background" Value="Black"/>
  <Setter Property="Opacity" Value="0.6"/>
</Style>

How would I add a VisualStateGroup (or something similar) to the style to change the opacity on mouseover? I can't seem to get it working for a Border element, is there a reason for this?

Answer 1

VSM will work inside ControlTemplate alone. Thats the reason. There is no template there that is the reason you are not able to get it working.

Alternatively, you can use EventTriggers. Like below.

<Grid x:Name="LayoutRoot" Background="White">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0">
                        <Storyboard/>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="MouseOverState">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>3</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border x:Name="border" BorderBrush="Black" BorderThickness="1" Height="143" Margin="164,79,191,0" VerticalAlignment="Top">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseEnter">
                    <ei:GoToStateAction StateName="MouseOverState" TargetObject="{Binding ElementName=userControl}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Border>
    </Grid>