Blend Image refresh with transitionControl

[Ariel]

Hi, I have a panel with many Images from webcams, each Image is refreshing each 30 seconts. I'm looking for a way to make the flicker soften when I refresh these images, containing these images into a transitioncontrol. But when I refresh an image this still flickering.

Each Image is into a TileViewItem like this:

            <telerik:RadTileViewItem Header="Av. Rivadavia y Av. Pueyrredón" Width="{StaticResource TileViewItemWidth}" Height="{StaticResource TileViewItemHeight}">
                <telerik:RadFluidContentControl ContentChangeMode="Manual">
                    <telerik:RadFluidContentControl.SmallContent>      
                        <telerik:RadTransitionControl  Duration="00:00:03">
                            
                            <telerik:RadTransitionControl.Transition>
                                <telerik:MotionBlurredZoomTransition />
                            </telerik:RadTransitionControl.Transition>
                            
                            <telerik:RadTransitionControl.Content>                                
                                    <Image Source="http://www.buenosaires.gov.ar/areas/obr_publicas/camaras/senalamiento_MostrarCamaras.php?camara=11&amp;SegundosActualizacion=30&amp;MostrarNoImagen=1" x:Name="imgCam1s" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top" />                                
                            </telerik:RadTransitionControl.Content>
                            
                        </telerik:RadTransitionControl>                        
                    </telerik:RadFluidContentControl.SmallContent>
                    <telerik:RadFluidContentControl.Content >
                        <Image Source="http://www.buenosaires.gov.ar/areas/obr_publicas/camaras/senalamiento_MostrarCamaras.php?camara=11&amp;SegundosActualizacion=30&amp;MostrarNoImagen=1" x:Name="imgCam1c" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top" />
                    </telerik:RadFluidContentControl.Content>
                    <telerik:RadFluidContentControl.LargeContent>
                        <Image Source="http://www.buenosaires.gov.ar/areas/obr_publicas/camaras/senalamiento_MostrarCamaras.php?camara=11&amp;SegundosActualizacion=30&amp;MostrarNoImagen=1" x:Name="imgCam1l" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                    </telerik:RadFluidContentControl.LargeContent>
                </telerik:RadFluidContentControl>
            </telerik:RadTileViewItem>

I call the refresh changing the Image source adding a ?rnd=XXX parameter to the url.

Maybe I don't understanding how this component works.

[Rosen Vladimirov]

Hi,

We have created a sample project to illustrate one possible solution to your problem. The RadTransitionControl is only applying transitions when the Content is changed, that`s why you have to bind the content and to change the images which you are using (for more information visit our online help: http://www.telerik.com/help/silverlight/radtransition-features-data-binding.html )
Before setting the new image as a TransitionControl Content you`ll have to be sure that it has been downloaded. If you set it before it is downloaded the transition will still be triggered and you will see an animation from the old image to a blank screen. Then when the new image loads it will appear immediately without transition. So we are using the following:
bitmapImage.CreateOptions = BitmapCreateOptions.None;
to make the image load as soon as possible
(more information here http://msdn.microsoft.com/en-us/library/system.windows.media.imaging.bitmapcreateoptions(v=vs.95).aspx ) and we are setting the TransitionControl Content after the image is downloaded successfully (using ImageOpened event)

Please check the attached project and hopefully it`ll help you to resolve the issue. Inform us in case of any concerns.

Regards,
Rosen Vladimirov
the Telerik team