How can I set the correct heign on a looping control?

[Damien]

I have discovered that I am getting incorrect values from my RadLoopingList controls due to the controls' height property being incorrect.

My controls are inside a grid with a height of 140. This restricts my controls to the same height, and they will only show the number of items that will fit inside that height regardless of the datasource used.

I have found that I can manually set the height to allow all items in, but that seems to be a hacky trial-and-error solution. I want to be able to set my height dynamically depending on the data being used to populate the list (e.g. sometimes I want 26 items, sometimes 5, sometimes 15, etc.)

I have tried setting the height to be calculated by a formula like this:

looper1.Height = (numberofitems) * (looper1.ItemHeight + looper1.ItemSpacing)

That formula works well until ~15 items are needed, at which point all the items are not populated into the control. If I have too few items sometimes the first one gets repeated (e.g. 123451 instead of 12345).

When not enough items (or too many) are in the control the control reports the wrong result when the index is changed (e.g. selecting a 1 doesn't necessarily return the index value of 1). It's as if the incorrect height leads to the control mis-counting what it is currently showing, and the behavior only seems to occur if you scroll through all items and loop back around.

So I need to make my control height exactly correct based on the number of items and the spacing between them in a way that lets me change the number of items for different instances of my controls.

What do I need to do to achieve this?  I assume I'm overthinking it and there is something very obvious I'm missing.

Here is the layout for one of my controls. It is intended to only show one scroller item and 1 both above and below while scrolling:

<Grid x:Name="LayoutRoot" Height="140" Background="#FFBABABA">

       <Grid>
           <Controls:RadLoopingList x:Name="looper1" ItemSpacing="5" HorizontalAlignment="Left" VerticalAlignment="Center" IsCentered="True" Width="60" Height="1740" ItemHeight="60" ItemWidth="60" HorizontalContentAlignment="Right" FontSize="24" Margin="30,00,376,00" ItemTemplate="{StaticResource LoopTemplate}" IsExpanded="False" Foreground="Black"/>
           <Controls:RadLoopingList x:Name="looper2" ItemSpacing="5" HorizontalAlignment="Left" VerticalAlignment="Center" IsCentered="True" Width="60" Height="1740" ItemHeight="60" ItemWidth="60" HorizontalContentAlignment="Right" FontSize="24" Margin="120,0,279,0"  ItemTemplate="{StaticResource LoopTemplate}" IsExpanded="False" Foreground="Black" BorderBrush="#FFD82525"/>
            <Controls:RadLoopingList x:Name="looper3" ItemSpacing="5" HorizontalAlignment="Left" VerticalAlignment="Center" IsCentered="True" Width="60" Height="1740" ItemHeight="60" ItemWidth="60" HorizontalContentAlignment="Right" FontSize="24"  ItemTemplate="{StaticResource LoopTemplate}" IsExpanded="False" Margin="210,0,0,0" Foreground="Black"/>
            <Controls:RadLoopingList x:Name="looper4" ItemSpacing="5" HorizontalAlignment="Left" VerticalAlignment="Center" IsCentered="True" Width="60" Height="1740" ItemHeight="60" ItemWidth="60" HorizontalContentAlignment="Right" FontSize="24" Margin="300,00,98,0" ItemTemplate="{StaticResource LoopTemplate}" IsExpanded="False" Foreground="Black" />
            <Controls:RadLoopingList x:Name="looper5" ItemSpacing="5" HorizontalAlignment="Left" VerticalAlignment="Center" IsCentered="True" Width="60" Height="1740" ItemHeight="60" ItemWidth="60" HorizontalContentAlignment="Right" FontSize="24" Margin="390,00,10,00"  ItemTemplate="{StaticResource LoopTemplate}" IsExpanded="False" Foreground="Black" BorderBrush="{StaticResource PhoneAccentBrush}"/>
       </Grid>
</Grid>

[Deyan]

Hello Damien,

Thanks for writing.

I have taken a look at your project and based on the scenario I am seeing I am not quite sure why would you need to have the height of the looping list set explicitly?

Could you please describe what kind of behavior you want to have in your application so that I can make sure I correctly understand it and see how I can assist you?

I have also noticed that you're not correctly using the ItemUpdated event. This event is fired to notifty you that a visual item needs to be updated for the corresponding logical index. Since RadLoopingList implements a UI virtualizatino mechanism, it reuses its visual items. In other words, not all data items from our source get a corresponding visual item. This is done because of performance and memory considerations. In the ItemUpdated event you simply need to update an existing visual container with the data corresponding to a provided logical index. So if you want to display numbers in your looping list, your ItemUpdated and ItemNeeded events would look like that:

Private Sub src_ItemNeeded(sender As LoopingListDataSource, args As LoopingListDataItemEventArgs)
    args.Item = New LoopingListDataItem(Alphabet(args.Index))

End Sub
Private Sub src_ItemUpdated(sender As LoopingListDataSource, args As LoopingListDataItemEventArgs)
    args.Item.Text = args.Index

End Sub

Additionally, if you want to have all items (selected and unselected) visible, you simply need to set the IsExpanded property of the LoopingList to true:

<Controls:RadLoopingList x:Name="looper4" IsExpanded="True" ItemSpacing="5" HorizontalAlignment="Left" VerticalAlignment="Center" IsCentered="True" Width="60"  ItemHeight="60" ItemWidth="60" HorizontalContentAlignment="Right" FontSize="24" Margin="300,00,98,0" ItemTemplate="{StaticResource LoopTemplate}" Foreground="Black" />

I have refactored the project you have sent us so that it works as expected. Take a look at it in the Support ticked you have opened regarding the same case.

I hope this helps.

All the best,
Deyan
the Telerik team

[Damien]

The problem I was having was caused by my incorrect code in the src_ItemUpdated method:

I had:

 

Private Sub src_ItemUpdated(sender As LoopingListDataSource, args As  LoopingListDataItemEventArgs)
       args.Item = New LoopingListDataItem(Items(args.Index))
End Sub

 

the line that populates the args.Item should be:

 

args.Item.Text = Items(args.Index)

The incorrect line of code was causing the index and values to get out of sync.

Thanks to Deyan for looking through my sample solution and figuring our what I had done wrong.