鼠标悬停在文本块上时显示图像，wpf

Question

您好我有Grid这样：

<Grid Margin="0,1,0,0" Height="35" VerticalAlignment="Top" HorizontalAlignment="Left" Width="158">
    <Grid x:Name="MainGrid" Height="35" Background="#00FFFFFF" Margin="0,1.5,0,-1.5" d:LayoutOverrides="VerticalMargin">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="35" />
            <ColumnDefinition Width="1" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Rectangle Fill="#FFFFFFFF" StrokeThickness="0" />
        <Image Height="35" Width="35" VerticalAlignment="Stretch" Style="{StaticResource GithHubImage}" HorizontalAlignment="Stretch" Margin="0" Source="/Images/computer.png" />

        <Rectangle Fill="#FFFFFFFF" Grid.Column="1" StrokeThickness="0" />

        <Grid x:Name="Wrapper" Visibility="Visible" Grid.Column="3">
            <Rectangle x:Name="Fill" Visibility="Collapsed" Width="12" Fill="#FFDDDDDD" HorizontalAlignment="Left" Margin="40,0,0,0" d:LayoutOverrides="Width" />
                <Grid x:Name="Arrow" Visibility="Collapsed" Margin="0,0,27,0">
                    <Image Width="10" Height="20" HorizontalAlignment="Right" RenderTransformOrigin="0.5,0.5">
                        <Image.RenderTransform>
                            <TransformGroup>
                                <RotateTransform Angle="180" />
                            </TransformGroup>
                        </Image.RenderTransform>

                        <Image.Source>
                            <DrawingImage>
                                <DrawingImage.Drawing>
                                    <GeometryDrawing Brush="{DynamicResource GitHubAccentBrush}" Geometry="M897.41,613.924L887.08,624.255 887.08,603.594 897.41,613.924z" />
                                </DrawingImage.Drawing>
                            </DrawingImage>
                        </Image.Source>
                    </Image>
              </Grid>
         </Grid>

         <TextBlock x:Name="Login" Grid.Column="3" Margin="7,0,0,0" VerticalAlignment="Center"  Text="swethapilli"  Height="25.976" />
    </Grid>
    <Rectangle Height="1" VerticalAlignment="Bottom" Fill="#FFFFFFFF" StrokeThickness="0" />
</Grid>

现在看起来像

当MouseOver或Image上的TextBlock显示如下：

我的项目中有很多这样的网格，包含Image和TextBlock，用于实现相同样式所需的所有网格。

但是当鼠标悬停在图像（猫图像）或TextBlock上时，我无法找到如何使箭头图像（名称箭头）和矩形（名称填充）可见。我想做它的风格。我已经有了这样的故事板。

<Storyboard x:Key="ShowFillStoryBoard">
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Fill">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
    </ObjectAnimationUsingKeyFrames>

    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Arrow">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

<Storyboard x:Key="HideFillStoryBoard">
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Fill">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />

        <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}" />
    </ObjectAnimationUsingKeyFrames>

    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Arrow">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />

        <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}" />
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

但我不知道在哪里实现这个故事板。任何人都可以帮我找到解决方案。

Answer 1

我个人之前没有在样式中实现过故事板，但我非常肯定通过阅读其他帖子，您需要使用样式<Triggers>并为Trigger设置IsMouseOver到你的故事板。

Answer 2

您可以使用DataTriggers实现此目的，但您必须删除Storyboard.TargetName=something中的ShowFillStoryBoard。

使用DataTriggers启动故事板：

    <Style x:Key="MouseOverImageStyle" TargetType="Image">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=textBlockName}" Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard x:Name="StartStoryboardBegin" Storyboard="{StaticResource ResourceKey=ShowFillStoryBoard}"></BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <RemoveStoryboard BeginStoryboardName="StartStoryboardBegin"></RemoveStoryboard>
                </DataTrigger.ExitActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>

将此图案应用于应设置动画的图片：Style="{DynamicResource ResourceKey=MouseOverImageStyle}"