Alternating row color - what methods to override? in UI for Xamarin

This is a migrated thread and some comments may be shown as answers.

Alternating row color - what methods to override?

3 Answers 52 Views

ListView

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

answered on 02 Jul 2018, 03:49 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 02 Jul 2018, 04:23 PM

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.

What i've got so far is this...

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;

}

answered on 02 Jul 2018, 04:38 PM

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