代码之家 › 专栏 › 技术社区 › Phill

具有不同边距的viewcell内的元素

xamarin.forms xamarin listview c#

Phill · 技术社区 · 6 年前

我有一个listview从一个列表中获取元素,我的问题是第一个项目必须与第二个项目有不同的边距,如下图所示:

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

我的ListView创建方式如下:

<listView itemssource=“binding items”hasuffinRows=“true”itemstapped=“listView_onitemstapped”>
<listview.itemtemplate>
<数据模板>
<查看单元格>
<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”>
<表单:cachedimage.gesturerecognizers>
<TapGestureRecognizer NumberOfTapsRequired=“1”></TapGestureRecognizer>
</Forms:cachedimage.gesturerecognizers>
</Forms:cachedimage>
和/格栅& GT;
</viewcell>
</datatemplate>
</listview.itemtemplate>
</listview>
< /代码> <下图:



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

我的ListView创建如下:

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

1 回复 | 直到 6 年前

Gerald Versluis 6 年前

正如我在评论中提到的,这可能是我之前发布的答案的一个变化。有关附带的博客文章,请参阅: 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>