动态更改网格 Xamarin 的背景

Question

我想根据状态更改网格的背景颜色。我制作了一个转换器，它获取状态并根据它的颜色改变颜色，但由于某种原因在调试后它似乎根本没有进入转换器。当我将等待颜色设置为其他颜色时，转换器可以工作。我认为问题在于按下按钮后动态改变颜色。

private void CompleteExercise(Exercise exercise)
 {
     exercise.Status = Status.Completed;
 } // this command works btw

<Grid BackgroundColor="{Binding Status, Converter={StaticResource StatusToBackgroundColorConverter}}">
   <Button Grid.Column="2" Text="Complete" Command="{Binding Path=BindingContext.CompleteExerciseCommand, Source={x:Reference Name=Workouts}}" CommandParameter="{Binding .}" />
</Grid>

public class StatusToBackgroundColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value is Status status)
        {
            switch (status)
            {
                case Status.Waiting:
                    return Color.Transparent;
                case Status.InProgress:
                    return Color.Yellow; 
                case Status.Completed:
                    return Color.Green; 
                default:
                    return Color.Transparent;
            }
        }
        return Color.Transparent;
    }

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

Answer 1

根据你的代码，我尝试在我这边实现这个功能，你可以参考下面的代码。

1.请让你的item模型继承类ObservableObject并为属性添加

[ObservableProperty]

Status Status;

public partial class Item: ObservableObject
{
   //For the sake of simplicity, omit the other codes
    [ObservableProperty]
    Status status;
}

2.请为外部

Grid

设置边距，否则您将看不到背景颜色变化，因为

Button

内部的

Grid

会遮挡Grid的背景。

 <Grid BackgroundColor="{Binding Status, Converter={StaticResource myStatusToBgConverter}}"  Grid.Column="4"  Padding="5">
                                <Button Text="Complete" BackgroundColor="Blue" Command="{Binding Path=BindingContext.CompleteExerciseCommand, Source={x:Reference Name=listView}}" CommandParameter="{Binding .}" />
                            </Grid>
 </Grid>

3.请参考我的demo中的以下代码：

<?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"
             
             xmlns:models="clr-namespace:MauiMvvmListApp0407.Models"
             xmlns:converts="clr-namespace:MauiMvvmListApp0407.Converter"
             x:Class="MauiMvvmListApp0407.MainPage">

    <ContentPage.Resources>
        <converts:StatusToBackgroundColorConverter x:Key="myStatusToBgConverter" />
    </ContentPage.Resources>

    <Frame Grid.Row="6"  BackgroundColor="#B1C0C9" BorderColor="#7989A3">
            <ListView x:Name="listView"
                  BackgroundColor="Gray"
                  HasUnevenRows="True"
                  SeparatorVisibility="Default"
                  ItemsSource="{Binding Items}">
                <ListView.ItemTemplate>
                <DataTemplate x:DataType="models:Item">
                        <ViewCell>
                            <VerticalStackLayout Padding="5">
                                <Label Text="{Binding Name}"
                                   FontSize="17"
                                   FontFamily="OCRA"
                                   TextColor="Black"/>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="50"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                <!--//For the sake of simplicity, omit the other codes -->

                                <Grid BackgroundColor="{Binding Status, Converter={StaticResource myStatusToBgConverter}}"  Grid.Column="4"  Padding="5">
                                    <Button Text="Complete" BackgroundColor="Blue" Command="{Binding Path=BindingContext.CompleteExerciseCommand, Source={x:Reference Name=listView}}" CommandParameter="{Binding .}" />
                                </Grid>
                            </Grid>

                            </VerticalStackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
    </Frame>
</ContentPage>

注：

请安装 nuget CommunityToolkit.Mvvm。