Alternating row color - what methods to override?

[lyndon]

I'm looking to set the color of an alternating row but I'm having a hard time finding a property or method to latch on to.

I'm unable to find a method to override to find the rowID of the current cell, which will allow me to then determine if the row is even or odd, and set the color. The Xamarin forms Listview has the SetupContent method to override, but the Telerik listview does not expose this method. What method should be used instead?

Also, please feel free to give a recommendation if another method is preferred for your product. 

[Lance | Senior Manager Technical Support]

Hi Lyndon,

The RadListView doesn't have an alternate row style property (like a DataGrid does), see the RadListView Styling article for available item styling options.

However, you can still accomplish this by taking one of two commonly used approaches:

- Use the RadListView ItemTemplateSelector 
- ValueConverter for BackgroundColor

Since you have an ID property to determine if the data item is even/odd, you can use this value to return the appropriate DataTemplate or Color.

Examples

TemplateSelector

public class CustomItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate RowTemplate { get; set; }
    public DataTemplate AlternateRowTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var myItem = item as MyDataItem;

        if (myItem.rowID % 2 == 0)
        {
            return RowTemplate;
        }

        return AlternateRowTemplate;
    }
}

<telerikDataControls:RadListView.ItemTemplateSelector>
    <local:CustomItemTemplateSelector>
        <local:CustomItemTemplateSelector.RowTemplate>
            <DataTemplate>
                <telerikListView:ListViewTemplateCell>
                    <Grid BackgroundColor="LightGray">
                    </Grid>
                </telerikListView:ListViewTemplateCell>
            </DataTemplate>
        </local:CustomItemTemplateSelector.RowTemplate>
        <local:CustomItemTemplateSelector.AlternateRowTemplate>
            <DataTemplate>
                <telerikListView:ListViewTemplateCell>
                    <Grid BackgroundColor="Gray">
                    </Grid>
                </telerikListView:ListViewTemplateCell>
            </DataTemplate>
        </local:CustomItemTemplateSelector.AlternateRowTemplate>
    </local:CustomItemTemplateSelector>
</telerikDataControls:RadListView.ItemTemplateSelector>

ValueConverter

class RowBackgroundColorConverter : IValueConverter
{
    public Convert(object value...)
    {
        var rowID = value as int;
        return rowID % 2 == 0 ? Color.LightGray : Color.Gray;
    }
}

<ResourceDictionary>
    <converters:RowBackgroundColorConverter x:Key="RowBackgroundColorConverter" />
</ResourceDictionary>

<telerikDataControls:RadListView.ItemTemplate>
    <DataTemplate>
         <telerikListView:ListViewTemplateCell>
             <Grid BackgroundColor="{Binding rowID, Converter={StaticResource RowBackgroundColorConverter}">
             </Grid>
         </telerikListView:ListViewTemplateCell>
     </DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[lyndon]

Thanks Lance. Is there a way to consolidate the process of finding the rowID via a value converter? This is my preferred method, since I dont yet have a way of finding the rowID for Teleriks listview (I can do it for a regular listview) My itemtemplates are fairly "verbose", which is why Id like this route vs templateSelectors (which will duplicate some of my itemtemplate code.

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
    var eventArgs = value as Telerik.XamarinForms.DataControls.ListView.ListViewTemplateCell;
    var index = eventArgs.GetIndex<>() //This doesn't work as its internal, but something like this to get the index of the object would be great
    if(index % 2 == 0) return Color.White;
    else return Color.Gray;
}

[Lance | Senior Manager Technical Support]

Hi Lyndon,

I recommend putting an ID on the data model itself. A short (aka int16) property takes up little memory, then you can just do the following to assign the index

For example:

public class Product : MyDataItem
{
        public short MyItemIndex { get; set; }
...
}

for (int i = 0; i < MyItemsSource.Count -1; i++)
{
    MyItemsSource[i].MyItemIndexProperty = i;
}

Then in your converter you can use MyItemIndexProperty.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik