2011-10-05 5 views
8

내가 코드의이 비트가 있다고 가정하자 제어 :WPF 마우스 오버 트리거 효과

기본적으로
<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> 

I가 그 안에있는 TextBlock의 또는 이미지가 특정 크기에 스타일을해야 말한다 그리드에 적용되는 스타일 .

그리드에서 트리거를 생성하여 그리드 내의 모든 TextBlock 및 이미지에는 적용되지만 그리드에는 적용되지 않습니다.

트리거를 TextBlock 및/또는 Image에 직접 적용 할 수 있지만 효과는 각 요소에서만 별도로 발생합니다. 내부 TextBlock 및 Image에 영향을 주어야합니다.

아무도 도와 줄 수 있습니까?

답변

20

다른 방법으로 할 수 있습니다. 즉 DataTriggersImageTextBlock에 추가하고 조상 Grid의 경우 IsMouseOver에서 트리거하도록 설정합니다.

참고 :이 효과가 빨리 마우스 이상으로 트리거 할 경우 Grid 당신이 Transparent 같은 값으로 Background을 설정해야합니다. 기본적으로 Backgroundnull이며이 값은 적중 테스트에서 사용되지 않습니다.

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