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>

Border元素的MouseOver状态

1 个答案: