RadTileAnimation on single element

[ManniAT]

Hi,

I have a grid containing several items (grids mainly with some text / images).
These items act as a kind of a button (some navigate - some just start a calculation function).

Now I fond (in the documentation) that RadTileAnimation can make elements "act" like tiles on the WP7 home screen.
Looking for your samples I found that some elements almost behave like this.
But I couldn't figure out how to assing such an animation.
In the "ToDo list" sample (CreateTask) I saw that in the listbox selection changed handler a call to SetValue(RadTileAnimation.Contian...
is made.
Doing this on my grid has no effect.

Could you please help me in how to use RadTileAnimation to animate "Buttons" (Elements).

Thanks
Manfred

[Valentin.Stoychev]

Hello Manfred,

Please check this blog post for a sample application. Let us know if you experience any problems implementing it.

http://blogs.telerik.com/valentinstoychev/posts/11-02-21/page_transitions_for_wp7_-_sample_application.aspx

Kind regards,
Valentin.Stoychev
the Telerik team

[ManniAT]

Hi Valentin,

thank you for the response.
I know this sample - but (I mentioned that in my initial post) I have no idea how a tile is animated.

I'm behind
http://www.telerik.com/help/windows-phone/telerik.windows.core-telerik.windows.controls.radtileanimation.html
>>Porvides an animation that sequentially animates items in a container.
>>The end effect is similar to the animation of the homescreen on the WP7 OS.

I don't need page transitions (as shown in the sample).
All I want is to animated a tile when the user "klicks" it.

<Grid Margin="0,0,0,0" x:Name="grdButtons">
    <Grid.RowDefinitions>
        <RowDefinition Height="162"/>
        <RowDefinition Height="162"/>
        <RowDefinition Height="162"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="175"/>
        <ColumnDefinition Width="175"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid Grid.Row="0" Grid.Column="1" Width="140" Height="140" MouseLeftButtonDown="Grid_MouseLeftButtonDown" x:Name="grdBtn">
        <Border Background="{StaticResource PhoneAccentBrush}" BorderThickness="0" Opacity="0.8" />
        <TextBlock Margin="6,6" Text="favorites" VerticalAlignment="Bottom" Foreground="White" />
    </Grid>
</Grid>

Assume the above XAML is my page. What I want is to animate the "inner grid" using the "Grid_MouseLeftButtonDown" handler.
This "Button" (Grid) will not navigate - it will just start some calculations.

Manfred

[Valentin.Stoychev]

Hello ManniAT,

I see what you mean now. You need to use the animation only, not the transition. Here is the updated code. Please let us know if it helps:

XAML

<Grid Margin="0,0,0,0" x:Name="grdButtons">
            <Grid.RowDefinitions>
                <RowDefinition Height="162"/>
                <RowDefinition Height="162"/>
                <RowDefinition Height="162"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="175"/>
                <ColumnDefinition Width="175"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Row="0" Grid.Column="1" Width="140" Height="140" MouseLeftButtonDown="Grid_MouseLeftButtonDown" x:Name="grdBtn">
                <Border Background="{StaticResource PhoneAccentBrush}" BorderThickness="0" Opacity="0.8" x:Name="ElementToAnimate">
                    <TextBlock Margin="6,6" Text="favorites" VerticalAlignment="Bottom" Foreground="White"/>
                </Border>
            </Grid>
        </Grid>

C#

private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.SetValue(RadTileAnimation.ContainerToAnimateProperty, grdBtn);
    this.SetValue(RadTileAnimation.ElementToDelayProperty, ElementToAnimate);

    RadTileAnimation tileAnimation = new RadTileAnimation();
    tileAnimation.InOutAnimationMode = Telerik.Windows.Controls.Animation.InOutAnimationMode.Out;
    tileAnimation.Ended += new EventHandler<EventArgs>(tileAnimation_Ended);
    RadAnimationManager.Play(this, tileAnimation);
}

void tileAnimation_Ended(object sender, EventArgs e)
{
    ElementToAnimate.Visibility = Visibility.Collapsed;
}

Greetings, Valentin.Stoychev
the Telerik team

[ManniAT]

Hello Valentin,

that's telerik support :)
a.) extremely fast answer
b.) answer includes a working sample
c.) answer (almost) solves the problem

THANK you for this.
So I'm almost done with this.

There is only one thing left - to find / set the correct animation.
In your samples browser (start screen) there are a lot of buttons (tiles).

They act - like the ones on the WP startscreen.
Where ever I press (location on the button) it goes a bit "down" - somehow like a piece of wood on water.

And it stays there till I release it - which fires the action - or move the finger out of the button.
I took a look at the sample application code - and found no "finger location detection methods" or something like this.
So I guess this is something the TileAnimation is able to do automatically.

I'm sure you can point me in the right direction.
By the way - the XAML above was reduced - I have about six buttons in there - just to let you know.

Thank you again
Manfred

[Valentin.Stoychev]

Hi ManniAT,

What you described is called a Tilt interaction effect in WP7. We have this as a separate helper. Please check the attached project.

Greetings, Valentin.Stoychev
the Telerik team

[ManniAT]

Hi Valentin,

thank you for the sample - much better now :)

First of all - I removed the "hiding" at the end of the animation.
After this it behaves like the animation in the telerik WP7 sample - at least at press.

BUT - after I release the button it "fips".
I could eliminate this with the following code changes

RadTileAnimation tileAnimation = new RadTileAnimation();
private void grdBtn_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
    this.SetValue(RadTileAnimation.ContainerToAnimateProperty, grdBtn);
    this.SetValue(RadTileAnimation.ElementToDelayProperty, ElementToAnimate);
    tileAnimation.InOutAnimationMode = Telerik.Windows.Controls.Animation.InOutAnimationMode.Out;
    tileAnimation.Ended += new EventHandler<EventArgs>(tileAnimation_Ended);
    RadAnimationManager.Play(this, tileAnimation);
}

void tileAnimation_Ended(object sender, EventArgs e)
{
    //ElementToAnimate.Visibility = Visibility.Collapsed;
}

private void grdBtn_MouseLeave(object sender, MouseEventArgs e) {
    RadAnimationManager.Stop(this, tileAnimation);
}

private void grdBtn_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) {
    RadAnimationManager.Stop(this, tileAnimation);
}

private void grdBtn_LostMouseCapture(object sender, MouseEventArgs e) {
    RadAnimationManager.Stop(this, tileAnimation);
}

Although it's much better now - it still flips when I press - and drag the finger out - releasing it outside the control.

This doesn't take place in the sample.
And there is no complex "StopAnimation on every possible event" in the sample - it just doesn't flip.


I also noticed that you changed the element to a button.
Is this a must to have the animation work?

Manfred

[Valentin.Stoychev]

Hi ManniAT,

Button is needed now, because we can't enable the tilt effect on a particular element - only on a particular type. This will be changed with the beta2 release next week and you will not need the button.

The stop animation is needed here, because you are on the same page and thus if the stop is missing you will see that the element is back to its original state. In the page sample - you navigate to another page and you don't see this - that is why you don't need the stop event there.

Best wishes, Valentin.Stoychev
the Telerik team

[ManniAT]

Sorry but I do not agree :)
Test the sample - push the button - move the finger out and release it.
No flip at all. And no navigation to - of course.

And there is also no code (at least I didn't find it) to stop the animation.

[Valentin.Stoychev]

Hi ManniAT,

If you don't want the animation to start when you are outside of the button you need to modify a bit the ManipulationCompleted event handler:

private void grdBtn_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
    if (!e.IsTapGesture()) return;

Please let us know if this helps.

Greetings, Valentin.Stoychev
the Telerik team

[ManniAT]

That did the rest :)

Thank you for your help!
This is support every customer wants to have!!!

Once again - you did a great job - providing a real great "teleriks is different" experience!

And I'm glad to hear that animation support will also be provided on "normal" UI elements with some of the next versions.

Kind Regards
Manfred

[ManniAT]

Hi Valentin,

I finally got what I needed :)
Your little sample fixed my problems.
Afert messing around a lot (and still missing tilts in my project - except with the unwanted flip afterwards) I found a single line of code I missied in my project.

this.SetValue(InteractionEffectManager.IsInteractionEnabledProperty, true);

This line did all I needed. The rest was pretty easy. Checking the enabled types of InteractionEffectManager I found that ButtonBase is supported.
I made a class (sry for that - just declared an derivied :)) derivied from ButtonBase. Changed my Grids to this class - DONE.
Perfect tilt - no (unwanted) highlight - no "extra padding" (from the button) - perfect.

Last not least it turned out that RadControl for WP7 can do much more than expect - with almost NO extra coding. I just had to add that stupid line - I never noticed before.

So come on guys - recruit some "documentation writers" - to let us all knwo what's possible :)

Cheers
Manfred

[Deyan]

Hi Manfred,

The documentation will be updated with new content about the TiltInteractionEffect and the InteractionEffectManager as well. We did not publish documentation about these classes since they were meant to be used internally at the beginning.

If you notice any other issues with missing documentation, do not hesitate to let us know.

All the best,
Deyan
the Telerik team

[ManniAT]

Hi Deyan,

pleas don't treat my previous post as a kind of silent reproach.
I was a bit kidding (you may have noticed the smiley).

And I also know the early state of the product.

BUT - and that's why I had to mention the documentation - RadControls for WP7 have so much to provide - we just have to know about it.

A little note:
    When I checked the enabled types of the effect manager I hoped a "side effect" would occur - and it did.
    Without any further coding my listboxes are also "cool animated".

Manfred

[Miroslav]

So far I have been using SL Toolkit. Its TiltEffect is a DP and thus it's realy easy to attach it to lots of elements. I don't like having lots of codebihnd since MVVM is the way I preffer to go. Can't you make something like the TiltEffect ?

[Deyan]

Hi Miroslav,

Currently, with TiltInteractionEffect the only thing you should do programmatically is add the type of the element you want to have tilted in the AllowedTypes collection of the InteractionEffectManager class. Take a look at the following online help article for more information:

http://www.telerik.com/help/windows-phone/telerik-windows-controls-tiltinteraction.html 

Otherwise the InteractionEffect itself is an attached property and can be used in XAML context.

I hope this is helpful.

All the best,
Deyan
the Telerik team

[Miroslav]

Thanks Deyan,

It was my bad. Sorry for overlooking it.

[Deyan]

Hi Miroslav,

No worries. If you notice any inaccurate contents in our Online Help - do not hesitate go get back to us.

All the best,
Deyan
the Telerik team