Cara: Memicu Animasi Saat Nilai Properti Berubah

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

Contoh

Contoh berikut ini menggunakan Trigger untuk menganimasikan Opacity dari Button ketika properti 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 pada properti objek Trigger berperilaku dengan cara yang lebih kompleks daripada animasi EventTrigger atau animasi yang dimulai dengan menggunakan metode Storyboard. Mereka melakukan "handoff" dengan animasi yang didefinisikan oleh objek Trigger lainnya, tetapi menggabungkan dengan animasi EventTrigger dan yang dipicu oleh metode.

Lihat juga

  • Last updated on