Binding Colors to a Singleton

Question

I am developing a Xamarin forms App, and I decided that in order to make consistent styling across the app easier I would keep things like the color palette in a singleton class and then bind properties to it within XAML.

I originally implemented this as a Static Class to use x:Static, but quickly realised this couldn't really work since I needed the INotifyPropertyChanged, meaning when I ran the app everything was white.

I've now implemented the class as a proper singleton like so:

public class Colors : INotifyPropertyChanged
    {
        private Color primary;
        public Color Primary
        {
            get
            {
                return primary;
            }
            set
            {
                primary = value;
                NotifyPropertyChanged("Primary");
            }
        }

        private Color success;
        public Color Success
        {
            get
            {
                return success;
            }
            set
            {
                success = value;
                NotifyPropertyChanged("Success");
            }
        }

        private Color failure;
        public Color Failure
        {
            get
            {
                return failure;
            }
            set
            {
                failure = value;
                NotifyPropertyChanged("Failure");
            }
        }



        private Colors()
        {
            Primary = new Color(142, 190, 232);
            Success = new Color(134, 232, 133);
            Failure = new Color(255, 265, 173);
        }

        private static Colors instance;

        public static Colors Instance 
        {
            get 
            {
                if(instance == null)
                {
                    instance = new Colors();
                }
                return instance;
            }
        }

        // INotifyPropertyChanged implementation
        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged(String info)
        {
            var handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(info));
            }
        }
    }

I have been trying to use {Binding Source={local:Colors.Instance.Primary}} as a binding for these colors but I my XAML fails to compile with the error MarkupExtension not found for local:Colors.Instance which isn't awfully helpful.

Microsoft documentation on this is pretty unhelpful too so I'm at a bit of a loss. Can anybody point me in the right direction?

Answer 1

As you are not intended to change the styles at Runtime, Static Resource would be helpful in this case.

You can use ResourceDictionary in App.xaml which will be accessible throughout application.

<?xml version="1.0" encoding="utf-8"?><Application
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Test.App">
<Application.Resources>
    <ResourceDictionary>
        <Color
            x:Key="primary">#03A9F4</Color>
        <Color
            x:Key="primary_dark">#0288D1</Color>
        <Color
            x:Key="primary_light">#B3E5FC</Color>
        <Color
            x:Key="BlueToolBarColor">#012E5B</Color>
        <Style
            x:Key="HeaderText"
            TargetType="Label">
            <Setter
                Property="FontAttributes"
                Value="Bold" />
        </Style>
    </ResourceDictionary>
</Application.Resources>

You can use these resources in your XAML layout like this,

<Label
                        Text="Hello"
                        TextColor="{StaticResource primary_dark}"
                        Style="{StaticResource HeaderText}" />

Answer 2

As we spoke in the comments.
Because you don't anticipate the values to change during the runtime then you can do this by using a ResourceDictionary.
When you create a Xamarin.Forms application in VS2017 (that was my case) the wizard creates the sample for you. Here is what was created for me in App.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="App1.App">
    <Application.Resources>
        <ResourceDictionary>
            <!--Global Styles-->
            <!-- Here you would declare your colours -->
            <Color x:Key="NavigationPrimary">#2196F3</Color>
            <Style TargetType="NavigationPage">
                <!-- And here you would use them -->
                <Setter Property="BarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
                <Setter Property="BarTextColor" Value="White" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>  

This then is used in the view like so MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:views="clr-namespace:App1.Views"
        x:Class="App1.Views.MainPage">
    <TabbedPage.Children>
        <NavigationPage Title="Browse">
            <NavigationPage.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="iOS" Value="tab_feed.png"/>
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <views:ItemsPage />
            </x:Arguments>
        </NavigationPage>

        <NavigationPage Title="About">
            <NavigationPage.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="iOS" Value="tab_about.png"/>
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <views:AboutPage />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage.Children>
</TabbedPage>