locked
Firing an animation when a property changes on an element RRS feed

  • Question

  • Hi, I have a ListBox full of Image objects. I also have an Image control to the side of it, which the Source property is bound to the SelectedItem item property of the ListBox. This gives a kind of Preview list of thumbnails and a larger Image that the user can see.

    What i'm trying to achieve is a way of animating the larger Image when the Source property changes. I don't want to use any code-behind as i'm trying to adhere to a strict MVVM pattern. Any thoughts?

    Friday, June 25, 2010 7:31 AM

Answers

  • Hi David,

    In MVVM theory, it's not recommended to add code in the code behind of the view. A widely adopted solution is to use attached behavior to do the code behind work instead.

    The theory of attached behavior solution is that we create a class, say BehaviorClass, with attached properties and set the attached property on the UIElement on the view. So we can get access to the UIElement in the BehaviorClass. We can subscribe the event on the UIElement and do what we want in the event handler.

    In your scenario, you can create a behavior class containing two attached properties, e.g. WatchedElement and WatchedRoutedEvent, and set them on the Image control(set the WatchedElement attached property to the ListBox and the WatchedRoutedEvent attached property to SelectionChanged event). In the behavior class, get access to the Image control and subscribe the WatchedRoutedEvent on the WatchedElement and in the event handler, define an animation and apply this animation on the Image control.

    For more information on attached behavior, please refer to the following article:

    http://www.codeproject.com/KB/WPF/AttachedBehaviors.aspx
    http://blog.voidnish.com/?p=229

    Hope this helps.
    If you have any question, please feel free to let me know.

    Sincerely,
    Linda Liu

    MSDN Subscriber Support in Forum 
    If you have any feedback on our support, please contact msdnmg@microsoft.com


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    Welcome to the All-In-One Code Framework! If you have any feedback, please tell us.
    • Marked as answer by Linda Liu Monday, July 5, 2010 5:11 AM
    Friday, July 2, 2010 7:22 AM

All replies

  • Friday, June 25, 2010 7:58 AM
  • Hi, thanks for your reply.

    I don't think that post covers my problem specifically. Please take a look at the following code...

      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ListBox x:Name="ImageListBox" SelectedIndex="0">
          <ListBox.ItemTemplate>
            <DataTemplate>
              <Image Source="{Binding}"
                  Height="50"
                  Width="50" />
            </DataTemplate>
          </ListBox.ItemTemplate>
          <sys:String>C:\Users\Public\Pictures\Sample Pictures\Koala.jpg</sys:String>
          <sys:String>C:\Users\Public\Pictures\Sample Pictures\Desert.jpg</sys:String>
          <sys:String>C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg</sys:String>
          <sys:String>C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg</sys:String>
          <sys:String>C:\Users\Public\Pictures\Sample Pictures\Jellyfish.jpg</sys:String>
          <sys:String>C:\Users\Public\Pictures\Sample Pictures\Hydrangeas.jpg</sys:String>
          <sys:String>C:\Users\Public\Pictures\Sample Pictures\Lighthouse.jpg</sys:String>
        </ListBox>
    
        <Image Grid.Column="1" Source="{Binding ElementName=ImageListBox, Path=SelectedItem}" />
      </Grid>
    I want to animate the Image control whenever the Source property is updated (i.e. when the ListBox has a new SelectedItem

    Friday, June 25, 2010 9:44 AM
  • Hi David,

    In MVVM theory, it's not recommended to add code in the code behind of the view. A widely adopted solution is to use attached behavior to do the code behind work instead.

    The theory of attached behavior solution is that we create a class, say BehaviorClass, with attached properties and set the attached property on the UIElement on the view. So we can get access to the UIElement in the BehaviorClass. We can subscribe the event on the UIElement and do what we want in the event handler.

    In your scenario, you can create a behavior class containing two attached properties, e.g. WatchedElement and WatchedRoutedEvent, and set them on the Image control(set the WatchedElement attached property to the ListBox and the WatchedRoutedEvent attached property to SelectionChanged event). In the behavior class, get access to the Image control and subscribe the WatchedRoutedEvent on the WatchedElement and in the event handler, define an animation and apply this animation on the Image control.

    For more information on attached behavior, please refer to the following article:

    http://www.codeproject.com/KB/WPF/AttachedBehaviors.aspx
    http://blog.voidnish.com/?p=229

    Hope this helps.
    If you have any question, please feel free to let me know.

    Sincerely,
    Linda Liu

    MSDN Subscriber Support in Forum 
    If you have any feedback on our support, please contact msdnmg@microsoft.com


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    Welcome to the All-In-One Code Framework! If you have any feedback, please tell us.
    • Marked as answer by Linda Liu Monday, July 5, 2010 5:11 AM
    Friday, July 2, 2010 7:22 AM