Xamarin.Forms中ListView内Grid布局的条件格式化实现

Hey there! Let's get this sorted for you. In Xamarin.Forms, trying to directly grab controls like UserStatusLabel from your page's code-behind to update them per list item isn't the right approach—each row in the ListView gets its own copy of those controls, so there's no straightforward way to reference them individually that way. Instead, we'll use data binding (the Xamarin.Forms recommended method) to handle this dynamically. I'll walk you through two easy-to-implement options, perfect for a beginner.

Option 1: Add Computed Properties to Your Lesson Model #

This is the simplest approach for your scenario. We'll add properties to your Lesson class that automatically return the right text and color based on the Completed (or other) fields, then bind those properties directly to your XAML controls.

First, update your Lesson class:

public class Lesson
{
    public string Name { get; set; }
    public string Description { get; set; }
    public string LessonDate { get; set; }
    public string StartEndTime { get; set; }
    public string Location { get; set; }
    public string State { get; set; }
    public bool Completed { get; set; }
    public RestWSTeacher Teacher { get; set; }
    public List<Activity> Activities { get; set; }

    // Computed property for user status text
    public string UserStatusText => Completed ? "Completed" : "Not Completed";

    // Computed property for user status frame color
    public Color UserStatusColor => Completed ? Color.Green : Color.Silver;

    // Example logic for course status (adjust based on your `State` values)
    public string CourseStatusText 
    {
        get 
        {
            return State switch
            {
                "Active" => "In Progress",
                "Cancelled" => "Cancelled",
                _ => "Pending"
            };
        }
    }

    public Color CourseStatusColor
    {
        get
        {
            return State switch
            {
                "Active" => Color.Yellow,
                "Cancelled" => Color.Red,
                _ => Color.Gray
            };
        }
    }
}

Now update your XAML to bind to these new properties instead of hardcoding placeholders:

<Frame Grid.Row="2" Grid.Column="0" CornerRadius="15" Padding="0" 
       BackgroundColor="{Binding UserStatusColor}" Margin="0,10,0,10" 
       HasShadow="False" WidthRequest="125">
    <Label Text="{Binding UserStatusText}" Margin="5" HorizontalOptions="Center" 
           BackgroundColor="Transparent" TextColor="Gray"/>
</Frame>
<Frame Grid.Row="2" Grid.Column="1" CornerRadius="15" Padding="0" 
       BackgroundColor="{Binding CourseStatusColor}" Margin="0,10,0,10" 
       HasShadow="False" WidthRequest="125">
    <Label Text="{Binding CourseStatusText}" Margin="5" HorizontalOptions="Center" 
           BackgroundColor="Transparent" TextColor="Black"/>
</Frame>

Finally, you can completely remove your SetListViewFormat() method—data binding will automatically update each list item as soon as you set the ItemsSource:

protected override void OnAppearing()
{
    base.OnAppearing();
    FillUncompletedLessonsList(); 
    LessonsListview.ItemsSource = UncompletedLessonsList;
    // No more manual formatting needed!
}

Option 2: Use Value Converters (Great for Reusable Logic) #

If you don't want to modify your model, or want to reuse the formatting logic elsewhere, value converters are the way to go. These convert a raw value (like bool Completed) into the text/color you need.

First, create two converter classes:

BoolToStatusTextConverter #

public class BoolToStatusTextConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value is bool completed ? completed ? "Completed" : "Not Completed" : "Unknown";
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException(); // We don't need this for one-way binding
    }
}

BoolToStatusColorConverter #

public class BoolToStatusColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value is bool completed ? completed ? Color.Green : Color.Silver : Color.Gray;
    }

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

Next, declare these converters in your page's resources (add your app's namespace to the page top first, e.g., xmlns:local="clr-namespace:YourAppName"):

<ContentPage.Resources>
    <local:BoolToStatusTextConverter x:Key="BoolToStatusText"/>
    <local:BoolToStatusColorConverter x:Key="BoolToStatusColor"/>
</ContentPage.Resources>

Now update your XAML to use the converters:

<Frame Grid.Row="2" Grid.Column="0" CornerRadius="15" Padding="0" 
       BackgroundColor="{Binding Completed, Converter={StaticResource BoolToStatusColor}}" 
       Margin="0,10,0,10" HasShadow="False" WidthRequest="125">
    <Label Text="{Binding Completed, Converter={StaticResource BoolToStatusText}}" 
           Margin="5" HorizontalOptions="Center" BackgroundColor="Transparent" TextColor="Gray"/>
</Frame>

Just like Option 1, you can remove SetListViewFormat()—the converters handle all the dynamic formatting automatically.

Why Your Original Approach Didn't Work #

Each row in the ListView generates its own instance of the ViewCell and its child controls. There's no way to loop through the list and reference those controls directly from the page's code-behind—data binding is the intended, cleanest way to handle dynamic UI updates in Xamarin.Forms.

For a beginner, Option 1 is probably the easiest to wrap your head around—it keeps all the logic tied to your data model where it belongs.

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