How to use a bindable property for colours in Xamarin.forms?

Question

I have my own custom control with some bindable properties. I coded the string bindable properties very easily using YouTube.

But how to use the bindable properties for colours?

Answer 1

You can refer to the following code:

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

Usage:

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