兒童WPF鼠標懸停觸發效果控件

Question

可以說我有這段代碼：

<Window> 
    <Window.Resources> 
     <Color x:Key="MyColor" 
       A="255" 
       R="152" 
       G="152" 
       B="152" /> 
     <DropShadowEffect x:Key="MyEffect" 
          ShadowDepth="0" 
          Color="{StaticResource MyColor}" 
          BlurRadius="10" /> 
     <Style x:Key="MyGridStyle" 
       TargetType="{x:Type Grid}"> 
      <Setter Property="Height" 
        Value="200" /> 
      <Setter Property="Width" 
        Value="200" /> 
      <Style.Resources> 
       <Style TargetType="{x:Type TextBlock}"> 
        <Setter Property="Width" 
          Value="100" /> 
       </Style> 
       <Style TargetType="{x:Type Image}"> 
        <Setter Property="Height" 
          Value="100" /> 
        <Setter Property="Width" 
          Value="100" /> 
       </Style> 
      </Style.Resources> 
      <Style.Triggers> 
       <Trigger Property="IsMouseOver" 
         Value="true"> 
        <!-- How do I apply my effect when this grid is hovered over to Image and TextBox, but not the grid itself? --> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Window.Resources> 
    <Grid Style="{StaticResource MyGridStyle}"> 
     <Grid.RowDefinitions> 
      <RowDefinition /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 
     <Image Grid.Row="0" 
       Grid.Column="0" 
       Source="image.png" /> 
     <TextBlock Grid.Row="0" 
        Grid.Column="0" 
        Text="Hover Over Me" /> 
    </Grid> 
</Window> 

基本上我有應用於說其中的任何的TextBlock或圖片應款式到一定規模的網格樣式。

我想在網格上創建一個觸發器，該觸發器會將效果應用於網格中的所有TextBlocks和圖像，但不會應用到網格本身。

我可以將觸發器直接應用於TextBlock和/或圖像，但是這種效果只發生在每個元素上。我需要在網格中的任何TextBlock和/或圖像上產生效果，儘管我將其內部的子元素懸停在其上。

任何人都可以幫助我嗎？

Answer 1

你可以反過來做。也就是說，將DataTriggers添加到Image和TextBlock，並使它們在IsMouseOver上觸發，作爲祖先Grid。

注：如果你想要這個效果儘快鼠標在觸發Grid，你將需要設置Background的值，如Transparent。默認情況下，Background爲null，此值不用於命中測試。

<Style x:Key="MyGridStyle" TargetType="{x:Type Grid}"> 
    <!--<Setter Property="Background" Value="Transparent"/>--> 
    <Setter Property="Height" Value="200" /> 
    <Setter Property="Width" Value="200" /> 
    <Style.Resources> 
     <Style TargetType="{x:Type TextBlock}"> 
      <Setter Property="Width" Value="200" /> 
      <Style.Triggers> 
       <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid}, 
               Path=IsMouseOver}" Value="True"> 
        <Setter Property="Effect" Value="{StaticResource MyEffect}"/> 
       </DataTrigger> 
      </Style.Triggers> 
     </Style> 
     <Style TargetType="{x:Type Image}"> 
      <Setter Property="Height" Value="200" /> 
      <Setter Property="Width" Value="200" /> 
      <Style.Triggers> 
       <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid}, 
               Path=IsMouseOver}" Value="True"> 
        <Setter Property="Effect" Value="{StaticResource MyEffect}"/> 
       </DataTrigger> 
      </Style.Triggers> 
     </Style> 
    </Style.Resources> 
</Style> 

Answer 2

我們曾經有過類似的要求，只有一行列表框的內容，而不是整行。我們接受了這篇文章的幫助... http://drwpf.com/blog/2008/03/25/itemscontrol-i-is-for-item-container。