xamarin.formscolorsbindableproperty

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


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?


Solution

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