TileAnimation in usercontrol

[Bertrand]

Hi,

Ok I can't find what's wrong with my code, so I try with the support community.

I have a WP7 app, a MVVM implementation, with a main page containing:
- a panorama
    - a panorama item piActivities
        - a view of MyActivities which is a usercontrol with:
            - 3 listbox with 3 textblock as titles for each listbox. Each listbox contains (as a itemtemplate) a main grid with some controls (images, textblocks, ...) to create a kind of tile, and are binded
    - another panorama item
    ...

My problem is I can't animate a listbox in the usercontrol MyActivities!

My rootframe is a RadPhoneApplicationFrame.
I've added in app.xaml :

    <telerikCore:RadContinuumAnimation x:Key="ContinuumAnimation" />
    <telerikCore:RadTileAnimation x:Key="TileAnimation" />

in the userControl MyActivities :

  <telerikPrimitives:RadTransitionControl.Transition>
    <telerikPrimitives:RadTransition ForwardOutAnimation="{StaticResource ContinuumAnimation}" 
                                         ForwardInAnimation="{StaticResource TileAnimation}" 
                                         BackwardInAnimation="{StaticResource ContinuumAnimation}"
                                         BackwardOutAnimation="{StaticResource TileAnimation}"/>
  </telerikPrimitives:RadTransitionControl.Transition>

and in the code behind:
      this.SetValue(RadTileAnimation.ContainerToAnimateProperty, this.FirstListBox);
      this.SetValue(RadContinuumAnimation.ContinuumElementProperty, FirstListBox.SelectedItem);

So I tried differents things:

1/
- remove the 3 listbox in the MyActivities, and add a simple listbox with 3 items (item is a textblock)
- put the SetValue(Rad...) in the usercontrol constructor, on the listbox tap/selection_changed/mouseleftclic
- put <thetelerikPrimitives:RadTransition... in the main page and/or the userControl MyActivities

but not better

2/
- add a new panorama item
- add the same simple listbox (with 3 items of textblock) inside the maine page (so not in a user control)

That's worked


So do I need specific code for use Animation inside a user control in a MVVM app ????

Thanks for all you ideas.

[Bertrand]

Ok, some news.

My problem came from the use of an UserControl, inside a ViewModelPage.
When I call this in the UserControl

this.SetValue(RadTileAnimation.ContainerToAnimateProperty, this.FirstListBox);

it doesn't work because "this" is an instance of the UserControl. Even if I had put an RadTransitionControl 
inside the xaml of the UserControl, nothing happen. The transition seems to work from page to page, 
and not from control to page.

So questions:
- I can't add a transition to a UserControl in xaml, that's wright?
- I need in the UserControl code, to call 
SetValue(RadTileAnimation.ContainerToAnimateProperty, itemToAnimate)

on the parent page. A way to do this is get the App.Current.RootVisual, then the frame.Content

Thanks for any help and comments

[Lancelot]

Hi Bertrand,

Thank you for sharing that with all of us! I'll share with you what I've done before, but I'm not sure if it helps...

I have successfully added transitions in my UserControls before.  I called the StoryBoard.Begin() method inside the Loaded event in the UC.

 I have an opening animation that is inside a UC named Animation.xaml. I have an instance of Animation.xaml on top of MainPage.xaml. When MainPage loads the Animation.xaml loads and it starts my custom storyboard. Everything works fine and the transitions/animations fire off smoothly. At the end of the the animations, I collapse the UC and the app works fine.

So it is possible to have a storyboard running in a UC, I'm not sure what is going on in your project, but hopefully the Telerik admin has some insight into why the RadTileAnimation isn't working right.

Good luck,
Lancelot

[Bertrand]

Hi Lancelot,

thanks for your support. I agree that we can add animation inside a UC. But you speak about StoryBoard, so the native animation used in Silverlight.
As I said, I try to use RadTransitionControl, and a RadTileAnimation.
What I have :
- a MainPage, containing a Panorama
    - 4 panorama items, each one containing a UC

What I've tried:
- the first time, in the UC, add

  <telerikPrimitives:RadTransitionControl.Transition>
    <telerikPrimitives:RadTileTransition/>
  </telerikPrimitives:RadTransitionControl.Transition>

then in the code behind (in the listbox_MouseLeftButtonUp) :

this.SetValue(RadTileAnimation.ContainerToAnimateProperty, this.FirstListBox);

but that doesn't work

-next, in the MainPage, add

  <telerikPrimitives:RadTransitionControl.Transition>
    <telerikPrimitives:RadTileTransition/>
  </telerikPrimitives:RadTransitionControl.Transition>

then in the code behind:

this.SetValue(RadTileAnimation.ContainerToAnimateProperty, myUC.FirstListBox);

but that doesn't work (I've tried to call the SetValue in  the MainPage_Loaded, the UC_Tap, the panorama_selectionChanged, ...)

-next, int the MainPage, add

  <telerikPrimitives:RadTransitionControl.Transition>
    <telerikPrimitives:RadTileTransition/>
  </telerikPrimitives:RadTransitionControl.Transition>

then in the code behind in the UC, (in the listbox_MouseLeftButtonUp) :

          RadPhoneApplicationFrame frame = App.Current.RootVisual as RadPhoneApplicationFrame;
          MainPage page = frame.Content as MainPage;
          if (page != null)
          {
            page.SetValue(RadTileAnimation.ContainerToAnimateProperty, FirstListBox);
          }

that works. But it seems strange, and not very friendly ... Is there any better implementation?

[Lancelot]

Hi Bertrand,

The reason I used Storyboard as an example was because the transitions in the RadControls are native storyboards at the lowest level. Ok, now that you've explained it a little more, I think you might be experiencing this because you can't animate inside a container that uses virtualization.

 There is where your problem may lie. As an experiment, try using a different container to hold your usercontrols

Good luck,
Lancelot

[Bertrand]

Ok thanks.

But what I want (and I need) in my UC is: 3 list items, animated like the list in the "AllExamples" page in the telerik demo.
So I can use another container (ie not a listbox), but I don't know how.

And maybe I wasn't clear, I want to animate the listbox items with the TileAnimation effect.

[Lancelot]

Bertrand,

I think the best thing for you to do is replace the native listbox with the RadDataBoundListBox. The dataBoundListBox lets you animate the individual listbox items as they're added or removed!

The TileAnimation effect was designed for whole pages and is not recommended for use on small items inside other controls. I personally use the built-in animation effects on all my RadDataBoundListBox items. Go to this link and see how it's done, its very simple to implement and will allow you to get rid of the the extraneous code you're doing to force the animations.

Take a little time to read through the different effects, modes and abilities, such as PlayOnAdd (which is what you'll probably use)

If you still want to go with your original idea, then I recommend using a StackPanel inside a ScrollViewer. It will look just like a listbox.

Good luck,
Lancelot

[Bertrand]

Ok thank you very much Lancelot. To be honest, I've planned to try the RadDataBoundListbox, so I'll try this weekend.

I will post my results.

[Lancelot]

Betrand,

Take a look at this short screencast of an app I built using the DataBoundListBox. About 30 seconds in you'll see how all the items slide in from the right? On the mainpage I have them animated down into the box, on the pages where there is one list, I have them slide in horizontally.

It is definitely my favorite control in the whole suite.

Lancelot