Virtualized TileView for Silverlight and WPF, different sizes, automatic scrolling and much more.

by Miro Miroslavov | Comments 10

With the Q1 2011 release just being around the corner a new and amazing version of RadTileView will be available. It is sleek, fast and more responsive than ever and it brings a whole set of new features and functionality to the table.

Download and play with the new bits.

Get Microsoft Silverlight

Virtualization

The main feature, that I’m sure you’d like most is the UI Virtualization (delaying the creation of UI Elements). We implemented it in both tiling scenarios:

  • Restored – this includes both directions - Horizontal and Vertical. It means that if you have 10 columns x 1000 rows you'll get 10 000 tiles and you’ll see both scrollbars. However, the realized tiles will be just these which are visible and while scrolling new tiles will be realized and showed on the fly.
  • Maximized | Minimized – when you maximize a tile, the rest become Minimized. At this point the necessary scrollbar will be shown and only the visible minimized tiles will be created (realized). At the end you’ll have just few tiles created even though the TileView has thousands of items. This feature is available for every minimized items dock position - Left, Right, Bottom and Top.

This new feature will enable tons of new scenarios where great UX and incredible performance and mandatory.

Different Sizes

The new TileView comes with a bunch of new ways to set various sizes to the tiles. You can quickly start with the following RadTileView properties:

  • RowHeight – defines the height of the restored tiles. Note that it's of type GridLength:
    • Absolute sizing – sets exact height to the restored tiles.
    • Star sizing (*) – the available height will be distributed equally among the restored tiles (just like a Grid panel).
    • Auto sizing – each restored tile will take as much as it needs. This will allow scenarios where the tiles may have different height.
  • ColumnWidth - defines the width of the restored tiles. Note that it's of type GridLength:
    • Absolute sizing – sets exact width to the restored tiles.
    • Star sizing (*) – the available width will be distributed equally among the restored tiles (just like a Grid panel).
    • Auto sizing – each restored tile will take as much as it needs. This will allow scenarios where the tiles may have different width.
  • RowsCount – specifies how many rows you need.
  • ColumnsCount – specifies how many columns you need.
  • MinimizedRowHeight – defines the height of the minimized tiles. It is of type GridLength.
    • Absolute sizing – sets exact height to the minimized tiles.
    • Auto sizing – each minimized tile will take as much as it needs. This will allow scenarios where the minimized tiles may have different height.
  • MinimizedColumnWidth – define the width of the minimized tiles. (GridLength)
    • Absolute sizing – sets exact width to the minimized tiles.
    • Auto sizing – each minimized tile will take as much as it needs. This will allow scenarios where the minimized tiles may have different width.

Please note that each RadTileViewItem also allows you to specify sizes on per tile base.

  • RestoredHeight(Width) – specify the size of the tile in restored state.
  • MinimizedHeight(Width) – specify the size of the tile in minimized state.

Combining all these properties allows you to use TileView in a lot of new scenarios and types of applications.

Automatic Scrolling

Lets imagine we have a TileView with 100 000 restored tiles (10 x 10 000) and both scrollbars are visible. In this scenario we need a way to automatically scroll the tile while Dragging – the way we do it in Windows Explorer when dragging a file just near the end of the viewable area. You can enable the same functionality using a single property of RadTileView - IsAutoScrollingEnabled. So to recap – drag an item near the end of the viewable area and stay there for a moment – the automatic scrolling will start immediately. Also note that this will work in both directions - horizontal and vertical.

What’s next

These are just a few of the new features that will be available with the Q1 Beta and later with the official release. Please stay tuned for upcoming posts, demos and examples showing the rest of the features.

What do you think about the new RadTileView? Please share your feedback.

But first Download and play with the new bits.

About the author

Miro Miroslavov

Miro Miroslavov

is XAML enthusiast and Team Leader at Telerik. He’s responsible for the RadDiagram framework and some related products. You can follow him on Twitter at @mmiroslavov.

 

Posted in: animations silverlight radtileview performance

10 Comments

Miro Paskov
Fantastic! Looking forward to more examples :)

Jaime Bula
Virtualization for Wrap Panel Please :D !!!
Ben
You guys never stop [in perfection]... :-)

Please make the design time better!
Thanks!
..Ben
Miro Miroslavov
Hey @Miro,
Thanks for following :). You'll definitely like the other new stuff.

Hey @Jaime,
It's a little more complicated than the WrapPanel, but let's that there is something in common between the Restored states and WrapPanel. :) 

Hey @Ben,
You're absolutely correct as always, we've plan to improve it in the mid time between the Beta and the official Q1.

Thanks for the feedback
Ben Hayat
a) Let's say I bind this control to Database and user makes a search for a record that represents one of the tiles. Is there a way to jump/go to a tile at runtime? And the tile will become the main/maximized tile?

b) Just like "PanelBar" that is divided into Categories and Sub-Categories, it would be great to do the same with TileView. First it will show the main categories stacked and as the user click on the title, the sub-category (which are the tiles) will show up.
This way I can for example divide them into Trucks, Cars, Boats, Planes categories.

Controls like this, that will make Silverlight shine above HTML platform. I'm very pleased to see Telerik is taking SL to the next level!

Please be sure the examples cover Database data binding like you do in the GridView.

..Ben
Miro Miroslavov
@Ben,

a) Really cool scenario, there will be easy way to do this for the official release (just call item.BringIntoView()) and then maximize it. Till then I will create the same example without it. I will post somewhere as soon as it is ready.

b) With the upcoming release we'll ship new FluidContentControl (based on RadTransitions) that integrates perfectly with the TileView and IMO the best way will be to have 3 contents for each state of the tile and for example the Maximized state will give the full information about the item (sub-categories and so forth). We may discuss this a little more and create nice and full example out of it. :)

Thanks for the feedback! :)

Miro M.
Ben
Thanks Miro;

With this new engine it can be used in many scenarios. I always liked RADBook and RADCoverFlow, however the amount or Screen Real estate you need to fully place enough data, takes up too much space. With TileView and it's three states, it's very compact and almost like three controls (List control, WrapPanel Control and a DetailPanel control) all built into one and still save space.

Thanks!
..Ben
Miro Miroslavov
Hey Ben,

I'm happy to hear that you find the TileView an useful control. We'll invest more time and efforts in the near future, so you can expect a lot of new features. 
You can also take a look at this blog post covering the Docking feature - http://bit.ly/eSxWYH :)

Regards,
Miro M.

Ivan
I just wonder why is it that when scrolling with the arrows when in "MinimizedColumnWidth
" mode, the scroll thumb acts so weird. Probably a miss calculation?
Ivan
I am sorry i meant when maximizing a column :)

Comments

  1.    
     
    		 
    		  
       
  3. (optional, emails won't be shown on public pages)
  4. (optional)
Read more articles by Miro Miroslavov - or - read latest articles in Developer Tools
Bloggers Archive Tags