How to transition (Fade In/Out) two images?

[Rob A.]

After reading the documentation on the RadTransitionControl, I'm no closer to understanding how it works.  You have some sample code but it is out of context and/or partial.  I'm trying to perform a simple task of fading in/out two images.

Any hints?  I don't need to load and entire project or solution ... just a relevant code snippet would do.

Cheers, Rob.

[Rob A.]

I've experimented with trying to get the RadTransistion to work but no luck, it just does animate (using a RadWindow).

My xaml

<Border Grid.Row="0" Grid.Column="4" Grid.RowSpan="3" Margin="4,4,4,4" BorderThickness="2" BorderBrush="LightGray"  >
    <telerik:RadTransitionControl>
        <telerik:RadTransitionControl.Transition>
            <telerikTransitions:MotionBlurredZoomTransition />
        </telerik:RadTransitionControl.Transition>
        <Image x:Name="imPresetSample" Source="../Data/Presets/Default/DefaultS.png" Stretch="Fill" />
    </telerik:RadTransitionControl>
</Border>

 

My code behind is a DispatcherTimer triggered every 4 seconds that will update the Image.Source (imPresetSample).

Code executes without errors and my image changes but it does NOT animate per Transition?

Cheers, Rob.

 

 

[Vladimir Stoyanov]

Hello Rob,

Thank you for the shared code snippet. 

Generally speaking, the RadTransitionControl is just a ContentControl that animates a change in its Content. In the scenario from the code snippet the Content of the control is the Image element. Since the RadTransitionControl is not aware that the Source of the Image has changed, you need to set its Content to a new Image element in order to trigger the transition. 

I am attaching a sample project demonstrating how you can switch the Content of the RadTransitionControl in a DispatcherTimer and flip between some pictures. You can also check out the DataBinding example, which shows how the control can be setup in an mvvm manner. 

I hope you find this helpful. Let me know, if I can be of any further assistance.

Regards,
Vladimir Stoyanov
Progress Telerik

[Rob A.]

Yes it was helpful ... code snippet works better for me that entire solutions.

FYI, your documentation for the FlipWrapTransition is wrong ... the XAML code you provide is for the FadeTransition.

See here.

Cheers, Rob.

[Vladimir Stoyanov]

Hello Rob,

Thank you for pointing this out. I have updated the example and the documentation article will be changed the next time we upload the docs. I have also added some telerik points to your account as a thank you for bringing this to our attention. 

Regards,
Vladimir Stoyanov
Progress Telerik