Reputation: 219
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
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:
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:
Upvotes: 1