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>