Bagikan melalui

Cara: Memicu Animasi Saat Nilai Properti Berubah

  • Artikel

Contoh ini memperlihatkan cara menggunakan Trigger untuk memulai Storyboard saat nilai properti berubah. Anda dapat menggunakan Trigger di dalam Style, ControlTemplate, atau DataTemplate.

Contoh

Contoh berikut menggunakan Trigger untuk menganimasikan Opacity dari ketika Button propertinya IsMouseOver menjadi true.

<!-- PropertyTriggerExample.xaml
     Shows how to use property triggers to start animations. -->
<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Animate Properties with Storyboards">
  <Page.Resources>
  
    <Style x:Key="PropertyTriggerExampleButtonStyle" TargetType="{x:Type Button}">
      
      <Setter Property="Opacity" Value="0.25" />
      
      <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>
  </Page.Resources>

  <StackPanel Margin="20">

    <Button Style="{StaticResource PropertyTriggerExampleButtonStyle}">
      Move the mouse over me.
    </Button>

  </StackPanel>
</Page>

Animasi yang diterapkan oleh objek properti Trigger berulah dengan cara yang lebih kompleks daripada EventTrigger animasi atau animasi yang mulai menggunakan Storyboard metode. Mereka "handoff" dengan animasi yang didefinisikan oleh objek lain Trigger , tetapi menyusun dengan EventTrigger animasi yang dipicu metode dan .

Baca juga