Как изменить цвет строк списка, основываясь на значении привязки в форме xamarin

Question

У меня есть список, в котором у меня есть данные, в списке у меня есть

1 - имя задачи

2- дата

3 - выполнено в процентах

4 - Назначено задание по

Я хочу поместить условие в список и на основе условия хочу изменитьцвет строки списка, например, если заполненный процент =0, цвет этой строки должен быть white, если процент больше, чем 0 цвет должен быть красным и т. д. и т. д.

проверить изображение внизниже:

в списке просмотра у меня есть 0%, 7% и 100%, поэтому я хочу, чтобы его цвет строки 0 был белым, если его цвет строки больше 0 должен быть красным, а цвет строки = 100 должен быть зеленым, вот мой код xaml

 <ListView   HeightRequest="20"  HasUnevenRows="True" SeparatorColor="Red" ItemsSource="{Binding GetAssignedTask}">
                    <ListView.ItemTemplate>
                        <DataTemplate>


                            <ViewCell >
                                <Grid  >
                                   <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>

                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <Image Grid.Row="0" Grid.Column="0"  Source="rsz_pnglogocom.png"  />
                                    <Label Grid.Row="0" Grid.Column="1" Text="{Binding strTaskName}" TextColor="Black" FontSize="Medium" />
                                    <Label  Grid.Row="1" Grid.Column="1"  Text="{Binding intCurrCompletePercentage , StringFormat='{0}% Completed '}" Margin="0,0,10,0"  TextColor="Black" />

                                    <Label  Grid.Row="1" Grid.Column="2" Margin="0,0,20,0"  Text="{Binding dtStart,StringFormat='{0:MMMM dd, yyyy}'}"  TextColor="Red" HorizontalOptions="Center"/>

                                    <Label   Grid.Row="1" Grid.Column="3" Text="{Binding strAssignedByEmpName}" TextColor="Black" HorizontalOptions="End"/>
                                </Grid>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

Answer 1

Два способа сделать это.1. Использование конвертеров:

Создайте конвертер значений:

public class BackgroundColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        try
        {
            if(value!=null)
            {
                if((int)value ==0)
                    return Color.White;
                else if((int)value > 0)
                    return Color.Red;
                else 
                    return Color.Green;
            }
        }
        catch (Exception ex)
        {
        }
        return null;
    }


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

xaml part:

xmlns:converter="RefrenceToConverterNameSpace"
<ContentPage.Resources>
    <ResourceDictionary>
        <converter:BackgroundColorConverter x:Key="BackgroundColorConverter" />
    </ResourceDictionary>
</ContentPage.Resources>

<Grid BackgroundColor="{Binding intCurrCompletePercentage,Converter={StaticResource BackgroundColorConverter}}" />

Метод 2:

В вашем объекте, которыйСодержит intCurrCompletePercentage У вас также может быть другое свойство. Свойство Color PercentColor

public Color PercentColor
{
    get
    {
        if(intCurrCompletePercentage ==0)
            return Color.White;
        else if(intCurrCompletePercentage > 0)
            return Color.Green;
        else 
            return Color.Red;
    }
}

<Grid BackgroundColor="{Binding PercentColor}" />

Всякий раз, когда ваши изменения intCurrCompletePercentage не забывайте вызывать событие propertychanged для PercentColor.

Answer 2

Вы также можете взглянуть на DataTemplateSelector для этого случая.Посмотрите в документации https://docs.microsoft.com/de-de/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector

Код из документации

public class PersonDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate ValidTemplate { get; set; }
    public DataTemplate InvalidTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate (object item, BindableObject container)
    {
        return ((Person)item).DateOfBirth.Year >= 1980 ? ValidTemplate : InvalidTemplate;
    }
 }

XAML

<ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="validPersonTemplate">
                <ViewCell>
                   ...
                </ViewCell>
            </DataTemplate>
            <DataTemplate x:Key="invalidPersonTemplate">
                <ViewCell>
                   ...
                </ViewCell>
            </DataTemplate>
            <local:PersonDataTemplateSelector x:Key="personDataTemplateSelector"
                ValidTemplate="{StaticResource validPersonTemplate}"
                InvalidTemplate="{StaticResource invalidPersonTemplate}" />
        </ResourceDictionary>
</ContentPage.Resources>
<ListView x:Name="listView" ItemTemplate="{StaticResource personDataTemplateSelector}" />

Вы должны будете сделать 3 шаблона (ZeroTemplate, AboveZeroTemplate, HundredTemplate)и пусть ваш DataTemplateSelector решит, какой шаблон он должен использовать.

Я разместил только код документации, потому что я думаю, что вы всегда должны делать что-то для себя, чтобы тоже чему-то научиться, а не просто копировать вставку .. :)