How to display a list of string in LoopingList Control

[Rakesh R]

I have a list of string with me like this,

 var fruits = new List<string>
 {
           "Orange","Apple","Benana","Grape","Plum","BlueBery"
 };

Is it possible to display these strings in a LoopingList control. If yes how i can achieve the same in windows phone 8. Please explain me this with help of some samples.

Thanks,

Rakesh R 

[MasterChiefMasterChef]

Hi Rakesh R,

Here is the XAML:

<Controls:RadLoopingList  x:Name="loopingList" Orientation="Horizontal"/>

And here is the C# code to set the names on each looping list tile:

var fruits = new List<string>
 {
           "Orange","Apple","Banana","Grape","Plum","Blueberry"
 };


LoopingListDataSource dataSource = new LoopingListDataSource(fruits.Count);
dataSource.ItemNeeded += (sender, args) =>
{
    //adding as many items as specified
    args.Item = new LoopingListDataItem(args.Index.ToString());
};
dataSource.ItemUpdated += (sender, args) =>
{
    //setting text to List<string>
    args.Item.Text = fruits[args.Index].ToString();
};

loopingList.DataSource = dataSource;

For further examples, review the RadLoopingList documentation.

Kind regards,
Master Chief

[Rakesh R]

It works for me, But the issue is if i add more items to the list it is only displaying few of them from the list. What is the requirement needed to display all my list items in the lopping list. 

One thing here is i added the code like this
<ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
<DataTemplate>
<ItemTemplate>

[imsp]

I have the same issue as Rakesh R.  The LoopingList is showing only 3 items from my datasource.  I too have an <ItemTemplate>, like this:

<code>
<telerikPrimitives:RadLoopingList
ItemSpacing="0"
x:Name="sightsList"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Orientation="Vertical"
IsLoopingEnabled="True"
ItemHeight="350"
ItemWidth="350"
IsCentered="True"
>
<telerikPrimitives:RadLoopingList.ItemTemplate>
<DataTemplate>
<StackPanel Background="Black" Margin="5">

<Image Source="{Binding Picture}"
Tag="{Binding PictureName}"
DoubleTap="Image_Tap"
Stretch="UniformToFill"
/>

<Button x:Name="btnDeletePicture"
HorizontalAlignment="Center"
Click="btnDeletePicture_Click"
Height="80"
Width="80"
BorderThickness="1"
Tag="{Binding PictureName}"
>
<Button.Background>
<ImageBrush ImageSource="/images/buttons/appbar.delete.png"/>
</Button.Background>
</Button>
</StackPanel>

</DataTemplate>

</telerikPrimitives:RadLoopingList.ItemTemplate>
</telerikPrimitives:RadLoopingList>

</code>

[imsp]

BTW, ignore the "<code>" and "</code>" tags in my earlier post. I was trying to format the source code I'd entered, and used the wrong formatting option here.

[Deyan]

Hello,

Just make sure you are correctly implementing the INotifyPropertyChanged logic in your business models. This is often an issue when using RadLoopingLIst.

I hope this helps.

Regards,
Deyan
Telerik

 

 

[imsp]

Thanks, Deyan.

I was missing this in my code:

this.OnPropertyChanged("Picture");

That did the trick.