顯示圖像時，鼠標懸停在文字塊，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

回答

相關問題