Telerik blogs

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

Miroslav Miroslavov

is XAML enthusiast. You can follow him on Twitter at @mmiroslavov.

 

Comments

Comments are disabled in preview mode.