Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change Color of Xamarin Forms Label in C# only, no XAML

I have this XAML code:

<StackLayout Grid.Row="0" Grid.Column="0" Padding="15,10,20,10" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand">
   <StackLayout.GestureRecognizers>
      <TapGestureRecognizer Tapped="tapFavorites" NumberOfTapsRequired="1" />
   </StackLayout.GestureRecognizers>
   <Label x:Name="faveLabel" FontFamily="FontAwesome" XAlign="Center" FontSize="23">
      <Label.Triggers>
         <DataTrigger TargetType="Label" Binding="{Binding Favorite}" Value="true">
            <Setter Property="TextColor" Value="Red" />
         </DataTrigger>
         <DataTrigger TargetType="Label" Binding="{Binding Favorite}" Value="false">
            <Setter Property="TextColor" Value="Gray" />
         </DataTrigger>
      </Label.Triggers>
   </Label>
</StackLayout>

In my C# code I am familar with setting the Text property of the label by simply specifying like this:

sampleLabel.Text = "ABC"

But this situation is different. Can someone tell me how I can change the color of a label from C# when the label is clicked on.

like image 924
Alan2 Avatar asked Jul 14 '17 13:07

Alan2


2 Answers

What about this:

enter image description here

MainPage:

public partial class MainPage : ContentPage
{
    MyViewModel vm;

    public MainPage()
    {
        InitializeComponent();

        vm = new MyViewModel();
        BindingContext = vm;

        var faveLabel = new Label { FontSize = 24, FontFamily = "FontAwesome", Text = "Tap Here !" };

        var trigger1 = new DataTrigger(typeof(Label));
        trigger1.Binding = new Binding("Favorite", BindingMode.TwoWay);
        trigger1.Value = true;
        trigger1.Setters.Add(new Setter { Property = Label.TextColorProperty, Value = Color.Red });

        var trigger2 = new DataTrigger(typeof(Label));
        trigger2.Binding = new Binding("Favorite", BindingMode.TwoWay);
        trigger2.Value = false;
        trigger2.Setters.Add(new Setter { Property = Label.TextColorProperty, Value = Color.Gray });

        faveLabel.Triggers.Add(trigger1);
        faveLabel.Triggers.Add(trigger2);

        var sl = new StackLayout {
            HorizontalOptions = LayoutOptions.StartAndExpand,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };

        var tgr = new TapGestureRecognizer();
        tgr.NumberOfTapsRequired = 1;
        tgr.Tapped += tapFavorites;
        sl.GestureRecognizers.Add(tgr);

        sl.Children.Add(faveLabel);

        Content = sl;
    }

    public void tapFavorites(object sender, EventArgs e)
    {
        vm.Favorite = !vm.Favorite;
    }
}

ViewModel:

public class MyViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private bool favorite;
    public bool Favorite
    {
        get { return favorite; }
        set
        {
            if (value != favorite)
            {
                favorite = value;
                NotifyPropertyChanged();
            }
        }
    }
    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}
like image 81
jsanalytics Avatar answered Sep 21 '22 21:09

jsanalytics


You can access your faveLabel trough it's name and a GestureRecognizer to it. There you set the TextColor of your label to a different one. Instead of typing the code out after the arrow function you can also provide a function.

faveLabel.GestureRecognizers.Add( new TapGestureRecognizer { Command = new Command( () => faveLabel.TextColor = Color.Red ) });

Instead of typing the full code out after the arrow function you can also provide a function.

... { Command = new Command(() => OnLabelClicked() ) }

Here is the link to the official Xamarin documentation for the (Tap)GestureRecognizers.

like image 42
maracuja-juice Avatar answered Sep 20 '22 21:09

maracuja-juice