Dynamic loading tiles (with MVVM / MEF)

16 posts, 3 answers
  1. Eric Schoenholzer
    Eric Schoenholzer avatar
    138 posts
    Member since:
    Mar 2004

    Posted 11 Mar 2010 Link to this post

    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 { getprivate 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



  2. Answer
    Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    576 posts

    Posted 12 Mar 2010 Link to this post

    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.
  3. DevCraft banner
  4. Eric Schoenholzer
    Eric Schoenholzer avatar
    138 posts
    Member since:
    Mar 2004

    Posted 12 Mar 2010 Link to this post

    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
  5. Answer
    Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    576 posts

    Posted 12 Mar 2010 Link to this post

    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.
  6. Eric Schoenholzer
    Eric Schoenholzer avatar
    138 posts
    Member since:
    Mar 2004

    Posted 12 Mar 2010 Link to this post

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

    Thanks again
    Eric
  7. Eric Schoenholzer
    Eric Schoenholzer avatar
    138 posts
    Member since:
    Mar 2004

    Posted 12 Mar 2010 Link to this post

    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

  8. Answer
    Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    576 posts

    Posted 15 Mar 2010 Link to this post

    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.
  9. Eric Schoenholzer
    Eric Schoenholzer avatar
    138 posts
    Member since:
    Mar 2004

    Posted 15 Mar 2010 Link to this post

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

    Eric
  10. Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    576 posts

    Posted 15 Mar 2010 Link to this post

    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.
  11. Matt Tonsager
    Matt Tonsager avatar
    10 posts
    Member since:
    May 2010

    Posted 20 Aug 2010 Link to this post

    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
  12. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 20 Aug 2010 Link to this post

    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
    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
  13. Matt Tonsager
    Matt Tonsager avatar
    10 posts
    Member since:
    May 2010

    Posted 23 Aug 2010 Link to this post

    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
  14. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 23 Aug 2010 Link to this post

    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
    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
  15. HDC
    HDC avatar
    214 posts
    Member since:
    Dec 2010

    Posted 02 Aug 2011 Link to this post

    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
  16. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 05 Aug 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  17. HDC
    HDC avatar
    214 posts
    Member since:
    Dec 2010

    Posted 05 Aug 2011 Link to this post

    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
Back to Top
DevCraft banner