WPF：Animation動畫--PropertyAnimation屬性動畫觸發的方式

時間 2019-12-07

標籤 wpf animation 動畫 propertyanimation 屬性觸發方式简体版

原文原文鏈接

OpacityAnimation不透明度動畫

各元素不透明的屬性：
見代碼中各類動畫目標屬性的不透明度引用.動畫

<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屬性動畫觸發的方式

一、FrameworkElement.Triggers --EventTrigger-RoutedEvent--BeginStorybordspa

FrameworkElement.Triggers下的事件觸發

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

二、Style.Triggers--Tirgger-Property/Value--Trigger.EnterActions/ExitActions----BeginStorybord指針

Style.Triggers下屬性觸發Trigger.EnterActions/ExitActions

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

三、Style.Triggers--EventTrigger-RoutedEvent--EventTrigger.Actions--BeginStorybordcode

Style.Triggers下的事件觸發的Actions

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

四、ControlTemplate.Triggers--EventTrigger--BeginStorybord對象

ControlTemplate.Triggers可包含事情觸發及屬性觸發
需註明控件模板的事件路由RoutedEvent及源元素名稱SourceName=
或屬性觸發器Trigger的Property及值斷定Value 、源元素名稱SourceName=

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

五、Styel.Triggers--DataTrigger-Binding/Value--DataTrigger.EnterActions/ExitActions--BeginStorybord事件

數據觸發器需設置數據綁定源或路徑Binding、值判斷Value。

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

擴展：ip

TriggerBase 類：表示用於在 Style 對象內指定條件值的基類。ci

WPF 樣式和模板化模型容許在 Style、 ControlTemplate 和 DataTemplate 內指定觸發器。從本質上講，TriggerBase 是容許您在某些條件（例如某個屬性值變爲 true 或者某個事件發生時）獲得知足時應用更改的對象的基類。
有多種不一樣類型的觸發器： Trigger、 MultiTrigger、 EventTrigger、 DataTrigger 和 MultiDataTrigger。

Trigger 類:表示一個觸發器，它按條件應用屬性值或執行操做。資源

如當用戶將光標懸停在 UIElement 上時設置爲 true 的 IsMouseOver 屬性或 ContentElement 的對應 IsMouseOver 屬性。經過用屬性值以及 Trigger 元素表示最終用戶操做
Trigger 對象的 Setters 屬性只能包含 Setter 對象。將 Setter 子項添加到 Trigger 對象會將其隱式添加到 Trigger 對象的 SetterBaseCollection。 EventSetter 對象不受支持；只有 Style.Setters 支持 EventSetter 對象。

MultiTrigger 類：表示在知足一組條件時應用屬性值或執行操做的觸發器。路由

MultiTrigger 容許根據 Condition 集合設置屬性值或啓動操做。若是元素的屬性（由 Condition 類的 Property 屬性指定）值與指定的 Value 匹配，則知足條件。
該比較是一項引用相等性檢查。而後，能夠在知足全部條件時使用 Setter 或 EnterActions 和 ExitActions 屬性來應用更改或啓動操做。

EventTrigger 類：表示爲響應事件而應用一組操做的觸發器。

而 EventTrigger 對象將在發生指定的路由事件時啓動一組 Actions。例如，您可使用 EventTrigger 在鼠標指針懸停於特定用戶界面 (UI) 控件上時啓動一組動畫。
與 Trigger 不一樣，EventTrigger 沒有終止狀態的概念，所以再也不知足引起事件的條件後，操做將沒法撤消。
請注意，使用 EventTrigger 時，須要選擇不會影響控件內在行爲的事件。控件（例如 Button 或 TextBox）執行有關用戶輸入事件（如鼠標單擊和鍵盤事件）的特定操做。例如，若是要對按鈕進行樣式設置，並嘗試將 MouseDown 事件設置爲 EventTrigger 的 RoutedEvent，則永遠也不會應用 EventTrigger，由於該事件將首先通過按鈕的處理。能夠改用 PreviewMouseDown 事件或其餘事件。
使用數據綁定時，若是要使用 TargetUpdated 事件，則必須爲要引起的該事件將 Binding 對象的 NotifyOnTargetUpdated 值設置爲 true。
將 TriggerAction 子級添加到 EventTrigger 對象中會將它隱式添加到 EventTrigger 對象的 TriggerActionCollection 中

DataTrigger 類：表示一個觸發器，它會在綁定數據知足指定條件時應用屬性值或執行操做。

Style、 ControlTemplate 和 DataTemplate 都有觸發器集合。使用 DataTrigger，能夠在數據對象的屬性值與指定的 Value 匹配時設置屬性值。
例如，在顯示 Employee 對象列表時，可能但願前景色根據每一個 Employee 的當前出勤狀況而變化。（例如，用紫色前景色顯示當前正在休假的 Employee。）在有些狀況下，建立轉換器或使用 DataTemplateSelector 可能會更適合。
請注意，若要使數據觸發器有意義，必須在 DataTrigger 上同時指定 Binding 和 Value 屬性。若是這兩個屬性或其中一個未指定，則會引起異常。
DataTrigger 對象的 Setters 屬性只能包含 Setter 對象。將 Setter 子項添加到 DataTrigger 對象會將其隱式添加到 DataTrigger 對象的 SetterBaseCollection。 EventSetter 對象不受支持；只有 Style.Setters 支持 EventSetter 對象。

MultiDataTrigger 類：表示一個觸發器，它會在綁定數據知足一組條件時應用屬性值或執行操做。

MultiDataTrigger 對象與 MultiTrigger 相似，但 MultiDataTrigger 的條件基於綁定數據的屬性值，而不是 UIElement 的屬性值。在 MultiDataTrigger 中，當數據項的屬性值與指定的 Value 匹配時，會知足一個條件。而後，能夠在知足全部條件時使用 Setter 或 EnterActions 和 ExitActions 屬性來應用更改或啓動操做。
MultiDataTrigger 對象的 Setters 屬性只能由 Setter 對象組成。將 Setter 子項添加到 MultiDataTrigger 對象會將其隱式添加到 MultiDataTrigger 對象的 SetterBaseCollection。 EventSetter 對象不受支持；只有 Style.Setters 支持 EventSetter 對象。

EventSetter 類：表示樣式中的事件資源庫。事件資源庫調用指定的事件處理程序來響應事件。

事件資源庫調用指定的事件處理程序來響應路由事件，這些處理程序適用於引用 Style 的全部元素，而無需您將實例處理程序附加到每一個單獨的元素。只有 Style.Setters 才支持EventSetter 對象。
只能爲屬於路由事件的事件聲明事件資源庫。能夠爲具備直接路由策略的路由事件、冒泡事件或隧道事件聲明事件資源庫。
在主題資源字典包含的樣式中，不能使用事件資源庫。這是由於主題資源字典在運行時一般是鬆散的二進制 XAML (BAML) 文件，而且未定義伴隨代碼隱藏（用於定義處理程序）可在其中存在的任何範圍。
經過事件資源庫附加的處理程序將在事件的任何類處理程序以後調用，而且還會在任何實例處理程序以後調用。所以，若是類處理程序或實例處理程序在其參數中將事件標記爲已處理，則不會調用事件資源庫聲明的處理程序，除非事件資源庫明確將 HandledEventsToo 設置爲 true。
事件資源庫還可能來自 BasedOn 樣式。將在處理程序後對直接樣式調用指定爲 BasedOn 的樣式中的事件庫處理程序。
請注意，只有 Style.Setters 才支持EventSetter 對象。觸發器（ TriggerBase 和派生類）不支持 EventSetter。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。