Elements inside ViewCell with diferent margins

Question

I have a listview getting elements from a list, the problem that I have is that first item has to have a differentmargin from the second item, like in the image below:

The even items should be Margin="20,0,0,0" and the odd Margin="0,0,0,0.

My listview is created like this:

<ListView ItemsSource="{Binding items}" HasUnevenRows="True" ItemTapped="ListView_OnItemTapped">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" ColumnSpacing="0" RowSpacing="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="564"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="80"/>
                        </Grid.RowDefinitions>
                        <forms:CachedImage  x:Name="Imagebe"  Grid.Row="0" DownsampleToViewSize="True"  HeightRequest="80" WidthRequest="564"  Source="{Binding Img}" Margin="0,0,0,0">
                            <forms:CachedImage.GestureRecognizers>
                                <TapGestureRecognizer NumberOfTapsRequired="1" ></TapGestureRecognizer>
                            </forms:CachedImage.GestureRecognizers>
                        </forms:CachedImage>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Take a look at how Gerald handles different templates for odd and even rows here blog.verslu.is/stackoverflow-answers/… — Depechie

Gerald Versluis Gerald Versluis · Accepted Answer · 2018-07-25T11:35:59

As Depechie already mentioned in the comments, this might be a variation to an answer I posted earlier. For the accompanying blog post, please see this: https://blog.verslu.is/stackoverflow-answers/alternate-row-color-listview/

The only thing you need to do is swap out the templates, not having them a different background color, but a different margin.

So, create a DataTemplateSelector, like this:

public class MarginDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate EvenTemplate { get; set; }
    public DataTemplate OddTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        // TODO: Maybe some more error handling here
        return ((List<string>)((ListView)container).ItemsSource).IndexOf(item as string) % 2 == 0 ? EvenTemplate : OddTemplate;
    }
}

And your XAML something like this:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:AlternateRowColorSample" x:Class="AlternateRowColorSample.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="evenTemplate">
                <ViewCell>
                    <Grid Margin="20,0,0,0">
                        <Label Text="{Binding .}" HorizontalOptions="Center" VerticalOptions="Center" />
                    </Grid>
                </ViewCell>
            </DataTemplate>
            <DataTemplate x:Key="oddTemplate">
                <ViewCell>
                    <Grid Margin="0">
                        <Label Text="{Binding .}" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" />
                    </Grid>
                </ViewCell>
            </DataTemplate>
            <local:MarginDataTemplateSelector x:Key="marginDataTemplateSelector"
                EvenTemplate="{StaticResource evenTemplate}"
                OddTemplate="{StaticResource oddTemplate}" />
        </ResourceDictionary>
    </ContentPage.Resources>

    <ListView ItemTemplate="{StaticResource marginColorDataTemplateSelector}" ItemsSource="{Binding Items}">

    </ListView>
</ContentPage>

Elements inside ViewCell with diferent margins

1 Answers