1

OpacityAnimation不透明度动画

clipboard.png

各元素不透明的属性:
见代码中各种动画目标属性的不透明度引用.

<Page.Triggers>
<Page.Triggers>
    <EventTrigger RoutedEvent="Page.Loaded">
      <BeginStoryboard Name="myBeginStoryboard">
        <Storyboard Name="myStoryboard">
          <DoubleAnimation Storyboard.TargetName="opacityAnimatedButton"
            Storyboard.TargetProperty="(Button.Opacity)" From="1" To="0"
            Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
          <DoubleAnimation Storyboard.TargetName="opacityAnimatedImage"
            Storyboard.TargetProperty="(Image.Opacity)" From="1" To="0"
            Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
          <DoubleAnimation Storyboard.TargetName="opacityAnimatedBrushButton"
            Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Opacity)" From="1" To="0"
            Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
          
          <ColorAnimation  Storyboard.TargetName="opacityAnimatedColorRectangle"
            Storyboard.TargetProperty="(Rectangle.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
            Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever">
            <ColorAnimation.By>
             <Color ScA="-1.0" ScR="0.0" ScG="0.0" ScB="0.0" />
            </ColorAnimation.By>
          </ColorAnimation>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Page.Triggers>

PropertyAnimation属性动画触发的方式

1、FrameworkElement.Triggers --EventTrigger-RoutedEvent--BeginStorybord

  1. FrameworkElement.Triggers下的事件触发

clipboard.png

<!-- Animates the width of the first button 
       from 200 to 300. -->         
  <EventTrigger RoutedEvent="Button.Click">
    <BeginStoryboard>
      <Storyboard>           
        <DoubleAnimation Storyboard.TargetName="myWidthAnimatedButton"
          Storyboard.TargetProperty="Width"
          From="200" To="300" Duration="0:0:3" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger>
</Button.Triggers>

2、Style.Triggers--Tirgger-Property/Value--Trigger.EnterActions/ExitActions----BeginStorybord

  1. Style.Triggers下属性触发Trigger.EnterActions/ExitActions

clipboard.png

<Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">

      <Trigger.EnterActions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="Opacity"
              To="1" Duration="0:0:1" />
          </Storyboard>
        </BeginStoryboard>
      </Trigger.EnterActions>
      <Trigger.ExitActions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="Opacity"
              To="0.25" Duration="0:0:1" />
          </Storyboard>
        </BeginStoryboard>
      </Trigger.ExitActions>          
    </Trigger>               
  </Style.Triggers>    
</Style>

3、Style.Triggers--EventTrigger-RoutedEvent--EventTrigger.Actions--BeginStorybord

  1. Style.Triggers下的事件触发的Actions

clipboard.png

<!-- Animates the button's opacity on mouse over. -->
    <EventTrigger RoutedEvent="Button.MouseEnter">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetProperty="(Button.Opacity)"
              From="1.0" To="0.5" Duration="0:0:0.5" AutoReverse="True"
              RepeatBehavior="Forever" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>  
    
    <!-- Returns the button's opacity to 1 when the mouse leaves. -->
    <EventTrigger RoutedEvent="Button.MouseLeave">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetProperty="(Button.Opacity)"
              To="1" Duration="0:0:0.1" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>   
    
    <!-- Changes the button's color when clicked. 
         Notice that the animation can't target the
         SolidColorBrush used to paint the button's background
         directly. The brush must be accessed through the button's
         Background property. -->
    <EventTrigger RoutedEvent="Button.Click">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <ColorAnimation 
              Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
              From="Orange" To="White" Duration="0:0:0.1" AutoReverse="True" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>  
  </Style.Triggers>
</Style>

4、ControlTemplate.Triggers--EventTrigger--BeginStorybord

  1. ControlTemplate.Triggers可包含事情触发及属性触发
  2. 需注明控件模板的事件路由RoutedEvent及源元素名称SourceName=
    或属性触发器Trigger的Property及值判定Value 、源元素名称SourceName=

clipboard.png

<ControlTemplate.Triggers>

    <!-- Event Trigger Example -->
    <EventTrigger RoutedEvent="Border.MouseEnter" SourceName="innerBorder">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="innerBorderBackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="White" To="#CCCCFF"
            Duration="0:0:3" AutoReverse="True" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>

    <!-- Property Trigger Example -->
    <Trigger Property="IsMouseOver" Value="True" SourceName="contentPanel">
      <Trigger.EnterActions>
        <BeginStoryboard>
          <Storyboard>
            <ColorAnimation 
              Storyboard.TargetName="contentPanelBrush" 
              Storyboard.TargetProperty="Color"
              To="Purple" Duration="0:0:1" />
          </Storyboard>
        </BeginStoryboard>
      </Trigger.EnterActions>
      <Trigger.ExitActions>
        <BeginStoryboard>
          <Storyboard>
            <ColorAnimation 
              Storyboard.TargetName="contentPanelBrush" 
              Storyboard.TargetProperty="Color"
              To="White" Duration="0:0:1" />
          </Storyboard>
        </BeginStoryboard>
      </Trigger.ExitActions>
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

5、Styel.Triggers--DataTrigger-Binding/Value--DataTrigger.EnterActions/ExitActions--BeginStorybord

  1. 数据触发器需设置数据绑定源或路径Binding、值判断Value。

clipboard.png

<Style.Triggers>
    <DataTrigger 
     Binding="{Binding XPath=@Stock}" 
     Value="out">
      <DataTrigger.EnterActions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
             Storyboard.TargetProperty="Opacity"
             From="0.25" To="0.5" Duration="0:0:1" 
             RepeatBehavior="Forever"
             AutoReverse="True"/>
          </Storyboard>
        </BeginStoryboard>
      </DataTrigger.EnterActions>
      <DataTrigger.ExitActions>
        <BeginStoryboard> 
          <Storyboard FillBehavior="Stop">
            <DoubleAnimation
              Storyboard.TargetProperty="Opacity"
              To="1" Duration="0:0:1" />
          </Storyboard>
        </BeginStoryboard>  
      </DataTrigger.ExitActions>
      
    </DataTrigger>
  </Style.Triggers>

扩展:

clipboard.png

TriggerBase 类:表示用于在 Style 对象内指定条件值的基类。

  1. WPF 样式和模板化模型允许在 Style、 ControlTemplate 和 DataTemplate 内指定触发器。 从本质上讲,TriggerBase 是允许您在某些条件(例如某个属性值变为 true 或者某个事件发生时)得到满足时应用更改的对象的基类。
  2. 有多种不同类型的触发器: Trigger、 MultiTrigger、 EventTrigger、 DataTrigger 和 MultiDataTrigger。

Trigger 类:表示一个触发器,它按条件应用属性值或执行操作。

  1. 如当用户将光标悬停在 UIElement 上时设置为 true 的 IsMouseOver 属性或 ContentElement 的对应 IsMouseOver 属性。 通过用属性值以及 Trigger 元素表示最终用户操作
  2. Trigger 对象的 Setters 属性只能包含 Setter 对象。 将 Setter 子项添加到 Trigger 对象会将其隐式添加到 Trigger 对象的 SetterBaseCollection。 EventSetter 对象不受支持;只有 Style.Setters 支持 EventSetter 对象。

MultiTrigger 类:表示在满足一组条件时应用属性值或执行操作的触发器。

  1. MultiTrigger 允许根据 Condition 集合设置属性值或启动操作。 如果元素的属性(由 Condition 类的 Property 属性指定)值与指定的 Value 匹配,则满足条件。
  2. 该比较是一项引用相等性检查。 然后,可以在满足所有条件时使用 Setter 或 EnterActions 和 ExitActions 属性来应用更改或启动操作。

EventTrigger 类:表示为响应事件而应用一组操作的触发器。

  1. 而 EventTrigger 对象将在发生指定的路由事件时启动一组 Actions。 例如,您可以使用 EventTrigger 在鼠标指针悬停于特定用户界面 (UI) 控件上时启动一组动画。
  2. 与 Trigger 不同,EventTrigger 没有终止状态的概念,因此不再满足引发事件的条件后,操作将无法撤消。
  3. 请注意,使用 EventTrigger 时,需要选择不会影响控件内在行为的事件。 控件(例如 Button 或 TextBox)执行有关用户输入事件(如鼠标单击和键盘事件)的特定操作。 例如,如果要对按钮进行样式设置,并尝试将 MouseDown 事件设置为 EventTrigger 的 RoutedEvent,则永远也不会应用 EventTrigger,因为该事件将首先经过按钮的处理。 可以改用 PreviewMouseDown 事件或其他事件。
  4. 使用数据绑定时,如果要使用 TargetUpdated 事件,则必须为要引发的该事件将 Binding 对象的 NotifyOnTargetUpdated 值设置为 true。
  5. 将 TriggerAction 子级添加到 EventTrigger 对象中会将它隐式添加到 EventTrigger 对象的 TriggerActionCollection 中

DataTrigger 类:表示一个触发器,它会在绑定数据满足指定条件时应用属性值或执行操作。

  1. Style、 ControlTemplate 和 DataTemplate 都有触发器集合。 使用 DataTrigger,可以在数据对象的属性值与指定的 Value 匹配时设置属性值。
  2. 例如,在显示 Employee 对象列表时,可能希望前景色根据每个 Employee 的当前出勤情况而变化。(例如,用紫色前景色显示当前正在休假的 Employee。)在有些情况下,创建转换器或使用 DataTemplateSelector 可能会更适合。
  3. 请注意,若要使数据触发器有意义,必须在 DataTrigger 上同时指定 Binding 和 Value 属性。 如果这两个属性或其中一个未指定,则会引发异常。
  4. DataTrigger 对象的 Setters 属性只能包含 Setter 对象。 将 Setter 子项添加到 DataTrigger 对象会将其隐式添加到 DataTrigger 对象的 SetterBaseCollection。 EventSetter 对象不受支持;只有 Style.Setters 支持 EventSetter 对象。

MultiDataTrigger 类:表示一个触发器,它会在绑定数据满足一组条件时应用属性值或执行操作。

  1. MultiDataTrigger 对象与 MultiTrigger 类似,但 MultiDataTrigger 的条件基于绑定数据的属性值,而不是 UIElement 的属性值。 在 MultiDataTrigger 中,当数据项的属性值与指定的 Value 匹配时,会满足一个条件。 然后,可以在满足所有条件时使用 Setter 或 EnterActions 和 ExitActions 属性来应用更改或启动操作。
  2. MultiDataTrigger 对象的 Setters 属性只能由 Setter 对象组成。 将 Setter 子项添加到 MultiDataTrigger 对象会将其隐式添加到 MultiDataTrigger 对象的 SetterBaseCollection。 EventSetter 对象不受支持;只有 Style.Setters 支持 EventSetter 对象。

EventSetter 类:表示样式中的事件资源库。 事件资源库调用指定的事件处理程序来响应事件。

  1. 事件资源库调用指定的事件处理程序来响应路由事件,这些处理程序适用于引用 Style 的所有元素,而无需您将实例处理程序附加到每个单独的元素。 只有 Style.Setters 才支持EventSetter 对象。
  2. 只能为属于路由事件的事件声明事件资源库。 可以为具有直接路由策略的路由事件、冒泡事件或隧道事件声明事件资源库。
  3. 在主题资源字典包含的样式中,不能使用事件资源库。 这是因为主题资源字典在运行时通常是松散的二进制 XAML (BAML) 文件,并且未定义伴随代码隐藏(用于定义处理程序)可在其中存在的任何范围。
  4. 通过事件资源库附加的处理程序将在事件的任何类处理程序之后调用,并且还会在任何实例处理程序之后调用。 因此,如果类处理程序或实例处理程序在其参数中将事件标记为已处理,则不会调用事件资源库声明的处理程序,除非事件资源库明确将 HandledEventsToo 设置为 true。
  5. 事件资源库还可能来自 BasedOn 样式。 将在处理程序后对直接样式调用指定为 BasedOn 的样式中的事件库处理程序。
  6. 请注意,只有 Style.Setters 才支持EventSetter 对象。 触发器( TriggerBase 和派生类)不支持 EventSetter。

李志玮
22 声望34 粉丝

求索~~


引用和评论

0 条评论