Xamarin Forms Customizing Styles And Themes Complete Guide

Step 1: Setting Up Your Xamarin.Forms Project

First, let's create a new Xamarin.Forms project. Follow these steps:

1. Open Visual Studio and create a new project.
2. Choose "Cross-Platform" and then "Mobile App (Xamarin.Forms)".
3. Select .NET Standard Code Sharing Strategy.
4. Name your project (e.g., XamarinStylesThemes) and create it.

Step 2: Basic Structure of a Xamarin.Forms Project

Your project structure should look something like this:

XamarinStylesThemes (Solution)
│
├── XamarinStylesThemes
│   ├── MainPage.xaml
│   ├── MainPage.xaml.cs
│   └── App.xaml
│       └── App.xaml.cs
│
├── XamarinStylesThemes.Android
│
├── XamarinStylesThemes.iOS
│
└── XamarinStylesThemes.UWP

Step 3: Understanding Styles and Themes

Styles

Styles are collections of property values that can be applied to multiple visual elements. Styles are beneficial for maintaining consistency and reducing code redundancy.

Themes

Themes consist of a set of styles that are applied uniformly across an application, enabling you to apply a particular look and feel by switching themes.

Step 4: Creating a Simple Style for a Control

Step 4.1: Define a Style in App.xaml

Open the App.xaml file and define a style for a button:

<?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="XamarinStylesThemes.App">
    <Application.Resources>
        <!-- Define a ResourceDictionary -->
        <ResourceDictionary>
            <!-- Define a Style for a Button -->
            <Style x:Key="PrimaryButtonStyle" TargetType="Button">
                <Setter Property="BackgroundColor" Value="#3498db" />
                <Setter Property="TextColor" Value="White" />
                <Setter Property="FontSize" Value="Medium" />
                <Setter Property="BorderRadius" Value="5" />
                <Setter Property="WidthRequest" Value="200" />
                <Setter Property="HeightRequest" Value="50" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Step 4.2: Apply the Style in MainPage.xaml

Open the MainPage.xaml file and apply the defined style to a button:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinStylesThemes.MainPage">

    <StackLayout Padding="20" VerticalOptions="Center" HorizontalOptions="Center">

        <Button Text="Click Me"
                Style="{StaticResource PrimaryButtonStyle}"
                Clicked="OnButtonClicked" />

        <Label x:Name="OutputLabel"
               Text="Hello, Xamarin.Forms!"
               VerticalOptions="Center"
               HorizontalOptions="Center"
               Margin="10,0,10,0"
               FontSize="Large"
               TextColor="Black" />

    </StackLayout>

</ContentPage>

Step 4.3: Code-Behind for the Button Click Event

Open the MainPage.xaml.cs file and handle the button click event:

using Xamarin.Forms;

namespace XamarinStylesThemes
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnButtonClicked(object sender, System.EventArgs e)
        {
            OutputLabel.Text = "Button Clicked!";
        }
    }
}

Now, when you run the app, you should see a styled button that changes the label text when clicked.

Step 5: Creating a Complete Theme

A theme is a collection of styles that can be applied across the entire application. Let's create a light and dark theme:

Step 5.1: Define Styles for Light and Dark Themes

In App.xaml, define styles for both light and dark themes:

<?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="XamarinStylesThemes.App">
    <Application.Resources>
        <!-- Define a ResourceDictionary -->
        <ResourceDictionary>
            <!-- Light Theme -->
            <ResourceDictionary x:Key="LightTheme">
                <Style x:Key="PrimaryButtonStyle" TargetType="Button">
                    <Setter Property="BackgroundColor" Value="#3498db" />
                    <Setter Property="TextColor" Value="White" />
                    <Setter Property="FontSize" Value="Medium" />
                    <Setter Property="BorderRadius" Value="5" />
                    <Setter Property="WidthRequest" Value="200" />
                    <Setter Property="HeightRequest" Value="50" />
                </Style>

                <Style x:Key="PageBackgroundColor" TargetType="ContentPage">
                    <Setter Property="BackgroundColor" Value="White" />
                </Style>

                <Style x:Key="LabelText" TargetType="Label">
                    <Setter Property="TextColor" Value="Black" />
                    <Setter Property="FontSize" Value="Large" />
                </Style>
            </ResourceDictionary>

            <!-- Dark Theme -->
            <ResourceDictionary x:Key="DarkTheme">
                <Style x:Key="PrimaryButtonStyle" TargetType="Button">
                    <Setter Property="BackgroundColor" Value="#2c3e50" />
                    <Setter Property="TextColor" Value="White" />
                    <Setter Property="FontSize" Value="Medium" />
                    <Setter Property="BorderRadius" Value="5" />
                    <Setter Property="WidthRequest" Value="200" />
                    <Setter Property="HeightRequest" Value="50" />
                </Style>

                <Style x:Key="PageBackgroundColor" TargetType="ContentPage">
                    <Setter Property="BackgroundColor" Value="#2c3e50" />
                </Style>

                <Style x:Key="LabelText" TargetType="Label">
                    <Setter Property="TextColor" Value="White" />
                    <Setter Property="FontSize" Value="Large" />
                </Style>
            </ResourceDictionary>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Step 5.2: Apply the Theme in MainPage.xaml

In MainPage.xaml, apply the current theme to the page:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinStylesThemes.MainPage">

    <ContentPage.Resources>
        <!-- Apply the Light Theme by default -->
        <ResourceDictionary MergeWith="{StaticResource LightTheme}" />
    </ContentPage.Resources>

    <StackLayout Padding="20" VerticalOptions="Center" HorizontalOptions="Center">
        <Button Text="Click Me"
                Style="{StaticResource PrimaryButtonStyle}"
                Clicked="OnButtonClicked" />

        <Label x:Name="OutputLabel"
               Text="Hello, Xamarin.Forms!"
               Style="{StaticResource LabelText}"
               VerticalOptions="Center"
               HorizontalOptions="Center"
               Margin="10,0,10,0" />

        <Button Text="Switch Theme"
                Style="{StaticResource PrimaryButtonStyle}"
                Clicked="OnSwitchThemeClicked" />
    </StackLayout>
</ContentPage>

Step 5.3: Add Logic to Switch Themes

In MainPage.xaml.cs, add the logic to switch between themes:

using Xamarin.Forms;

namespace XamarinStylesThemes
{
    public partial class MainPage : ContentPage
    {
        private bool isLightTheme = true;

        public MainPage()
        {
            InitializeComponent();
        }

        private void OnButtonClicked(object sender, System.EventArgs e)
        {
            OutputLabel.Text = "Button Clicked!";
        }

        private void OnSwitchThemeClicked(object sender, System.EventArgs e)
        {
            // Switch themes
            if (isLightTheme)
            {
                Resources.MergedDictionaries.Clear();
                Resources.MergedDictionaries.Add((ResourceDictionary)Application.Current.Resources.MergedDictionaries[1]);
                isLightTheme = false;
            }
            else
            {
                Resources.MergedDictionaries.Clear();
                Resources.MergedDictionaries.Add((ResourceDictionary)Application.Current.Resources.MergedDictionaries[0]);
                isLightTheme = true;
            }
        }
    }
}

Step 5.4: Run Your Application

When you run the app, you should see the light theme by default. Clicking the "Switch Theme" button will change the application's theme to dark and vice versa.

Step 6: Creating a Dynamic Theme Switcher (Optional)

For a more sophisticated theme switcher, consider using MVVM principles and Xamarin.Forms Triggers. However, for simplicity, the example above demonstrates a manual approach suitable for beginners.

Conclusion