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
<Grid xmlns:telerik="using:Telerik.UI.Xaml.Controls.Primitives">
<telerik:RadPictureRotatorHubTile x:Name="MyHubTile" />
</Grid>
Example 2: Populating the PicturesSource
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
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
<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>