开发者

MouseOver state for Border element

开发者 https://www.devze.com 2023-01-15 07:21 出处:网络
I have a Border element on my page that contains some TextBlock elements contained in a grid, e.g. (simplified):

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?


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

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号