Telerik UI for Windows Phone by Progress

RadCycleHubTile is a data-bound control. Once bound to a data source, it displays data items one at a time with a slide transition between the different items. The control is bound by assigning an IEnumerable instance to the ItemsSoruce property. Once bound, the tile cycles through the items either in order or randomly. This behavior is specified with the CycleRandomly property. Also the transition between the data items can be horizontal or vertical, determined by RadCycleHubTile's Orientation property. Finally, the visualization of each data item can be specified with the ItemTemplate property.

Using RadCycleHubTile

Here is an example of how to use RadCycleHubTile:

CopyXAML
<telerikPrimitives:RadCycleHubTile Title="Something"
                                   CycleRandomly="False"
                                   Orientation="Horizontal"
                                   ItemsSource="{Binding}"
                                   ItemTemplate="{StaticResource SampleCycleTemplate}"/>
CopyXAML
<DataTemplate x:Key="SampleCycleTemplate">
    <Border BorderBrush="Red"
            BorderThickness="2">
        <Grid>
            <ContentControl HorizontalContentAlignment="Center"
                            VerticalContentAlignment="Center"
                            Content="{Binding}"/>
            <Rectangle Width="10"
                       Height="10"
                       Fill="{StaticResource PhoneAccentBrush}"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Top"/>
            <Rectangle Width="10"
                       Height="10"
                       Fill="{StaticResource PhoneAccentBrush}"
                       HorizontalAlignment="Right"
                       VerticalAlignment="Bottom"/>
        </Grid>
    </Border>
</DataTemplate>
CopyC#
RadCycleHubTile cycleTile = new RadCycleHubTile();
cycleTile.CycleRandomly = false;
cycleTile.Orientation = System.Windows.Controls.Orientation.Horizontal;
IEnumerable someData = GetData();
cycleTile.ItemsSource = someData;
cycleTile.ItemTemplate = this.Resources["SampleCycleTemplate"] as DataTemplate;

It is important to note if the cycle tile is set to cycle sequentially, the collection of objects to cycle cannot be modified. It can be replaced but not modified. The reason for this is that RadCycleHubTile works with IEnumerable. The only way to iterate over an IEnumerable is with an iterator (IEnumerator) or with the foreach loop. Internally, the tile uses an enumerator and calls MoveNext() once every update interval. If the items source is modified between these MoveNext() calls the enumerator will throw an InvalidOperationException, just like if a collection is modified inside its foreach loop. The only solution is to create a new ItemsSource which includes the changes that need to be made to it.