在Style中将EventTrigger与Trigger同时使用

原文:在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同时使用的问题了。

希望对大家有所帮助！