Telerik UI for Windows 8 XAML

rotatortile

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

Note

RadPictureRotatorHubTile class inherits from the HubTileBase class. See the inherited properties

Here's a list of the RadPictureRotatorHubTile properties:

PictureSource Property

  • 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.

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

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

Add the following namespace:

  • using Windows.UI.Xaml.Media.Imaging;

C# Copy imageCopy
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 Property

  • PictureSourceProvider (IImageSourceProvider)

    - Gets or sets the implementation that is used to provide a custom image source resolution routine.

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:

    C# Copy imageCopy
    class ViewModel
    {
        public object ImagePath
        {
            get;
            set;
        }
    }
  2. Implement the MyPictureProvider class which inherits from the IImageSourceProvider interface to get the image URIs:

  3. Add the following namespaces:

    • using Telerik.UI.Xaml.Controls.Primitives;

    • using Windows.UI.Xaml.Media.Imaging;

    • using Windows.UI.Xaml.Media;

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

    C# Copy imageCopy
    this.InitializeComponent();
    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;
  5. Consume the collection of image URIs:

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