如何使列表视图具有交替的背景颜色？ Net Maui

Question

我正在尝试创建一个列表视图，背景颜色在列表中的每个条目都交替。有没有办法在毛伊岛这样做？

Answer 1

为了解决这个问题，我在视图模型中添加了亚麻属属性，并使用了一个值转换器来设置颜色。

值转换器：

public class NumberToAlternatingColorValueConverter : IValueConverter
{
    public Color EvenNumberColor { get; init; } = Colors.Green;

    public Color OddNumberColor { get; init; } = Colors.Red;

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value is not int intValue
            ? Colors.Transparent
            : (intValue % 2) == 0
                ? EvenNumberColor
                : OddNumberColor;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException("NumberToAlternatingColorValueConverter.ConvertBack");
    }
}

注册值转换器

我在我的主资源词典中注册了值转换器，因此

<converter:NumberToAlternatingColorValueConverter
    x:Key="MagentaCyanRowColorConverter"
    EvenNumberColor="Magenta"
    OddNumberColor="Cyan" />

可以使用不同颜色的其他键注册一个以上的值转换器组合。

使用值转换器

，我在XAML中使用了绑定的值转换器，例如：

<StackLayout BindableLayout.ItemsSource="{Binding Summary.Lines}">
    <BindableLayout.ItemTemplate>
        <DataTemplate x:DataType="vm:SummaryLineViewModel">
            <Grid BackgroundColor="{Binding LineNumber, Converter={StaticResource MagentaCyanRowColorConverter}}">
                <Label Grid.Column="0" Text="{Binding Name}" />
                <Label Grid.Column="1" Text="{Binding Value}" />
            </Grid>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

Answer 2

这可以通过多种方式完成。通常建议的方法是通过a DatateMplatesElector 。

1.创建A DataTemplatesElector保存两个模板并根据项目的索引选择它们：

public class AlternateColorDataTemplateSelector: DataTemplateSelector
{
    public DataTemplate EvenTemplate { get; set; }
    public DataTemplate UnevenTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        // TODO: cast `Monkey` to your Item 
        return ((List<Monkey>)((ListView)container).ItemsSource).IndexOf(item as Monkey) % 2 == 0 ? EvenTemplate : UnevenTemplate;
    }
}

2。在XAML中，我们可以定义两个模板，一个具有替代颜色，一个具有正常颜色。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp0606.MainPage"
             xmlns:local="clr-namespace:MauiApp0606"
             >

    <ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="evenTemplate">
                <ViewCell>
                    <Grid BackgroundColor="White">
                        <Label Text="{Binding Name}" HorizontalOptions="Center" VerticalOptions="Center" />
                    </Grid>
                </ViewCell>
            </DataTemplate>
            <DataTemplate x:Key="unevenTemplate">
                <ViewCell>
                    <Grid BackgroundColor="LightGray">
                        <Label Text="{Binding Name}" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" />
                    </Grid>
                </ViewCell>
            </DataTemplate>
            <local:AlternateColorDataTemplateSelector x:Key="alternateColorDataTemplateSelector"
                EvenTemplate="{StaticResource evenTemplate}"
                UnevenTemplate="{StaticResource unevenTemplate}" />
            
        </ResourceDictionary>
    </ContentPage.Resources>
 
        <VerticalStackLayout Spacing="25" Padding="30">

            <ListView ItemsSource="{Binding Monkeys}" ItemTemplate="{StaticResource alternateColorDataTemplateSelector}">

            </ListView>

        </VerticalStackLayout>
</ContentPage>

Answer 3

如这个答案我们可以使用 datateMplatesElector 解决您的问题。

替代解决方案，

1. 您可以在模型中使用属性，然后将其直接绑定到行背景。 （在您的情况下网格的背景颜色）

   
   

2. 您可以使用触发器通过考虑逻辑来改变颜色。
   （ Xamarin> Xamarin form >