Old content 'jumping' when using DropShadowEffect

[Kowal]

Hello,

I've got problem with your TransitionControl when its content (or contenttemplate) uses DropShadowEffect on outer border.

It looks like just before the transition begins, an old content of a TransitionControl is being frozen, scaled up a bit and then replaced by a new content. The problem is this 'scaling up' = jumping behavior, which looks really ugly.

This bug(?) can be easily reproduced using your demo project (Controls->Containers->TransitionControl->Custom transition) where you have to modify EmployeeDataTemplate as listed below:

<DataTemplate x:Key="EmployeeDataTemplate">

    <Grid Margin="10" Background="Aquamarine">

        <Grid.Effect>

            <DropShadowEffect ShadowDepth="0" Opacity="0.7" BlurRadius="15"/>

        </Grid.Effect>

        <Border Margin="115,0,0,0" BorderBrush="#FFD6D6D6" BorderThickness="2" CornerRadius="7" Height="230" VerticalAlignment="Center" HorizontalAlignment="Left" Width="250">

<!-- ..... -->

</DataTemplate>

(the only change is the Margin, Background and Effect of the DataTemplate's main Grid)

Could you please help me solve this problem?

Regards,
Kowal

[Pana]

Hi Kowal,

RadTransitionControl have problems with that indeed. The DropShadowEffect is an effect that has Paddings (it renders larger than its content is) so when we capture an image with something with shadow and play the animation the old image is actually scaled so it may fit the RadTransitionControl area. We were able to fix some similar issues by putting the Shadow on somewhat element deeper in the visual tree (not like you on the first Grid in the DataTemplate) and adding some margins on the elements so the shadow can look more like part of the content instead of rendered outside. It depends on the template you are styling though. Also I am not sure if and how we are going to fix this issue.

I hope this information will help you somehow to workaround the problem.

Regards,
Panayot
the Telerik team

[Kowal]

Hi Panayot,

Could you please elaborate more on this sentence:
"We were able to fix some similar issues by putting the Shadow on somewhat element deeper in the visual tree (not like you on the first Grid in the DataTemplate) and adding some margins on the elements so the shadow can look more like part of the content instead of rendered outside."

Actually I've tried a similar solution before, but without a success. Putting the first grid inside other layouts, i.e. deeper in the visual tree doesn't change a thing. Could you please provide an example how to workaround the problem in the modified TransitionControl demo project?

Regards,
Kowal

[Pana]

Hi Kowal,

Here is an RadTransitionControl with shadow in its ContentTemplate playing nice transitions when the numeric is clicked and the content of the RadTransitionControl is changed.

All the best,
Panayot
the Telerik team

[Kowal]

Thank you, I get it now. DropShadowEffect paints larger outline than it seems and you have to set much larger margin to fit the shadow in your control (its template). It's a pity you won't fix it in your TransitionControl though...


Regards,
Kowal

[Kowal]

FYI, it seems your current demo application is also affected by problem I described.
Look for example at this one
http://demos.telerik.com/silverlight/#GridView/RowNumber
and change View from Code to Example and see how it behaves during this transition (it stretches twice horizontally).

Regards,
Kowal

[Pana]

Hello Kowal,

We will investigate the example and try to fix the issue. Thank you for your feedback.

Greetings,
Panayot
the Telerik team

[pompomJuice]

It's still broken.

[Pana]

Hi,

We have refactored the RadTransitionControl in our Development branch and currently we are making tests with it integrating it in some real case scenarios. It handles the stretching as well as it has support for layout animations now. It will be available to the public in a SP if all tests go well or for the Beta of Q3 if we need more time to polish it.

Thank you for your interest in our controls.

Best wishes,
Pana
the Telerik team

[pompomJuice]

That is good news!

Cant wait!