# PictureRotatorHubTile

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](https://www.telerik.com/winui/documentation/controls/radhubtile/hubtiles/radhubtile)
* [HexHubTile](https://www.telerik.com/winui/documentation/controls/radhubtile/hubtiles/radhexhubtile)
* [SlideHubTile](https://www.telerik.com/winui/documentation/controls/radhubtile/hubtiles/radslidehubtile)