Xamarin Forms ListView 项目自定义外观

Question

我正在寻找如何在 xamarin 表单中实现以下外观的想法。

问题在于控制区域之外的角落。

我正在使用 Syncfusion 的 SfListView

Answer 1

类似 3 boxview + 1 Frame 的东西（形状也可以，但没试过）：

Click for Big image

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="ShapeCollectionView.XF.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <StackLayout>
        <CollectionView
            Margin="0,10,0,0"
            BackgroundColor="White"
            ItemsSource="{Binding TestCollection}"
            VerticalOptions="FillAndExpand">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="1" BackgroundColor="White">
                        <BoxView
                            Margin="40,0,19,-20"
                            BackgroundColor="LightGray"
                            HeightRequest="80"
                            HorizontalOptions="End"
                            IsVisible="{Binding IsRight}"
                            VerticalOptions="End"
                            WidthRequest="80" />
                        <BoxView
                            Margin="20,0,40,-20"
                            BackgroundColor="LightGray"
                            HeightRequest="80"
                            HorizontalOptions="Start"
                            IsVisible="{Binding IsLeft}"
                            VerticalOptions="End"
                            WidthRequest="80" />
                        <BoxView
                            Margin="20,0,20,-20"
                            BackgroundColor="White"
                            CornerRadius="28"
                            VerticalOptions="End" />
                        <Frame
                            Margin="20,0,40,20"
                            Padding="0"
                            BackgroundColor="LightGray"
                            CornerRadius="28"
                            HasShadow="False">
                            <Frame.Triggers>
                                <DataTrigger
                                    Binding="{Binding IsLeft}"
                                    TargetType="Frame"
                                    Value="false">
                                    <Setter Property="Margin" Value="40,0,20,20" />
                                </DataTrigger>
                            </Frame.Triggers>
                            <StackLayout>
                                <Label
                                    HeightRequest="60"
                                    Text="{Binding Name}"
                                    VerticalTextAlignment="Center" />
                                <Image
                                    BackgroundColor="Gray"
                                    HeightRequest="160"
                                    Source="xamarin.png" />
                                <Label
                                    HeightRequest="60"
                                    Text="{Binding Name}"
                                    VerticalTextAlignment="Center" />
                            </StackLayout>
                        </Frame>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

MainPage.xaml.cs

using System.Collections.ObjectModel;
using Xamarin.Forms;

namespace ShapeCollectionView.XF
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            TestCollection = new ObservableCollection<TestItem>
            {
                new TestItem { Name = "111", IsLeft = false },
                new TestItem { Name = "222", IsLeft = true },
                new TestItem { Name = "333", IsLeft = false }
            };

            BindingContext = this;
        }

        public ObservableCollection<TestItem> TestCollection { get; set; }
    }

    public partial class TestItem
    {
        //UI properties
        public bool IsLeft { get; set; }
        public bool IsRight => !IsLeft;
    }

    public partial class TestItem
    {
        //DB properties
        public string Name { get; set; }
    }
}

Answer 2

要自定义项目外观，请参考答案 - https://stackoverflow.com/a/68066760/12790619

此外，您可以使用 DataTemplateSelector 来实现此要求，而无需使用其他属性来自定义项目。更多参考请找代码sn-ps，

<ContentPage.Resources>
    <ResourceDictionary>
        <local:CustomDataTemplateSelector x:Key="templateSelector">
            <local:CustomDataTemplateSelector.RightTemplate>
                <DataTemplate>
                    <Grid Margin="1" BackgroundColor="White" IsClippedToBounds="True">
                        <BoxView
                        Margin="20,0,20,-20"
                        BackgroundColor="#F6DFEB"
                        HeightRequest="80"
                        HorizontalOptions="End"
                        VerticalOptions="End"
                        WidthRequest="80" />
                        <BoxView
                        Margin="20,0,20,-20"
                        BackgroundColor="White"
                        CornerRadius="28" 
                        VerticalOptions="End" />
                        <Frame 
                        Margin="40,0,20,20"
                        Padding="0"
                        BackgroundColor="#F6DFEB"
                        CornerRadius="28"
                        HasShadow="False">
                            <StackLayout>
                                <Label
                                HeightRequest="60"
                                Text="{Binding ContactName}"
                                VerticalTextAlignment="Center" />
                                <Image
                                BackgroundColor="#E4BAD4"
                                HeightRequest="160"
                                Source="{Binding ContactImage}" />
                                <Label
                                HeightRequest="60"
                                Text="{Binding ContactNumber}"
                                VerticalTextAlignment="Center" />
                            </StackLayout>
                        </Frame>
                    </Grid>
                </DataTemplate>
            </local:CustomDataTemplateSelector.RightTemplate>
            <local:CustomDataTemplateSelector.LeftTemplate>
                <DataTemplate>
                    <Grid Margin="1" BackgroundColor="White" IsClippedToBounds="True">
                        <BoxView
                        Margin="20,0,20,-20"
                        BackgroundColor="#F6DFEB"
                        HeightRequest="80"
                        HorizontalOptions="Start"
                        VerticalOptions="End"
                        WidthRequest="80" />
                        <BoxView
                        Margin="20,0,20,-20"
                        BackgroundColor="White"
                        CornerRadius="28" 
                        VerticalOptions="End" />
                        <Frame
                        Margin="20,0,40,20"
                        Padding="0"
                        BackgroundColor="#F6DFEB"
                        CornerRadius="28"
                        HasShadow="False">
                            <StackLayout>
                                <Label
                                HeightRequest="60"
                                Text="{Binding ContactName}"
                                VerticalTextAlignment="Center" />
                                <Image
                                BackgroundColor="#E4BAD4"
                                HeightRequest="160"
                                Source="{Binding ContactImage}" />
                                <Label
                                HeightRequest="60"
                                Text="{Binding ContactNumber}"
                                VerticalTextAlignment="Center" />
                            </StackLayout>
                        </Frame>
                    </Grid>
                </DataTemplate>
            </local:CustomDataTemplateSelector.LeftTemplate>
        </local:CustomDataTemplateSelector >
    </ResourceDictionary>
</ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout>
            <syncfusion:SfListView x:Name="listView"
                                AutoFitMode="DynamicHeight"
                                ItemsSource="{Binding ContactsInfo}"
                                ItemTemplate="{StaticResource templateSelector}">
            </syncfusion:SfListView>
        </StackLayout>
    </ContentPage.Content>

CustomTemplateSelector：根据索引返回模板。您可以从DataSource.DisplayItems获取索引。

public class CustomDataTemplateSelector : Xamarin.Forms.DataTemplateSelector
{
    public DataTemplate RightTemplate { get; set; }
    public DataTemplate LeftTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var contact = item as Contacts;
            
        if (contact == null)
            return null;

        var index = (container as SfListView).DataSource.DisplayItems.IndexOf(contact);
        return index % 2 == 0 ? this.RightTemplate : this.LeftTemplate;
    }
}

请在以下链接中找到使用 SfListView 和自定义模板的示例， Sample

您也可以通过以下链接参考关于模板选择器的用户指南文档，

UG链接：https://help.syncfusion.com/xamarin/listview/viewappearance#data-template-selector