Setting Colors And Styles In Application Resources

Introduction

In this article, we are going to learn how to set up a theme or a color for your Xamarin application and change this by using a toggle. Furthermore, we'll see how to use this theme as a default theme for the entire application which will allow shortening the code. And you don’t have to declare the color every time you create a new page.

Targeted Audience

People with a basic knowledge of C# and Xamarin.

Tools

Visual Studio with Xamarin installed.

Whenever you are building an application, you have to set up some basic colors and schemes which you are going to use throughout your application. This technique helps you to remove the duplication of code and makes it easier to apply the modifications by changing the code in only one place. Here we are going to learn how to do this.

The Results will be something like this,

 

 

In the pictures above you can clearly see that the toggle is off by default and the background is set to black, but when the toggle is switched to on the color turns white. Let's see how to do this.

To set the main colors, simply go to App.xaml and put a tag name <Application.Resources> between the <Application> tag. It contains all the resources of your application like coloring and styling. It further consists of <ResourceDictionary> in which you are going to declare your colors and styles. So in this, simply put your color tags. For now, I’m using black and white only.

XAML code for 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="PracApp1.App">
    <Application.Resources>
        <ResourceDictionary>
            <Color x:Key="LabelColor">#FFFFFF</Color>
            <Color x:Key="BgColor">#000000</Color>
            <Style x:Key="ThemeColor" TargetType="StackLayout">
                <Setter Property="BackgroundColor" Value="{x:DynamicResource BgColor}"></Setter>
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

You can see I declared two color tags; one is for my label and the second is for my default background theme color. Bgcolor is bound with the style tag which means the style will contain the black color. Style tag consists of property name “TargetType” which denotes what type of layout it is targeting.

Setter tag contains a property which will show where it is going to apply and value is bound with the BfColor.

XAML Code for Main Page,

<StackLayout Style="{x:DynamicResource ThemeColor}">
        <Label TextColor="{x:DynamicResource LabelColor}" HorizontalOptions="Center" VerticalOptions="Center" Text="Saleh Qadeer"></Label>
        <Switch
            BackgroundColor="{x:DynamicResource LabelColor}"
            HorizontalOptions="Center" VerticalOptions="Center"
            Toggled="Switch_Toggled"></Switch>
    </StackLayout>

Simply put a stack layout and I also used a label and a switch in it. The layout is bound with the ThemeColor and label and switch are bound with the LabelColor. Switch toggle event is created and now I’m going to show how to change the color on the toggle. Simply use this code in the MainPage.xaml.cs

C# Code

private void Switch_Toggled(object sender, ToggledEventArgs e)
        {
            var getVal = sender as Switch;
            if (getVal.IsToggled)
            {
                App.Current.Resources["LabelColor"] = "#000000";
                App.Current.Resources["BgColor"] = "#FFFFFF";
            }
            else
            {
                App.Current.Resources["LabelColor"] = "#FFFFFF";
                App.Current.Resources["BgColor"] = "#000000";
            }
        }

The code shows when the switch is toggled the Label and switch turnblack and the background color turns white. This all happens due to the App.Current.Resources which helps you to access the current resources of your application.

Summary

Having some knowledge about application resources helps you a lot in defining the resources of your application. You can set different images to the background or can declare basic and major colors of the app. So this article helps you to learn about  app resources and teaches you how to set them and change them if needed.