Dynamic loading tiles (with MVVM / MEF)

[Eric Schoenholzer]

I like to load dynamically tiles into a RadTileView.
So I defined different RadTileViewItem which should bind to different ViewModels and data.
Example of a item;

<navigation:RadTileViewItem x:Class="NC.Views.Tiles.ListTileViewItem" ,,,

In the main ViewModel I defined a collection

public IEnumerable<RadTileViewItem> Tiles { get; private set; }  ... Tiles = new List<RadTileViewItem> { new ListTileViewItem(), new ListTileViewItem() };

and try to bind it to the tile view control:

DataContext="{Binding}" ItemsSource="{Binding Tiles}"

But it doesn't work as expected.
The tile control shows the number of tiles defined in the collection, but without any content or formatting, only empty TileItems.

So my question is what I'm doing wrong?
I assume the generic RadTileViewItem list gives problem.
What's the correct way to add different formatted tiles?

The end goal is to have a dashboard where I can add via DragDrop new tiles which are showing in different way data (List, Graph, Chart, etc). I'm using a MVVM approach including MEF to initate the views and models.

Thanks
Eric

[Tihomir Petkov]

Hi Eric,

The more canonical approach would be to use template selectors and a set of different data templates that correspond to the different types of data you want to visualize.

http://www.telerik.com/help/silverlight/common-data-binding-template-selectors.html
http://msdn.microsoft.com/en-us/library/ms742521.aspx

The TileView control offers an ItemTemplate and ContentTemplate properties which define how data will be visualized in a tile's header and content areas. Botth properties have correponding template selector properties which you can use to dynamically determine the correct data template for a business object.

I hope the above info will be useful. Let me know if you have other questions.

All the best,
Tihomir Petkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Eric Schoenholzer]

Hi Thiomir,

Thanks for answering.
I understand now how to style the tiles.

What about the binding?
Should I bind directly to a collection of business objects?

Eric

[Tihomir Petkov]

Hello Eric,

This really depends on your exact scenario. In general, you would want to bind the TileView's ItemsSource to a property of your ViewModel that contains the business objects that will be visualized in it. Template selectors will take care of picking up a proper template for each data item. If your source collection implements the INotifyPropertyChanged interface (ObservableCollection), then any changes you do will be automatically detected by the TileView. But again - the devil is in the details :)

Sincerely yours,
Tihomir Petkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Eric Schoenholzer]

Thanks, exactly my thoughts.
So I'm going to work on the details.

Thanks again
Eric

[Eric Schoenholzer]

I'm looking for more information about RadTileView and the two TemplateSelector.

What the difference between these two selectors?
ItemTemplateSelector when I need to set all, like header, content and largeContent?
ContentTemplateSelector only for the content (without largecontent, header ..) ?

Do you have any samples for the RadTileView?

Thanks
Eric

[Tihomir Petkov]

Hi Eric,

The ItemTemplateSelector determines the correct template for the content in an item's Header. The ContentTemplateSelector determines the template for an item's Content (what is rendered below the Header). What is confusing for many is the part the FluidContentControl plays within a TileView. The FluidContentControl is a completely independent control that has nothing to do with the TileView - it is useful when used within a TileView, but is by no means restricted to usage within it. Thus, the LargeContent, SmallContent etc. are properties of the FluidContentControl, while a TileViewItem has only a Header and Content. In most examples, a FluidContentControl is set as the Content of TileViewItems.

I hope I was able to make things clearer. Let em know if you have further questions.

Regards,
Tihomir Petkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Eric Schoenholzer]

Great, thanks. I mixed it up too.
Should be clarified now.

Eric

[Tihomir Petkov]

Hello Eric,

I'm glad I was able to help.

Best wishes,
Tihomir Petkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Matt Tonsager]

Hello,

The ItemTemplateSelector  for the RadTileView does not seem to be working. I can set the property and it is set correctly, but it does not run the SelectTemplate Method. I am using the current Build (0714).

Would someone send code that works with this in the current version?

Thanks,
Matt

[Tina Stancheva]

Hello Matt Tonsager,

I prepared a sample project illustarting how you can use the ItemTemplateSelector. Please take a look at it and let me know if it works for you or if you need mroe info.

Sincerely yours,
Tina Stancheva
the Telerik team

[Matt Tonsager]

Hello,

Sorry about that, but this was for WPF not Silverlight.

I reposted it here http://www.telerik.com/community/forums/wpf/tileview/itemtemplateselector-not-working.aspx

Would you happen to have a WPF example?

Thanks,
Matt

[Tina Stancheva]

Hello Matt Tonsager,

Please find attached a WPF example. Give it a try and let me know if it works for you.

Regards,
Tina Stancheva
the Telerik team

[HDC]

Hi Tina,

That is a great demo... but i have a question

Is it possible to make the usercontrols scale inside the tiles depending on the size of the tile?

For example:

I make my usercontrols 800 x 600 (height x width), how can i make them scale them down to fit exactly to the size of tile (taking into account that the tile is maximized or minimzed)?

If that were possible i could use this control to make an application similar to powerpoint.

Best Regards,

Peter

[Tina Stancheva]

Hello Peter,

I am not sure I understand your issue correctly. But basically setting a UserControl's HorizontalAlignment and VerticalAlignment properties to Stretch will take up the available space of the TileView. So if you place a stretched UserControl as a Content of the TileViewItems the content will fill all available space and will resize accordingly to the tile's size - in minimized, maximized and restored state.

Please let me know if this info helps or if I am missing something from your scenario.

Best wishes,
Tina Stancheva
the Telerik team

[HDC]

Hi Tina,

That solves my problem.

I am trying to make an application similar to PowerPoint and i wanted to make sure that the minimized slides showed a scaled down version of the slide when it is maximized.

I thought that i needed to have the maximized size to do this reliably, but i now realize that in fact i have to use "a" fixed "Maximized" size (that i can choose arbitrarily). If i would use the size of the maximized slide and the user resizes the screen in, there could be notable differences between the scaled down slides.

And when the slide is maximized i will simply not scale the slide at all.

Thanks a lot for your assistance, much appreciated!

Best Regards,

Peter