如何在 xamarin 形式的列表視圖內的標簽中動態設置文本顏色

Question

如何在列表視圖中動態設置標簽內部的文本顏色。需要根據用戶的選擇在整個應用程序中設置標簽的文本顏色。 我已經在 App.Xaml 中聲明了樣式。 有一個類樣式，在其中為應用程序聲明顏色。 目前從那里取顏色。但我需要為標簽設置 2 種顏色，並根據用戶的選擇選擇顏色。

應用程序XAML

   <ResourceDictionary>
        <Style TargetType="Label" x:Key="label_style">
            <Setter Property="TextColor" Value="{x:Static local:Style.LabelLightColor}"></Setter>
        </Style>
    </ResourceDictionary>

風格類

 public class Style
{

    public static Color LabelLightColor = Color.Red;
 }

主頁.xaml

 <Label Text="Welcome to Xamarin.Forms!"
         Style="{DynamicResource label_style}"/>

Answer 1

如果您需要使用Style來實現這一點， Xamarin.Forms 中有一個動態樣式可以做。

在ContentPage.Resources 中創建樣式：

<ContentPage.Resources>
    <Style x:Key="labelGreenStyle" TargetType="Label">
        <Setter Property="TextColor" Value="Green" />
    </Style>
    <Style x:Key="labelRedStyle" TargetType="Label">
        <Setter Property="TextColor" Value="Red" />
    </Style>
</ContentPage.Resources>

Label的代碼如下：

<Label Text="{Binding eMail}" Style="{DynamicResource myLabelStyle}" HorizontalOptions="CenterAndExpand"></Label>
<Label Text="{Binding eMail}" Style="{DynamicResource myLabelStyle}" HorizontalOptions="CenterAndExpand"></Label>

然后可以通過Button點擊事件修改TextColor如下：

private void RedButton_Clicked(object sender, EventArgs e)
{
    Resources["myLabelStyle"] = Resources["labelRedStyle"];
}

private void GreenButton_Clicked(object sender, EventArgs e)
{
    Resources["myLabelStyle"] = Resources["labelGreenStyle"];
}

效果：

此外，您還可以在 Xaml 中為TextColor屬性綁定一個顏色值，然后修改模型的數據可以動態更改TextColor 。

例如， Contacts.cs項如下：

public class Contacts: INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    public string Address { get; set; }
    public string eMail { get; set; }

    private Color myColor;
    public Color MyColor
    {
        set
        {
            if (myColor != value)
            {
                myColor = value;
                OnPropertyChanged("MyColor");
            }
        }
        get
        {
            return myColor;
        }
    }


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

}

然后我們可以創建ContactViewModel.cs ：

public class ContactViewModel
{
    public List<Contacts> MyList { set; get; }
    public ContactViewModel()
    {
        MyList = new List<Contacts>();
        MyList.Add(new Contacts() { Address = "1", eMail = "1111@11.com", MyColor = Color.Red });
        MyList.Add(new Contacts() { Address = "2", eMail = "2222@22.com" });
        MyList.Add(new Contacts() { Address = "3", eMail = "3333@33.com" });
        MyList.Add(new Contacts() { Address = "4", eMail = "4444@44.com" });
        MyList.Add(new Contacts() { Address = "5", eMail = "5555@55.com" });

    }
}

XAML代碼如下：

<ListView x:Name="MyListView"
            ItemsSource="{Binding MyList}"
            ItemSelected="MyListView_ItemSelected">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                        <StackLayout Orientation="Horizontal"
                                        VerticalOptions="Center">
                            <Label Text="Hello World" TextColor="{Binding MyColor}"
                                    HorizontalOptions="StartAndExpand"></Label>
                            <Label Text="{Binding Address}"
                                    HorizontalOptions="CenterAndExpand"></Label>
                            <Label Text="{Binding eMail}"
                                    HorizontalOptions="CenterAndExpand"></Label>
                        </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

我將在選擇項目后修改文本顏色作為示例。

public partial class PageListView : ContentPage
{

    public PageListView()
    {
        InitializeComponent();

        BindingContext = new ContactViewModel();
    }
  
    private void MyListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as Contacts;
        item.MyColor = Color.Green;
    }
}

效果：