显示图像时，鼠标悬停在文字块，WPF

您好我有一个Grid这样的：显示图像时，鼠标悬停在文字块，WPF

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

现在看来像 enter image description here

当MouseOver在它应该出现这样的Image或TextBlock：

enter image description here

我有这么多的个人电网LIK在我的项目中，包含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>

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

来源

2012-12-18 Swetha Bindu

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

使用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}"

来源

2012-12-18 12:21:02

我个人还没有在样式中实现故事板，但我很确定从阅读其他帖子开始，您需要使用样式的<Triggers>并将Trigger设置为IsMouseOver到故事板。

来源

2012-12-18 10:51:16 JosephGarrone

显示图像时，鼠标悬停在文字块，WPF

回答

相关问题