IconHubTile

Updated on Mar 26, 2026

RadIconHubTile is a tile that allows for an IconSource to be displayed as its content.

Properties

The RadIconHubTile exposes the following properties on top of the common ones for all tiles:

• IconSource: Gets or sets the graphic content of the tile.
• Message (object): Gets or sets the message content that is displayed in the top-left corner of the control.
• MessageTemplate (DataTemplate): Gets or sets the DataTemplate that is used to visualize the Message property.
• Notification (object): Gets or sets the additional information (notification) displayed on the tile. Typically this may be the Message Count and is displayed in the bottom-right corner of the control.
• NotificationTemplate (DataTemplate): Gets or sets the DataTemplate that is used to visualize the Notification property.

You can use the BitmapIconSourceExtension, FontIconSourceExtension and SymbolIconSourceExtension markup extensions to help you provide an IconSource.

Example

Example 1 demonstrates how to define a RadIconHubTile and set its IconSource via the BitmapIconSource markup extension.

Example 1: Defining a RadIconHubTile

XAML

<Grid xmlns:telerik="using:Telerik.UI.Xaml.Controls.Primitives" xmlns:telerikCore="using:Telerik.Core">
	<telerik:RadIconHubTile Title="Title" Message="Message" BackContent="Back content" 
						   Notification="Notification" UpdateInterval="0:0:2" 
						   IconSource="{telerikCore:BitmapIconSource Source='ms-appx:/Images/MyPicture1.png'}">
		<telerik:RadIconHubTile.MessageTemplate>
			<DataTemplate>
				<TextBlock Text="{Binding}" Foreground="Red" />
			</DataTemplate>
		</telerik:RadIconHubTile.MessageTemplate>
		<telerik:RadIconHubTile.NotificationTemplate>
			<DataTemplate>
				<TextBlock Text="{Binding}" FontStyle="Italic" />
			</DataTemplate>
		</telerik:RadIconHubTile.NotificationTemplate>
		<telerik:RadIconHubTile.TitleTemplate>
			<DataTemplate>
				<TextBlock Text="{Binding}" FontSize="13" />
			</DataTemplate>
		</telerik:RadIconHubTile.TitleTemplate>
		<telerik:RadIconHubTile.BackContentTemplate>
			<DataTemplate>
				<TextBlock Text="{Binding}" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="21" Foreground="DarkGreen" />
			</DataTemplate>
		</telerik:RadIconHubTile.BackContentTemplate>
	</telerik:RadIconHubTile>
</Grid>

See Also

• HubTile
• HexHubTile