Question

I have an ItemsControl with Items being added through databinding to an observable collection. Each item has a data template that defines its look.

I am trying to figure out if it is possible to apply/trigger animations to/on each of the Items in the ItemsControl when the VisualStateManager puts the ItemsControl in a particular state.

Below is a picture – when the items control goes into the closed state – I want the items in the items control to shrink as well as hide the text and have a number become visible. Is this possible using VSM or do I need to attach animations to each item when they are created and then manually kick them off when I want them to change visual state.

alt text http://www.edefine.com/images/misc/drawing1.jpg

Answer 1

This is possible using a ObjectAnimationUsingKeyFrames, however it’s stupidly hard to do, will cause you to rip your hair out, crash your visual studio regularly and gives you very little over doing it the simple way.

The simple way:

public class TestSwapContentControl : ContentControl  {     object StoredOriginalContent;      public object FullContent     {         get { return (object)GetValue(FullContentProperty); }         set { SetValue(FullContentProperty, value); }     }      // Using a DependencyProperty as the backing store for FullContent.  This enables animation, styling, binding, etc...     public static readonly DependencyProperty FullContentProperty =         DependencyProperty.Register(             'FullContent'             , typeof(object)             , typeof(TestSwapContentControl)             , null);      public void SwitchToFullContent()     {         if (FullContent != null)         {             StoredOriginalContent = Content;             Content = FullContent;         }     }      public void SwitchToNormalContent()     {         if(StoredOriginalContent != null)         {             Content = StoredOriginalContent;         }     } } 

Then the xaml to use:

    <local:TestSwapContentControl x:Name='mySwitch'>             <Rectangle Height='50' Width='100' Fill='Black' />         <local:TestSwapContentControl.FullContent>                 <StackPanel>                     <TextBlock>1</TextBlock>                     <TextBlock>2</TextBlock>                     <TextBlock>3</TextBlock>                     <TextBlock>4</TextBlock>                     <Rectangle Height='50' Width='100' Fill='Red' />                 </StackPanel>             </local:TestSwapContentControl.FullContent>     </local:TestSwapContentControl>    

With the following cs in the page:

    private void Button_Click(object sender, RoutedEventArgs e)     {         if (myTempBool)         {             mySwitch.SwitchToFullContent();             myTempBool = false;         }         else         {             mySwitch.SwitchToNormalContent();             myTempBool = true;         }     } 

Now, if you really need to make the control completely extensible by other developers, you’ll need to use visualstatemenager, but it’s a real bitch. If you don’t know how to set up visual state manager and states through generic.xaml, here’s a how-to guide:

http://scorbs.com/2008/06/11/parts-states-model-with-visualstatemanager-part-1-of/

Here’s a working example but it’s not perfect as I can’t seem to set the content of the ContentPresenter directly.

using System.Windows; using System.Windows.Controls;  namespace SilverlightTestApplication {     [TemplateVisualState(Name='Normal', GroupName='SizeStates')]     [TemplateVisualState(Name='Expanded', GroupName='SizeStates')]     public class TestVSMControl : ContentControl     {         public object SmallContent         {             get { return (object)GetValue(SmallContentProperty); }             set { SetValue(SmallContentProperty, value); }         }          // Using a DependencyProperty as the backing store for SmallContent.  This enables animation, styling, binding, etc...         public static readonly DependencyProperty SmallContentProperty =             DependencyProperty.Register('SmallContent', typeof(object), typeof(TestVSMControl), null);          public object LargeContent         {             get { return (object)GetValue(LargeContentProperty); }             set { SetValue(LargeContentProperty, value); }         }          // Using a DependencyProperty as the backing store for LargeContent.  This enables animation, styling, binding, etc...         public static readonly DependencyProperty LargeContentProperty =             DependencyProperty.Register('LargeContent', typeof(object), typeof(TestVSMControl), null);          public bool Pressed         {             get { return (bool)GetValue(PressedProperty); }             set { SetValue(PressedProperty, value); }         }          // Using a DependencyProperty as the backing store for Pressed.  This enables animation, styling, binding, etc...         public static readonly DependencyProperty PressedProperty =             DependencyProperty.Register('Pressed', typeof(bool), typeof(TestVSMControl),                  new PropertyMetadata(new PropertyChangedCallback(PressedPropertyChanged)));          static void PressedPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)         {             var me = sender as TestVSMControl;             me.ChangeState();         }          public TestVSMControl()         {             DefaultStyleKey = typeof(TestVSMControl);         }          void ChangeState()         {             GoToState(true);         }          private void GoToState(bool useTransitions)         {             if (Pressed)             {                 VisualStateManager.GoToState(this, 'Normal', useTransitions);             }             else             {                 VisualStateManager.GoToState(this, 'Expanded', useTransitions);             }         }     } } 

In your generic.xaml (include xmlns:vsm=’clr-namespace:System.Windows;assembly=System.Windows’):

<Style TargetType='local:TestVSMControl'>             <Setter Property='Template'>         <Setter.Value>             <ControlTemplate TargetType='local:TestVSMControl'>                 <StackPanel>                     <vsm:VisualStateManager.VisualStateGroups>                         <vsm:VisualStateGroup x:Name='SizeStates'>                             <vsm:VisualState x:Name='Normal'>                                 <Storyboard>                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty='Content' Storyboard.TargetName='myContentPresenter' BeginTime='00:00:00' Duration='00:00:00.0010000' >                                         <ObjectAnimationUsingKeyFrames.KeyFrames>                                             <DiscreteObjectKeyFrame KeyTime='0:0:0'>                                                 <DiscreteObjectKeyFrame.Value>                                                     <StackPanel>                                                         <TextBlock>Rararasputin</TextBlock>                                                         <Button Content='{TemplateBinding SmallContent}' />                                                     </StackPanel>                                                 </DiscreteObjectKeyFrame.Value>                                             </DiscreteObjectKeyFrame>                                         </ObjectAnimationUsingKeyFrames.KeyFrames>                                     </ObjectAnimationUsingKeyFrames>                                 </Storyboard>                             </vsm:VisualState>                             <vsm:VisualState x:Name='Expanded'>                                 <Storyboard>                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty='Content' Storyboard.TargetName='myContentPresenter' BeginTime='00:00:00' Duration='00:00:00.0010000' >                                          <ObjectAnimationUsingKeyFrames.KeyFrames>                                             <DiscreteObjectKeyFrame KeyTime='0:0:0'  >                                                 <DiscreteObjectKeyFrame.Value>                                                     <StackPanel>                                                         <TextBlock>Other one</TextBlock>                                                         <Button Content='{TemplateBinding LargeContent}' />                                                     </StackPanel>                                                 </DiscreteObjectKeyFrame.Value>                                             </DiscreteObjectKeyFrame>                                         </ObjectAnimationUsingKeyFrames.KeyFrames>                                     </ObjectAnimationUsingKeyFrames>                                 </Storyboard>                             </vsm:VisualState>                         </vsm:VisualStateGroup>                     </vsm:VisualStateManager.VisualStateGroups>                                             <ContentPresenter x:Name='myContentPresenter' />                 </StackPanel>             </ControlTemplate>         </Setter.Value>     </Setter> </Style> 

And how to use in your page:

            <local:TestVSMControl x:Name='myVSMControl' Height='200'>                 <local:TestVSMControl.SmallContent>                     <Rectangle Height='50' Width='100' Fill='Red' />                 </local:TestVSMControl.SmallContent>                 <local:TestVSMControl.LargeContent>                     <Rectangle Height='50' Width='100' Fill='Green' />                 </local:TestVSMControl.LargeContent>                     </local:TestVSMControl>             <Button Content='Swap' x:Name='VSMButton' Click='VSMButton_Click'  /> 

with the following in your page:

    private void VSMButton_Click(object sender, RoutedEventArgs e)     {         myVSMControl.Pressed = !myVSMControl.Pressed;     }