Not all elements are shown

[lorenzo]

Hello there, I recently activated a license of telerik on wp8 and i was trying to figure out how the controls work and I can't figure out why in my project, if i change values like the Itemheight, itemwidth, Itemspacing and so on, some items are not being loaded, while in the examples this behavior doesn't occur.

In particular I'm cycling through some rectangles with different colors. Here's the code.

<telerikPrimitives:RadLoopingList Grid.Column="1" UseOptimizedManipulationRouting="True" ItemSpacing="10" IsCentered="True" VerticalAlignment="Center" x:Name="cell1" ItemWidth="50" ItemHeight="50" IsLoopingEnabled="True" ItemStyle="{StaticResource loopingListItemStyle}">

    <telerikPrimitives:RadLoopingList.ItemTemplate>

        <DataTemplate>

            <Rectangle>

                <Rectangle.Fill>

                    <SolidColorBrush  Color="{Binding valcolore, Mode=OneWay}" />

                </Rectangle.Fill>

            </Rectangle>                        </DataTemplate>

    </telerikPrimitives:RadLoopingList.ItemTemplate>

</telerikPrimitives:RadLoopingList>

public partial class MainPage : PhoneApplicationPage
{
    // Constructor
    List<colore> listacolori = new List<colore>();
    public MainPage()
    {
        InitializeComponent();
        ThemeManager.ToDarkTheme();
        listacolori.Add(new colore() { valcolore = Color.FromArgb(255, 0, 0, 0), valore = 0 });
        listacolori.Add(new colore() { valcolore = Color.FromArgb(255, 232, 0, 0), valore = 1 });
        listacolori.Add(new colore() { valcolore = Color.FromArgb(255, 183, 135, 83), valore = 2 });
        listacolori.Add(new colore() { valcolore = Color.FromArgb(255, 249, 120, 34), valore = 3 });
        listacolori.Add(new colore() { valcolore = Color.FromArgb(255, 229, 236, 46), valore = 4 });
        listacolori.Add(new colore() { valcolore = Color.FromArgb(255, 39, 209, 34), valore = 5 });
        listacolori.Add(new colore() { valcolore = Color.FromArgb(255, 99, 97, 252), valore = 6 });
        listacolori.Add(new colore() { valcolore = Color.FromArgb(255, 209, 99, 254), valore = 7 });
        listacolori.Add(new colore() { valcolore = Color.FromArgb(255, 147, 147, 147), valore = 8 });
        listacolori.Add(new colore() { valcolore = Color.FromArgb(255, 255, 255, 255), valore = 9 });
        LoopingListDataSource ds = new LoopingListDataSource(10);
        ds.ItemNeeded += this.OnDs_ItemNeeded;
        ds.ItemUpdated += this.OnDs_ItemUpdated;
        this.cell1.DataSource = ds;
        this.cell1.SelectedIndex = -1;


    }

    private void OnDs_ItemUpdated(object sender, LoopingListDataItemEventArgs e)
    {
        (e.Item as colore).valcolore = listacolori[e.Index].valcolore;
    }

    private void OnDs_ItemNeeded(object sender, LoopingListDataItemEventArgs e)
    {
        e.Item  = listacolori[e.Index];
    }
}

public class colore : LoopingListDataItem
{
    public Color valcolore
    {
        get;
        set;
    }

    public int valore
    {
        get;
        set;
    }
}

For example when Itemspacing is 0, the program works just fine, but if the spacing is set to, for example, 10, the control generates issues like this. 

I hope i'm not missing something obvious. Meanwhile best regards

[Deyan]

Hi Lorenzo,

Thanks for writing and for the code snippet.

I am not quite sure what happens on your side and will be happy to further investigate if you supply me with a sample project that reproduces the issues on your side. You should simply open a new support ticket to be able to attach your project in a ZIP archive.

I see that you are not firing the PropertyChanged event on your colore object. You need to do this in the setters of the properties in order for the LoopingList to get informed about the changes in the ItemUpdated event.


Regards,
Deyan
Telerik