Состояние MouseOver для элемента Border

Question

На моей странице есть элемент Border, который содержит некоторые элементы TextBlock, содержащиеся в сетке, например (упрощенно):

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

У меня определен следующий стиль:

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

Как бы я добавил VisualStateGroup (или что-то подобное) к стилю, чтобы изменить прозрачность при наведении мыши?Я не могу заставить его работать для элемента Border, есть ли причина для этого?

Answer 1

VSM будет работать только внутри ControlTemplate. Вот в чем причина. Там нет шаблона, поэтому вы не можете заставить его работать.

Кроме того, вы можете использовать EventTriggers. Как ниже.

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