CODEWITHSUNDEEP
xamarinxamarin.formscolors
Akif Patel
Akif Patel

Reputation: 23

Xamarin.Forms: Color Resource not working on Color Property of Custom Control

I have created a custom control having an image and label. I have added a bindable color property to it.

 public static readonly BindableProperty TintColorProperty =
        BindableProperty.Create("TintColor", typeof(Color), typeof(Color), Color.Black,
            BindingMode.TwoWay, propertyChanged: OnTintColorChanged);
 public Color TintColor
 {
     get { return (Color)GetValue(TintColorProperty); }
     set { SetValue(ImageSourceProperty, value); }
 }

Below is the property change event.

private static void OnTintColorChanged(BindableObject bindable, object oldValue, object newValue)
{
     var control = bindable;
     ImageTint effect = (ImageTint)control.IconPng.Effects.FirstOrDefault(
         e => e is ImageTint);
     effect.TintColor = (Color)newValue;
}

When I am passing System Color from xaml, the event is getting invoked. But when I pass Color Resource, it does not!

TintColor="{StaticResource ColorPrimary}"

Upvotes: 1

Views: 691

Answers (1)

Ingweland
Ingweland

Reputation: 1077

You have few mistakes in your code. In particular, your property setter sets a different property than expected. Also, you might want changing declared type to your control when writing the binding, as well as removing two way binding (i doubt that you need it). Probably, it's just a coincidence that it worked for you at least in one case. Here is a sample for you.

Custom control MyControl.xaml

    <?xml version="1.0" encoding="UTF-8" ?>
    <ContentView
        x:Class="App12.MyControl"
        xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:d="http://xamarin.com/schemas/2014/forms/design"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <ContentView.Content>
            <StackLayout>
                <Label x:Name="MyLbl" Text="Hello Xamarin.Forms!" />
            </StackLayout>
        </ContentView.Content>
    </ContentView>

Custom control's code-behind MyControl.xaml.cs

    public partial class MyControl
        {
            public static readonly BindableProperty TintColorProperty =
                BindableProperty.Create(nameof(TintColor), typeof(Color), typeof(MyControl), Color.Black,
                    propertyChanged: OnTintColorChanged);
    
            public MyControl()
            {
                InitializeComponent();
            }
    
            public Color TintColor
            {
                get { return (Color) GetValue(TintColorProperty); }
                set { SetValue(TintColorProperty, value); }
            }
    
            private static void OnTintColorChanged(BindableObject bindable, object oldValue, object newValue)
            {
                var control = bindable as MyControl;
                if (control == null)
                {
                    return;
                }
    
                control.MyLbl.TextColor = (Color) newValue;
            }
        }

Some page, where you are using the control

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage
        x:Class="App12.MainPage"
        xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:app12="clr-namespace:App12;assembly=App12"
        xmlns:d="http://xamarin.com/schemas/2014/forms/design"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <ContentPage.Resources>
            <ResourceDictionary>
                <Color x:Key="PrimaryTextColor">#ff00ff</Color>
            </ResourceDictionary>
        </ContentPage.Resources>
        <StackLayout>
            <app12:MyControl
                HorizontalOptions="Center"
                TintColor="{StaticResource PrimaryTextColor}"
                VerticalOptions="CenterAndExpand" />
            <app12:MyControl
                HorizontalOptions="Center"
                TintColor="Aqua"
                VerticalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage>

Upvotes: 0

Related Questions