XFShellAdvThemeing

Stunning App themes with Xamarin Forms Shell!

You probably already know how to in classic Xamarin.Forms, but how about Setting up App Themes in a Xamarin.Forms Shell App?, now that's what this is for. 😉

Check out the blog post: https://theconfuzedsourcecode.wordpress.com/2019/12/26/stunning-app-themes-in-xamarin-forms-shell-projects/

A little sneak peak:

Here we're using awesome built-in Xamarin.Forms Dynamic Binding, and Styling features to implement a neat App Theming solution. An alternative for: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/theming But focused on the awesome new paradigm of Xamarin.Forms Shell!

In a nutshell:

• Define Theme files with Colors/Fonts/Images/Icons in them
• Create Styles based on the Theme properties using Dynamic Binding
• Bind the UI Elements to the Styles created earlier
• Implement dynamic App Theme selection using MergedDictionaries
• Use XF.Essentials Preferences API to save App Theme preferences

Sample Theme File:

<?xml version="1.0" encoding="UTF-8" ?>
<ResourceDictionary
    x:Class="XFShellAdvThemeing.Themes.PinkTheme"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <Color x:Key="PrimaryColor">#fc0384</Color>
    <Color x:Key="AccentColor">#ffb8dd</Color>
    <Color x:Key="SecondaryColor">White</Color>

    <Color x:Key="PageBackgroundColor">White</Color>
    <Color x:Key="NavigationBarColor">#fc0384</Color>

    <Color x:Key="PrimaryTextColor">#3d0020</Color>
    <Color x:Key="SecondaryTextColor">#610033</Color>
    <Color x:Key="TertiaryTextColor">#960050</Color>
</ResourceDictionary>

Sample Style:

<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="BackgroundColor" Value="{DynamicResource PrimaryColor}" />
    <Setter Property="TextColor" Value="{DynamicResource SecondaryColor}" />
    <Setter Property="HeightRequest" Value="45" />
    <Setter Property="WidthRequest" Value="190" />
</Style>

Sample UI Element:

<Button
    x:Name="ChangeThemeButton"
    Clicked="ChangeThemeButton_Clicked"
    Style="{DynamicResource ButtonStyle}"
    Text="Change App Theme" />

Dynamic App Theme Switching:

ICollection<ResourceDictionary> mergedDictionaries
		= Application.Current.Resources.MergedDictionaries;
...
...
case Theme.Pink:
	mergedDictionaries.Add(new PinkTheme());
	break;
...
...

Saving Theme Preferences:

Preferences.Set("CurrentAppTheme", SelectedItem.ToString());

Behold the beauty on Android and iOS...