This is a migrated thread and some comments may be shown as answers.

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

4 Answers 14 Views
TransitionControl
This is a migrated thread and some comments may be shown as answers.
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
Rob A. asked on 21 Jan 2021, 11:33 PM

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.

4 Answers, 1 is accepted

Sort by
0
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 26 Jan 2021, 01:13 AM

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.

 

 

0
Vladimir Stoyanov
Telerik team
answered on 26 Jan 2021, 09:36 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 27 Jan 2021, 01:29 AM

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.

0
Vladimir Stoyanov
Telerik team
answered on 29 Jan 2021, 01:39 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TransitionControl
Asked by
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
Vladimir Stoyanov
Telerik team
Share this question
or