Binding Image from URI - animation problem

[Karol]

Hello,
I have a problem with my RSS app. I download the XML RSS feed's asynchronously from the source server.
After downloading the xml and adding items into Collection of List<RssFeedItem> I send whole list as payload via Mediator(MVVM). My image is saved as string in ImageLink property for e.g "http://example.com/1.jpg" 
This is the receiving funciton :

private void FeedDonwloaded(object payload)
{
    BusyIndicator.IsRunning = false;
    FeedListBox.ItemsSource = (ObservableRssFeedCollection) payload;
}

I this method I assign the ItemsSource property to my received ObservableRssFeedCollection. And there are two problem:
1. How can I "request" a TileAnimation when the itemssource is assigned?
2. Second question is more complicated. 
This is my itemTemplate for DBListBox:

<DataTemplate x:Key="ListBoxItemTemplate">
            <Grid x:Name="grid" Width="480" Height="184" Opacity="1">
                <Grid.Background>
                    <LinearGradientBrush EndPoint="0.546,0.12" StartPoint="0.912,1.075">
                        <GradientStop Color="#FF018BB0" Offset="0.015"/>
                        <GradientStop Color="Transparent" Offset="0.019"/>
                    </LinearGradientBrush>
                </Grid.Background>
                <Image HorizontalAlignment="Left" Margin="8,8,0,8" Width="168" Source="{Binding ImageLink}" Stretch="UniformToFill"/>
                <StackPanel Margin="192,16,8,40">
                    <TextBlock TextWrapping="Wrap" Text="{Binding Title}" Foreground="#FF018BB0" FontFamily="Segoe WP Semibold" FontSize="24" Margin="0,0,8,0"/>
                    <Rectangle Height="11">
                        <Rectangle.Fill>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF0085FF" Offset="0"/>
                                <GradientStop Color="Transparent" Offset="0.409"/>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                </StackPanel>
                <TextBlock TextWrapping="Wrap" Text="{Binding PublishDate}" Foreground="#D6000000" Margin="192,0,4,8" VerticalAlignment="Bottom" FontSize="16"/>
            </Grid>
        </DataTemplate>

How can I wait for a this collection, that will have all information downloaded( I mean that Image control has downloaded picture from this URI).
E.G Scenario:

1. downloading the RssFeed(xml) from server and adding items into collection,
2. sending colection to view using Mediator,
3. assign the ItemsSource to sent collection
4. Wait for this collection that will have updated all bindings(especially Image control will have a complete picture),
5. Set BusyIndicator.IsRunning to false and dispaly collection with tile animation.

Best regards,
Karol
 

[Deyan]

Hello Karol,

Thanks for contacting us and for your questions.

1. The TileAnimation is only supported as page transition animation when using the RadPhoneApplicationFrame. You can, however, mimic this type of animation by using the ItemAddedAnimation property exposed by RadDataBoundListBox to define an animation that will be played for each item that is positioned in the list box' viewport. You can also use the ItemAddedAnimationInterval to define a small time interval that will be used to offset each separate item animation in time and thus achieve the sequential animations effect. You can read more about item animations here:

http://www.telerik.com/help/windows-phone/raddataboundlistbox-features-itemanimations-overview.html

If you want to achieve the TileAnimation effect for your items my suggestion would be to use the RadPlaneProjectionAnimation provided by our framework.

2. This scenario is indeed a little bit complicated. The Image element exposes the ImageLoaded event which you can handle. This event is fired when the image at the Uri provided as a source for the Image element has been rendered. In order for you to understand when all images currently visible in the listbox have been loaded, you can provide a handler for this event in XAML and in code-behind count the times the handler is called. When the handler is called for each visual item currenly realized in the ListBox (you can acquire this count from the RealizedItemsCount property) you can hide the BusyIndicator and show the listbox.

I hope this helps.

Let me know in case you need further assistance.

Regards,
Deyan
the Telerik team

[Karol]

Hello Deyan,
Thanks a lot it solved my problems and animation works perfectly.

Best regards,
Karol