PictureRotatorHubTile

Updated on Mar 26, 2026

The RadPictureRotatorHubTile displays a set of pictures showing them one at a time over a time interval.

Properties

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

• PicturesSource (IEnumerable): Gets or sets the source that contains the pictures to display on a RadPictureRotator HubTile. Pictures are randomly chosen from this collection of image URIs when an image needs to be displayed.
• PictureSourceProvider (IImageSourceProvider): Gets or sets the implementation that is used to provide a custom image source resolution routine.

PicturesSource Example

Examples 1 and 2 demonstrate how to use the PicturesSource property with five pictures from an "Images" folder in the project.

Example 1: Defininig a RadPictureRotatorHubTile

XAML

<Grid xmlns:telerik="using:Telerik.UI.Xaml.Controls.Primitives">
	<telerik:RadPictureRotatorHubTile x:Name="MyHubTile"  />
</Grid>

Example 2: Populating the PicturesSource

C#

public sealed partial class MainPage : Page
{
	private const string AbsolutePath = "ms-appx:///Images/";
	public MainPage()
	{
		this.InitializeComponent();

		List<BitmapImage> pictures = new List<BitmapImage>();
		for (int i = 1; i <= 5; i++)
		{
			pictures.Add(new BitmapImage(new Uri(AbsolutePath + "MyPicture" + i + ".png", UriKind.RelativeOrAbsolute)));
		}
		MyHubTile.PicturesSource = pictures;
	}
}

PictureSourceProvider Example

Examples 3 and 4 demonstrate how to use the PictureSourceProvider property, which allows for introducing some logic for manually creating the ImageSources used in the control.

Example 3: Implementing the IImageSourceProvider interface

C#

public class ViewModel
{
	private List<string> picturePaths;

	public List<string> PicturePaths
	{
		get
		{
			if(this.picturePaths == null)
			{
				this.picturePaths = new List<string>() { "MyPicture1.png", "MyPicture2.png", "MyPicture3.png", "MyPicture4.png", "MyPicture5.png" };
			}
			return this.picturePaths;
		}												
	}	
}

public class MyPictureProvider : IImageSourceProvider
{
	public ImageSource GetImageSource(object parameter)
	{
		return new BitmapImage(new Uri("ms-appx:///Images/" + parameter, UriKind.Absolute));
	}
}

Example 4: Setting the PictureSourceProvider

XAML

<Grid xmlns:telerik="using:Telerik.UI.Xaml.Controls.Primitives">
	<Grid.DataContext>
		<local:ViewModel />
	</Grid.DataContext>
	<telerik:RadPictureRotatorHubTile x:Name="MyHubTile"  PicturesSource="{Binding PicturePaths}" >
		<telerik:RadPictureRotatorHubTile.PictureSourceProvider>
			<local:MyPictureProvider />
		</telerik:RadPictureRotatorHubTile.PictureSourceProvider>
	</telerik:RadPictureRotatorHubTile>
</Grid>

See Also

• HubTile
• HexHubTile
• SlideHubTile