View Cell 内具有不同边距的元素

Question

我有一个从列表中获取元素的列表视图，我遇到的问题是第一项必须与第二项具有不同的边距，如下图所示：

偶数项应为 Margin="20,0,0,0" 奇数项应为 Margin="0,0,0,0。

我的列表视图是这样创建的：

<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>

Answer 1

正如 Depechie 在 cmets 中已经提到的，这可能是我之前发布的答案的变体。对于随附的博客文章，请参阅：https://blog.verslu.is/stackoverflow-answers/alternate-row-color-listview/

您唯一需要做的就是更换模板，而不是让它们使用不同的背景颜色，而是使用不同的边距。

因此，创建一个 DataTemplateSelector，如下所示：

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;
    }
}

你的 XAML 是这样的：

<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>