Dynamic loading of images in mosaic hub tile

[Nathan]

Hello Telerik,
First: I just wanted to note that this is a XAML/C# question but the button to start a new thread in the XAML section of this forum appears to be missing. I can start a new thread in all the other sub forums I've checked, but not that one. If this question can be moved, please do so.
Second: the reason I am posting...
It appears that I cannot data bind against an async loaded image source.
Explanation: I can do this and it loads just fine and produces the mosaic effect.

public viewmodelConstructor()
{
  ObservableCollection<BitmapSource> ImageCollection = new ObservableCollection<BitmapSource>();

                ImageCollection.Add(new BitmapImage(new Uri("someUrl",UriKind.Absolute)));

                ImageCollection.Add(new BitmapImage(new Uri("someUrl",UriKind.Absolute)));
}

But if I have to gather the urls from a json data source through an async method and load them into the observable collection (which, like above, is databound in the exact same fashion), it doesn't.

ObservableCollection<BitmapSource> Images { get; set; }

public viewmodelconstructor()
{
  Images = new ObservableCollection<BitmapSource>();
  GatherImages();
}

private async void GatherImages()
{
  var imageColl = await ServerConn.GetImages(); //returns a collection of image data
  foreach(iterate on imageColl)
  {
    Images.Add(new BitmapImage(new Uri("someUrlinIterateObject", UriKind.Absolute));
  }
}

Is there a property setting I'm missing? Or does it not load images dynamically through an asynchronous method?

Thanks for the help!

[Ivaylo Gergov]

Hello Nathan,

Thank you for using our RadControls for Windows 8!

I went through your code snippet and I concluded that RadMosaicHubTile does not listen for OnCollectionChanged event. I have logged this issue as a bug in our bugtracking system and it will be fixed in our next release.
I can suggest you to call OnPropertyChanged method for the Images property after the collection is filled as a temporary workaround.

I hope this helps. If you have any other questions do not hesitate to contact us again.
   

Regards,
Ivaylo Gergov
the Telerik team

[Adrian]

Hello,

I have the same issue. I try to set the PictureSource through code, in a Button click event. And doesn`t work.

My XAML

<telerikPrimitives:RadPictureRotatorHubTile
                            x:Name="controlTelerik"
                            UpdateInterval="0:0:8"
                            PicturesSource="{Binding}">

and my code behind:

private void GridView_ItemClick_1(object sender, ItemClickEventArgs e)
{
    controlTelerik.PicturesSource = (this.DataContext as TrackSeries.ViewModel.MainViewModel).UrlList;
}

I try UrlList with List<string> with urls and a ObservableCollection<string>. The same issue.

If I debug in the event, the telerikControl.PicturesSource has elements, but not shown.

Thank you very much!

Regards

[Ivaylo Gergov]

Hello Adrian,

Thank you for your interest.

At this point in order to set the PictureSource property in runtime you need to set a collection before initialization and then set another. This issue is logged as a bug and it will be fixed in one of our next releases.
I hope this helps. Let me know if you need further assistance.

 

All the best,
Ivaylo Gergov
the Telerik team

[Lee]

I would appreciate having this fixed as I'm having the same problem.  I can't seem to use any of the workarounds suggested though.

I have a RadPictureRotatorHubTile as part of a gridview header's datatemplate.  All my gridviewitems are populated via binding to a viewmodel, making it difficult for me to try and reset the picturesource after initialization.  The OnPropertyChanged method had no effect.

Thanks.

[Ivaylo Gergov]

Hello Lee,

Thank you for using our RadControls for Windows 8 and for your feedback!

This bug is fixed in our development version and it will be available in our next internal build which will be available after the Christmas and New Year Holidays.

I hope this information is helpful. Let me know if I can assist you in some other way.

Greetings,
Ivaylo Gergov
the Telerik team

[Manuel Henry II]

how do you set the picturesource on initialize javascript?

[Tsvetina]

Hi Manuel,

Setting the pictureSource on initialize javascript is done the same way as assigning it in the data-win-options attribute.

You need to provide an array of image paths as a value for this property, as shown here:
http://www.telerik.com/help/windows-8-html/hubtile-features-picturerotatorhubtile.html 

In the sample foodImagePaths is an array like the one below:

[
    '/images/food/1.jpg',
    '/images/food/2.jpg',
    '/images/food/3.jpg'
]

If you encounter a problem with viewing the images initially, make sure you use the SP release (2012.3.1204) where a related bug was fixed.

If you still encounter problems, please post in the forums for RadHubTile for Windows 8 HTML, or open a support ticket for that product.

Regards,
Tsvetina
the Telerik team