Swathy
Swathy

Reputation: 219

How to set textcolor dynamically in label inside listview in xamarin forms

How to set textcolor dynamically to a label inside in a listview .Need to set text color of the label in the entire app based on the users choice. I already declared styles in App.Xaml. Have a class style, declared color for the app in that. Currently taking color from there .But I need to set 2 colors for a label and select color based on the users choice.

App.XAML

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

Style class

 public class Style
{

    public static Color LabelLightColor = Color.Red;
 }

MainPage.xaml

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

Upvotes: 1

Views: 1881

Answers (1)

Junior Jiang
Junior Jiang

Reputation: 12723

If you need to use Style to achieve that, there is a Dynamic Styles in Xamarin.Forms to do.

Create the Style in 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>

The code of Label as follows:

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

Then can modify the TextColor by Button click event as follows:

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

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

The effect:

enter image description here

In addition, you also could bind a Color Value for TextColor property in Xaml, then modify the data of model can change the TextColor dynamically.

For example , the Contacts.cs items as follow:

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));
    }

}

Then we can create ContactViewModel.cs:

public class ContactViewModel
{
    public List<Contacts> MyList { set; get; }
    public ContactViewModel()
    {
        MyList = new List<Contacts>();
        MyList.Add(new Contacts() { Address = "1", eMail = "[email protected]", MyColor = Color.Red });
        MyList.Add(new Contacts() { Address = "2", eMail = "[email protected]" });
        MyList.Add(new Contacts() { Address = "3", eMail = "[email protected]" });
        MyList.Add(new Contacts() { Address = "4", eMail = "[email protected]" });
        MyList.Add(new Contacts() { Address = "5", eMail = "[email protected]" });

    }
}

XAML code as follows:

<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>

I will modify the text color after select item as the example.

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;
    }
}

The effect:

enter image description here

Upvotes: 1

Related Questions