Telerik blogs
In this post I will show you how to arrange the HubTile for Universal Windows apps in a honeycomb pattern and achieve a result similar to the one below.

A task like this involves two steps:
1. Change the shape of the hub tile from square to hexagon.
2. Create a panel that will arrange the hexagons in a honeycomb layout.

Hexagonal Hub Tiles

The default shape of RadHubTile is a square.

To make it a hexagon, we need to edit the default ControlTemplate of RadHubTile. If you examine the stripped down version of the ControlTemplate below, you'll notice that all the magic happens in the Path object. The Data attribute of the Path object gives the hub tile a hexagonal shape and the Fill attribute, in conjunction with a converter, takes care of rendering the content of the hub tile.

If you want to dig deeper into the custom ControlTemplate of RadHubTile, examine the Resources.xaml file in the HoneyComb_HubTile.Shared project. (the link to the source code is available at the bottom.)

Honeycomb Layout Panel

Creating a panel that arranges the hexagon tiles in a honeycomb pattern turned out to be easier than I thought. The panel has three properties: ItemLength, Row and Column.

  • ItemLength: This dependency property is used in the MeasureOverride method and sets the width and height of each hub tile.
  • Row and Column: These two are attached properties and work the same way as Grid.Row and Grid.Column do. They are used in the Arrange pass of the panel

Using the Honeycomb Panel

The HoneycombPanel accepts a set of hub tiles. These tiles can be arranged by usingthe attached HoneycombPanel.Row and HoneycombPanel.Column properties.

Full source code is available on GitHub:

To run the project, reference Telerik.Core.dll and Telerik.UI.Xaml.Primitives.dll, which are part of UI for Windows Universal.

About the Author

Kiril Stanoev

Hi, I'm Kiril and I'm the Product Manager of Telerik UI for Android, Windows Universal and Windows Phone. Feel free to ping me on +KirilStanoev or @KirilStanoev


Comments are disabled in preview mode.