방법: 데이터가 변경될 때 애니메이션 트리거

업데이트: 2007년 11월

이 예제에서는 DataTrigger, BeginStoryboard 작업 및 Storyboard를 사용하여 바인딩된 데이터가 지정된 조건을 만족할 경우 속성에 애니메이션 효과를 적용합니다. DataTrigger는 Style, ControlTemplate 또는 DataTemplate에서 사용할 수 있습니다.

예제

다음 예제에서는 ListBox 컨트롤에 재고 정보를 표시합니다. DataTrigger를 사용하여 품절된 서적이 포함된 모든 ListBoxItem의 Opacity에 애니메이션 효과를 적용합니다.

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Title="DataTriggerStoryboardExample">

  <Page.Resources>
    <XmlDataProvider x:Key="InventoryData" XPath="Inventory/Books">
      <x:XData>
        <Inventory >
          <Books>
            <Book ISBN="0-7356-0562-9" Stock="in" Number="9">
              <Title>XML in Action</Title>
              <Summary>XML Web Technology</Summary>
            </Book>
            <Book ISBN="0-7356-1370-2" Stock="in" Number="8">
              <Title>Programming Microsoft Windows With C#</Title>
              <Summary>C# Programming using the .NET Framework</Summary>
            </Book>
            <Book ISBN="0-7356-1288-9" Stock="out" Number="7">
              <Title>Inside C#</Title>
              <Summary>C# Language Programming</Summary>
            </Book>
            <Book ISBN="0-7356-1377-X" Stock="in" Number="5">
              <Title>Introducing Microsoft .NET</Title>
              <Summary>Overview of .NET Technology</Summary>
            </Book>
            <Book ISBN="0-7356-1448-2" Stock="out" Number="4">
              <Title>Microsoft C# Language Specifications</Title>
              <Summary>The C# language definition</Summary>
            </Book>
          </Books>
          <CDs>
            <CD Stock="in" Number="3">
              <Title>Classical Collection</Title>
              <Summary>Classical Music</Summary>
            </CD>
            <CD Stock="out" Number="9">
              <Title>Jazz Collection</Title>
              <Summary>Jazz Music</Summary>
            </CD>
          </CDs>
        </Inventory>
      </x:XData>
    </XmlDataProvider>

    <Style x:Key="AnimatedListBoxItemStyle" TargetType="{x:Type ListBoxItem}">

      <Setter Property="Margin" Value="0,2,0,2" />
      <Setter Property="Padding" Value="0,2,0,2" />

      <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>
    </Style>
  </Page.Resources>

  <StackPanel>
    <ListBox HorizontalAlignment="Center"
      ItemContainerStyle="{StaticResource AnimatedListBoxItemStyle}"
      Padding="2">
      <ListBox.ItemsSource>
        <Binding Source="{StaticResource InventoryData}"
                 XPath="*"/>
      </ListBox.ItemsSource>

      <ListBox.ItemTemplate>
        <DataTemplate>
          <TextBlock FontSize="12" Margin="0,0,10,0">
            <TextBlock.Text>
              <Binding XPath="Title"/>
            </TextBlock.Text>
          </TextBlock>
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>
  </StackPanel>
</Page>

참고 항목

개념

Storyboard 개요

데이터 바인딩 개요

참조

DataTrigger

EnterActions

ExitActions