在Style中将EventTrigger与Trigger同时使用

现在在看WPF关于Trigger的有关实例，然后找到一篇不错的文章，特此转载，收藏一下！！

 

一般情况下，使用Style时，可以对ControlTemplate添加Triggers，既可以添加EventTrigger，又可以Trigger。

 

但无论如何，在Triggers节点下，是无法同时添加EventTrigger与Trigger复合条件的。拿RadioButton为例，在非选中状态下，MouseEnter与MouseLeave会触发颜色变化事件；在选中状态下，可能又不需要这样的事件。那如何判断MouseEnter与MouseLeave时，到底是选中还是非选中状态呢？

 

以下是非选中状态下的ControlTemplate定义：

 <ControlTemplate x:Key="UnCheckedImageRadioButtonTemplate"
      TargetType="{x:Type style:ImageRadioButton}">
  <Grid x:Name="grdButton">
   <Image x:Name="PART_OVER_img"
       HorizontalAlignment="Left"
       VerticalAlignment="Top"
       Opacity="0"
       Source="{Binding Path=ImageOver, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
   <Image Name="PART_img"
       HorizontalAlignment="Left"
       VerticalAlignment="Top"
       Source="{Binding Path=ImageNormal, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
  </Grid>

  <ControlTemplate.Triggers>
   <EventTrigger RoutedEvent="Mouse.MouseEnter"
        SourceName="PART_img">
    <BeginStoryboard Storyboard="{StaticResource stbFadeIn}" />
   </EventTrigger>
   <EventTrigger RoutedEvent="Mouse.MouseLeave"
        SourceName="PART_img">
    <BeginStoryboard Storyboard="{StaticResource stbFadeOut}" />
   </EventTrigger>
   <EventTrigger RoutedEvent="Mouse.MouseUp"
        SourceName="PART_img">
    <BeginStoryboard Storyboard="{StaticResource stbFadeIn}" />
   </EventTrigger>
   <EventTrigger RoutedEvent="Mouse.MouseDown"
        SourceName="PART_img">
    <BeginStoryboard Storyboard="{StaticResource stbFadeOut}" />
   </EventTrigger>
  </ControlTemplate.Triggers>
 </ControlTemplate>

 

这里，我定义了MouseEnter,MouseLeave,MouseUp和MouseDown事件时触发的Storyboard。但要如何判断这些事件触发时，到底是选中还是非选中呢？我最开始尝试使用MultiTrigger，可MultiTrigger中不能定义EventTrigger，因此不能同时判断MouseEnter事件与选中状态。

 

下面列出了Style的定义，通过Style定义，可以巧妙的将选中属性的判断，定义在ControlTemplate以外。

 

 <Style TargetType="{x:Type style:ImageRadioButton}">
  <Setter Property="Focusable"
    Value="False" />
  <Setter Property="Cursor"
    Value="Hand" />
   <Style.Triggers>
   <Trigger Property="IsChecked"
      Value="True">
    <Setter Property="Template"
      Value="{StaticResource CheckedImageRadioButtonTemplate}" />
   </Trigger>
   <Trigger Property="IsChecked"
      Value="False">
    <Setter Property="Template"
      Value="{StaticResource UnCheckedImageRadioButtonTemplate}" />
   </Trigger>
  </Style.Triggers>
 </Style>

 

红色字体的部分，就是在Style中，先对选中状态进行的判断，然后ControlTemplate中不需要再同时判断选中状态与MouseEnter事件。然后将先前定义的包含Triggers定义的ControlTemplate简化一下，得到不需要检测EventTrigger的模板。

 

 <ControlTemplate x:Key="CheckedImageRadioButtonTemplate"
      TargetType="{x:Type style:ImageRadioButton}">
  <Grid x:Name="grdButton">
   <Image x:Name="PART_OVER_img"
       HorizontalAlignment="Left"
       VerticalAlignment="Top"
       Source="{Binding Path=ImageOver, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
  </Grid>
 </ControlTemplate>

 

顺利完成！

这样就可以解决EventTrigger与Trigger同时使用的问题了。

希望对大家有所帮助！