.NET MAUI中实现CollectionView内容左右交替排列的XAML方案

完全可以通过XAML结合DataTemplateSelector实现这种交替布局效果，核心思路是根据列表项的索引奇偶性，切换不同的布局模板。

实现步骤 #

1. 创建自定义模板选择器

首先在代码后台定义一个继承自DataTemplateSelector的类，用于根据项的索引选择对应的布局模板：

namespace YourNamespace
{
    public class AlternatingItemTemplateSelector : DataTemplateSelector
    {
        public DataTemplate LeftImageTemplate { get; set; }
        public DataTemplate RightImageTemplate { get; set; }

        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            if (container is CollectionView collectionView && collectionView.ItemsSource != null)
            {
                var itemsList = collectionView.ItemsSource.Cast<object>().ToList();
                var itemIndex = itemsList.IndexOf(item);
                // 偶数索引用左图右文，奇数索引用右图左文
                return itemIndex % 2 == 0 ? LeftImageTemplate : RightImageTemplate;
            }
            // 默认返回左图右文模板
            return LeftImageTemplate;
        }
    }
}

2. 在XAML中定义布局模板和选择器

在页面的资源部分，分别定义左图右文、右图左文的两个DataTemplate，并实例化自定义的模板选择器：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourNamespace"
             x:Class="YourNamespace.YourPage">

    <ContentPage.Resources>
        <!-- 左图右文布局模板 -->
        <DataTemplate x:Key="LeftImageTemplate">
            <Grid ColumnDefinitions="*,*" Padding="10">
                <Image Source="{Binding ImageSource}" 
                       Aspect="AspectFit" 
                       Grid.Column="0" />
                <Label Text="{Binding ItemContent}" 
                       VerticalOptions="Center" 
                       Grid.Column="1" 
                       Margin="10,0,0,0" />
            </Grid>
        </DataTemplate>

        <!-- 右图左文布局模板 -->
        <DataTemplate x:Key="RightImageTemplate">
            <Grid ColumnDefinitions="*,*" Padding="10">
                <Label Text="{Binding ItemContent}" 
                       VerticalOptions="Center" 
                       Grid.Column="0" 
                       Margin="0,0,10,0" />
                <Image Source="{Binding ImageSource}" 
                       Aspect="AspectFit" 
                       Grid.Column="1" />
            </Grid>
        </DataTemplate>

        <!-- 绑定模板选择器 -->
        <local:AlternatingItemTemplateSelector 
            x:Key="AlternatingSelector"
            LeftImageTemplate="{StaticResource LeftImageTemplate}"
            RightImageTemplate="{StaticResource RightImageTemplate}" />
    </ContentPage.Resources>

    <!-- 主布局中的CollectionView -->
    <CollectionView ItemsSource="{Binding YourItemList}" 
                    ItemTemplate="{StaticResource AlternatingSelector}">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Vertical" />
        </CollectionView.ItemsLayout>
    </CollectionView>
</ContentPage>

3. 优化建议

如果你的ItemsSource是ObservableCollection且数据量较大，直接调用ToList().IndexOf(item)可能会有性能损耗。可以在你的数据模型中添加一个Index属性，在ViewModel初始化或更新数据时同步设置索引值，这样在模板选择器中直接读取item.Index即可，效率更高：

// 数据模型示例
public class YourItemModel
{
    public int Index { get; set; }
    public string ImageSource { get; set; }
    public string ItemContent { get; set; }
}

// 模板选择器中修改判断逻辑
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
    if (item is YourItemModel model)
    {
        return model.Index % 2 == 0 ? LeftImageTemplate : RightImageTemplate;
    }
    return LeftImageTemplate;
}

内容的提问来源于stack exchange，提问作者modab