views:

1032

answers:

3

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

I don't think you can do this via pure Xaml, you'll have to do this in code (or better yet, write a generalized Expression Behavior, so that you can describe it in Xaml). Check out the PropertyMetadata of your Dependency Property to see how you can hook its Property Changed event.

Paul Betts
@Paul, do you have any resources (links) that you could point me to that would point me in the right direction?
Metro Smurf
+1  A: 

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();
        }
    }
}
Dabblernl
@Dabblernl - we had tried this initially, but was hoping there was a pure XAML soltution. Thanks.
Metro Smurf
+1  A: 

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.

Jobi Joy
@Jobi - initially we did something similar, re: using the ViewModel to handle the trigger, but have ultimately gone the route of using the DataContextChanged event as suggested by Dabblernl as it keeps the UI logic in the UI and out of the model.
Metro Smurf