.Net maui：如何在綁定中引用顏色？

Question

所以我有一個 label，我想從 mvvm 變量設置文本顏色。

虛擬機

[ObservableProperty]
private string col = "White";

XAML

<Label Text="{Binding Name}"
       FontSize="20"
       TextColor="{Binding Col}">

所以一般來說 TextColor="White" 工作正常

我試過使用顏色 object https://learn.microsoft.com/en-us/do.net/maui/user-interface/graphics/colors

例如

[ObservableProperty]
private Color col = Colors.White;

但我無法讓它工作。

我曾希望一個簡單的字符串能起作用……哦，我的希望是徒勞的……

謝謝，G。

編輯：我應該補充一點，我的 label 在 CollectionView 中？

大編輯：它適用於獨立的 label 即

  [ObservableProperty]
  private Color col = Colors.White;

所以問題是 label 是否在 CollectionView 中。 我想知道為什么？

編輯：因為 CollectionView 綁定到 ItemsSource - doh what a dummy！

Answer 1

如果您想將顏色（類型為string ）綁定到您的視圖，您可以使用綁定值轉換器來實現此目的。

我創建了一個demo來實現這個，你可以參考下面的代碼：

我的模型.cs

public class MyModel: INotifyPropertyChanged
{
    string name;
    public string Name
    {
        set
        {
            if (name != value)
            {
                name = value;
                OnPropertyChanged("Name");

            }
        }
        get
        {
            return name;
        }
    }


    string _value;
    public string Value
    {
        set
        {
            if (_value != value)
            {
                _value = value;
                OnPropertyChanged("Value");

            }
        }
        get
        {
            return _value;
        }
    }

    private string _textColor = "Green";
    public string TextColor
    {
        get { return _textColor; }
        set
        {
            _textColor = value;

            OnPropertyChanged("TextColor");

        }
    }


    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

MyViewModel.cs

public class MyViewModel
{
    public ObservableCollection<MyModel> dataList { get; set; }

    public ICommand ColorChangeCommand { protected set; get; }
    public MyViewModel()
    {
        dataList = new ObservableCollection<MyModel>();
        dataList.Add(new MyModel() { Name = "test1", Value = "1" });
        dataList.Add(new MyModel() { Name = "test2", Value = "2" });
        dataList.Add(new MyModel() { Name = "test3", Value = "3" });
        ColorChangeCommand = new Command<MyModel>(async (key) =>
        {
            key.TextColor = "Red";

        });

    }
}

StringToColorConverter.cs

public class StringToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var color = value.ToString();
        switch (color)
        {
            case "Green":
                return Colors.Green;
            case "Red":
                return Colors.Red;
            default:
                return Colors.Yellow;
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
}

一個用法：

 <?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="MauiApp0706.Tab1"
             xmlns:local="clr-namespace:MauiApp0706" 
             Title="Tab1">

    <ContentPage.Resources>
        <ResourceDictionary>
            <local:StringToColorConverter x:Key="ColorConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <VerticalStackLayout>
        <CollectionView
             ItemsSource="{Binding dataList}"
             x:Name="mylistview"
             >
            <CollectionView.ItemTemplate>
                <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid Column="0">
                            <Label Text="{Binding Name}" TextColor="{Binding TextColor, Converter = {StaticResource ColorConverter}}"/>
                            </Grid>
                            <Grid Column="1">
                            <Label Text="{Binding Value}" TextColor="{Binding TextColor, Converter = {StaticResource ColorConverter}}"/>
                            </Grid>
                            <Grid Column="2">
                                <Button Text="change" Command="{Binding BindingContext.ColorChangeCommand, Source={x:Reference Name=mylistview} }"  CommandParameter="{Binding .}"></Button>
                            </Grid>

                        </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </VerticalStackLayout>
</ContentPage>

Answer 2

不要減損已經給出的答案，但對於遇到這個問題的人來說有幾點需要注意......

1. “Color col = Colors.White”——Color 和 Colors 不是一回事，在“Color”中有 System.Drawing.Color 和 Microsoft.Maui.Graphics.Color，所以要小心不要不小心混合了類型.
2. 如果您在 C# 而不是 XAML 中執行 UI，那么您可以直接綁定到 Color 以開始並擺脫所有字符串轉換。