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

Question

Hi I had a Grid like this:

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

Now it appears like

When the MouseOver on the Image or TextBlock it should appear like this:

I have so many individual grids like this in my project which contains Image and TextBlock for all the grids i need to implement the same style.

But i cant able to find how to make visible the arrow image (name arrow) and rectangle(name fill) to visible when the mouse over on the image(cat image) or TextBlock . I want to do it styles. I had already had storyboard like this.

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

But i dont know where to implement this storyboard. Can any one please help me to find the solution.

Answer 1

我个人以前没有在样式中实现情节提要，但是从其他文章中我可以肯定，您需要使用样式的<Triggers>并将Trigger for IsMouseOver设置为IsMouseOver 。

Answer 2

You can achieve this by using DataTriggers, but you have to remove Storyboard.TargetName=something in your ShowFillStoryBoard .

Using DataTriggers to start a Storyboard:

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

Apply this style on which image should be animated: Style="{DynamicResource ResourceKey=MouseOverImageStyle}"