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: https://github.com/telerik/win8-xaml-sdk/tree/master/Blogs/HoneyComb_HubTile/HoneyComb_HubTile
To run the project, reference Telerik.Core.dll and Telerik.UI.Xaml.Primitives.dll, which are part of UI for Windows Universal