答案 0 :(得分:1)
类似于 3 boxview + 1 Frame(形状也可以,但还没有尝试过):
<?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>
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; }
}
}
答案 1 :(得分:0)
要自定义项目外观,请参阅答案 - https://stackoverflow.com/a/68066760/12790619
此外,您可以使用 DataTemplateSelector 来满足此要求,而无需使用其他属性来自定义项目。请查找代码片段以获取更多参考,
<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
谢谢