WPF: how to fire an EventTrigger (or Animation) when binding changes?
Solution 1
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();
}
}
}
Solution 2
You can trigger the StoryBoard from a DataTrigger(EnterAction and ExitAction), if you can set a ViewModel property to true or false when you change the DataContext. So the DataTrigger will be based on your new Bool property.
Metro Smurf
By Day: Senior application architect. By Night: Currently interested in the structural (aka, dynamic) typing of JavaScript vs static typing of C#. PC Master Race: Crysis, Batman, BioShock, Metro 2033/Last Light, Ryse: Sone of Rome, Portal, Half-Life. The competent programmer is fully aware of the strictly limited size of his own skull; therefore he approaches the programming task in full humility, and among other things he avoids clever tricks like the plague. -- E.W.Dijkstra
Updated on June 05, 2022Comments
-
Metro Smurf almost 2 years
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 thex: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>