WPF: how to fire an EventTrigger (or Animation) when binding changes?

Question

We have a simple animation that runs when a ToggleButton is checked and unchecked (expands a ListView's height and then collapses a ListView's height). How do you fire the EventTrigger (or Animation) for the <Storyboard x:Key="CommentsCollapse"> when the DataContext Binding changes in the x:Name="DetailsGrid" Grid in the following XAML?

In other words, whenever the Binding changes for the "DetailsGrid", we want the "CommentsCollapse" StoryBoard to be triggered to ensure the ListView is returned to its collapsed state.

<Page
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="800"
   Height="400">
   <Page.Resources>
      <Storyboard x:Key="CommentsExpand">
         <DoubleAnimationUsingKeyFrames
            BeginTime="00:00:00"
            Storyboard.TargetName="CommentsListView"
            Storyboard.TargetProperty="(FrameworkElement.Height)">
            <SplineDoubleKeyFrame KeyTime="00:00:00.200" Value="300"/>
         </DoubleAnimationUsingKeyFrames>
      </Storyboard>
      <Storyboard x:Key="CommentsCollapse">
         <DoubleAnimationUsingKeyFrames
            BeginTime="00:00:00"
            Storyboard.TargetName="CommentsListView"
            Storyboard.TargetProperty="(FrameworkElement.Height)">
            <SplineDoubleKeyFrame KeyTime="00:00:00.200" Value="75"/>
         </DoubleAnimationUsingKeyFrames>
      </Storyboard>
   </Page.Resources>
   <Page.Triggers>
      <EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="CommentsToggleButton">
         <BeginStoryboard Storyboard="{StaticResource CommentsExpand}"/>
      </EventTrigger>
      <EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="CommentsToggleButton">
         <BeginStoryboard Storyboard="{StaticResource CommentsCollapse}"/>
      </EventTrigger>
   </Page.Triggers>
   <Grid DataContext="{Binding Path=CurrentTask.Workflow.Invoice}" x:Name="DetailsGrid">
      <StackPanel Orientation="Horizontal">
         <Canvas Width="428">
            <GroupBox Width="422" Margin="5,0,0,0">
               <GroupBox.Header>
                  <StackPanel Orientation="Horizontal">
                     <ToggleButton
                        x:Name="CommentsToggleButton"
                        Width="20"
                        Height="10"
                        Margin="5,0,0,0">
                        <ToggleButton.Content>
                           <Rectangle
                              Width="5"
                              Height="5"
                              Fill="Red"/>
                        </ToggleButton.Content>
                     </ToggleButton>
                     <TextBlock Foreground="Blue" Text="Comments"/>
                  </StackPanel>
               </GroupBox.Header>
               <ListView
                  x:Name="CommentsListView"
                  Height="75"
                  ItemsSource="{Binding Path=Comments}">
                  <ListView.View>
                     <GridView>
                        <GridViewColumn DisplayMemberBinding="{Binding Path=Date}" Header="Date"/>
                        <GridViewColumn DisplayMemberBinding="{Binding Path=Name}" Header="User"/>
                        <GridViewColumn DisplayMemberBinding="{Binding Path=Description}" Header="Comment"/>
                     </GridView>
                  </ListView.View>
               </ListView>
            </GroupBox>
         </Canvas>
      </StackPanel>
   </Grid>
</Page>

Dabblernl Dabblernl · Accepted Answer · 2009-11-19T23:42:45

I do find too that this is not possible in XAML. You need the DataContextChanged event, which is not a RoutedEvent and thus cannot be used in an EventTrigger.

This seems to work though:

<Window x:Class="DatacontextChangedSpike.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <Storyboard x:Key="ListViewExpands" AutoReverse="True" RepeatBehavior="2x">
            <DoubleAnimation Storyboard.TargetName="PulsingListView" Storyboard.TargetProperty="Height"
                            From="10" To="60"/>
        </Storyboard>
    </Window.Resources>
    <StackPanel>
        <ListView Name="PulsingListView" BorderThickness="2" BorderBrush="Black"
                  DataContextChanged="PulsingListView_DataContextChanged">
            <TextBlock>Listview</TextBlock>
        </ListView>
        <Button Click="Button_Click" >Change DataContext</Button>
    </StackPanel>
</Window>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace DatacontextChangedSpike
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            DataContext = new List<string>();
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            DataContext = new List<int>();
        }

        private void PulsingListView_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            var sb = (Storyboard)FindResource("ListViewExpands");
            sb.Begin();
        }
    }
}

WPF: how to fire an EventTrigger (or Animation) when binding changes?

3 Answers