Telerik blogs

Fun with RadLoopingList: Horizontal looping

Deyan Ginev by Deyan Ginev
July 07, 2011 Mobile 0 Comments


With RadControls for Windows Phone 7 Q2 2011 Beta 2 we have extended the feature set of RadLoopingList by adding support for horizontal looping: there is now a new Orientation property which can be set to either Vertical or Horizontal. We have also prepared a nice example in our Telerik Demos app (available on the WP7 Marketplace) which uses RadLoopingList to build a picture gallery that shows gallery items in a movie strip:

Since some of you asked us to explain how this example was built, I decided to put it in a blog by giving all the steps you need to have similar UX in your own WP7 app. Basically, you will need a bunch of images, a simple business object that will hold an URI to the corresponding image, an appropriate DataTemplate for the visual items in the Looping List and a picture that looks like a movie strip.

First, let’s start with creating a new Windows Phone 7 application project and putting an instance of RadLoopingList on the main page. Here is the XAML code of the whole layout:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.Resources>
        <Style x:Key="loopingListItemStyle" TargetType="telerikPrimitivesLoopingList:LoopingListItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerikPrimitivesLoopingList:LoopingListItem">
                        <ContentControl x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"
                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" DataContext="{TemplateBinding DataContext}"
                                    Padding="{TemplateBinding Padding}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    <telerikPrimitives:RadLoopingList Height="159" x:Name="loopingList" ItemWidth="240" ItemHeight="159" ItemSpacing="0" Orientation="Horizontal" ItemStyle="{StaticResource loopingListItemStyle}">
        <telerikPrimitives:RadLoopingList.ItemTemplate>
            <DataTemplate>
                <Image Width="240" Height="159" Source="{Binding Picture}" Stretch="None"/>
            </DataTemplate>
        </telerikPrimitives:RadLoopingList.ItemTemplate>
    </telerikPrimitives:RadLoopingList>
    <Image Source="Images/Movie_Strip.png" VerticalAlignment="Center" IsHitTestVisible="False"/>
</Grid>

 

Basically, we have a grid with a single row which contains both the RadLoopingList instance and an Image element which will display the movie strip above the looping list. Also, we have created a new style for the LoopingListItem since we do not want to use the default one which has visual states and a template with a border.

After that we continue with creating a class that will represent our data item and will hold information about the mapped image. This class must inherit from LoopingListDataItem as shown on the code snippet below. The picture information will be stored in a property called Picture that will be of type Uri. In its setter the property will call the OnPropertyChanged method implemented by LoopingListDataItem to indicate that the value of the Uri has changed:

 

public class PictureLoopingItem : LoopingListDataItem
{
    private Uri pictureSource;
    public Uri Picture
    {
        get
        {
            return this.pictureSource;
        }
        set
        {
            if (value != this.pictureSource)
            {
                this.pictureSource = value;
                this.OnPropertyChanged("Picture");
            }
        }
    }
}

 

We will put all images in a folder called Images in our project. They will be set the Content build action and will be referenced by Uri.

To fill RadLoopingList with data, we need to create an instance of the LoopingListDataSource class, set it to the DataSource property of RadLoopingList and handle two events exposed by it:

  • ItemNeeded
  • ItemUpdated

The ItemNeeded event is fired when RadLoopingList initially creates its visual containers and maps them to data items. Intuitively, ItemUpdated is fired when a recycled visual container needs to be updated (this happens when a scroll operation is performed) with new data. Here is how the handlers of these events are implemented:

 

private void OnDs_ItemUpdated(object sender, LoopingListDataItemEventArgs e)
{
    (e.Item as PictureLoopingItem).Picture = new Uri("Images/Orientation/" + (e.Index + 1) + ".png", UriKind.Relative);
}
  
private void OnDs_ItemNeeded(object sender, LoopingListDataItemEventArgs e)
{
    e.Item = new PictureLoopingItem() { Picture = new Uri("Images/Orientation/" + (e.Index + 1) + ".png", UriKind.Relative)};
}

 

As you can see, in the ItemNeeded handler we create a new instance of the PictureLoopingItem class and assign a specific image URI according to the logical index. In the ItemUpdated event we take the provided PictureLoopingItem and update its Uri to point to the corresponding picture according to the logical index. After assigning the LoopingListDataSource object to the DataSource property of our RadLoopingList instance, you should be able to see all available images populated in the control as the screenshot below demonstrates:

Additionally, you can set the IsCentered property of RadLoopingList to true so that the control always centers the selected picture in the middle of the movie strip.

You can find the source code of this example attached here. All images are available in the archive as well. Enjoy ;-)!

LoopingListDemo

UI, Windows
Deyan Ginev
About the Author

Deyan Ginev

Deyan has been with Telerik for more than ​six years working on several different products with main focus on mobile technologies. Deyan is currently working on NativeScript– a platform for developing native mobile apps with JavaScript. Find him on Twitter via
@deyan_ginev.

Comments

Comments are disabled in preview mode.