Cómo: Activar una animación cuando se cambian datos

Actualización: noviembre 2007

En este ejemplo se muestra cómo utilizar un objeto DataTrigger, una acción BeginStoryboard y un objeto Storyboard para animar una propiedad cuando los datos enlazados cumplen la condición especificada. DataTrigger se puede usar en un objeto Style, ControlTemplate o DataTemplate.

Ejemplo

En el ejemplo siguiente, se muestra la información de inventario en un control ListBox. Se utiliza un objeto DataTrigger para animar la propiedad Opacity de todos los controles ListBoxItem que contengan un libro agotado.

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

Vea también

Conceptos

Información general sobre objetos Storyboard

Información general sobre el enlace de datos

Referencia

DataTrigger

EnterActions

ExitActions