Available for: Windows 8.1 | Windows Phone 8.1

PictureRotatorHubTile

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

Properties

Here's a list of the RadPictureRotatorHubTile properties:

  • 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

The following example shows how to use the PicturesSource property with five pictures from an "Images" folder in the project:

<telerik:RadPictureRotatorHubTile x:Name="MyHubTile"  PicturesSource="{Binding}"/>

Code behind:

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.Absolute)));
    }
    MyHubTile.PicturesSource = pictures;
}

PictureSourceProvider Example

The following example shows how to use the PictureSourceProvider property where we have added our pictures in the "Images" folder in the project:

  1. Implement a ViewModel class where we will keep the picture names:
  2. Implement the MyPictureProvider class which inherits from the IImageSourceProvider interface to get the image URIs:

    public class MyPictureProvider : IImageSourceProvider
    {
        public ImageSource GetImageSource(object parameter)
        {
            return new BitmapImage(new Uri("ms-appx:///Images/" + (parameter as ViewModel).ImagePath, UriKind.Absolute));
        }
    }
    
  3. Put the pictures in a list:

    List<ViewModel> pictures = new List<ViewModel>()
    {
        new ViewModel{ImagePath="MyPicture1.png"},
        new ViewModel{ImagePath="MyPicture2.png"},
        new ViewModel{ImagePath="MyPicture3.png"},
        new ViewModel{ImagePath="MyPicture4.png"},
        new ViewModel{ImagePath="MyPicture5.png"}
    };
    
    this.MyHubTile.DataContext = pictures;
    
  4. Consume the collection of image URIs:

    <telerik:RadPictureRotatorHubTile x:Name="MyHubTile"  PicturesSource="{Binding}" >
        <telerik:RadPictureRotatorHubTile.PictureSourceProvider>
            <local:MyPictureProvider />
        </telerik:RadPictureRotatorHubTile.PictureSourceProvider>
    </telerik:RadPictureRotatorHubTile>