Centralize Your Styles with Xamarin Forms

Looking around the Internet before the Super Bowl I was trying to find a way to centrally declare styles for my Score Predict app.  I did not want to use code, I instead wanted to go with what I am more familiar with: XAML.  In most WPF and WinPhone apps we do this definition in the App.xaml using MergedDictionaries.  MergedDictionaries are very useful and provide for easy way to segregate styles and maintain organization, I wanted something similar in Forms.

After much search I stumped upon this code sample (http://tinyurl.com/SharedStyles) by Peter Major.  In it, he shows a rather interesting way to achieve this.

Normally, when a Forms app is created you are given an App.cs class and this ends up being the bootstrapper for your application.  What Peter did was remove that App.cs class and replace it with a Forms XAML page named App.xaml, in Score Predict I called this ScorePredictApplication.

The trick here is to have the Xaml page use <Application> as its start, instead of the default <ContentPage> (below):

<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ScorePredict.Core.ScorePredictApplication">

Doing this now creates the familiar .xaml file which WPF and WinPhoners are so familiar with.  To add styles, you simple use the Resources extended property

<?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="ScorePredict.Core.ScorePredictApplication">
  
  <Application.Resources>
    <ResourceDictionary>
      <OnPlatform x:TypeArguments="Font" Android="Large" iOS="Large" WinPhone="Large" x:Key="HeaderFont" />
      <OnPlatform x:TypeArguments="Color" Android="White" iOS="White" WinPhone="White" x:Key="PrimaryTextColor" />
      <OnPlatform x:TypeArguments="Font" Android="40" iOS="60" WinPhone="60" x:Key="LargeFontSize" />
      <OnPlatform x:TypeArguments="Font" Android="30" iOS="60" WinPhone="60" x:Key="MediumFontSize" />
  
  </Application.Resources>
</Application>

Notice, that we can also use the <OnPlatform> tag to customize our styles for each platform.  This is important because while Forms does a reasonable job of rendering, it is nice to be able to take finer control and tweak things.

As for the remainder of your bootstrap process, move it to the .cs codebehind, that will correct any issues.  The important thing is to remember to keep the call to InitializeComponent, if you drop it your styles will not be loaded.

public partial class ScorePredictApplication
{
    public ScorePredictApplication(INavigator navigator, params Module[] modules)
    {
       InitializeComponent();
    }
}

A small side note, previously in Score Predict I used a custom ContentPage based generic class to allow for automatic instantiation and implementation of the associated ViewModel.  For some reason, using a Generic class plays hell with styles and will cause the main XAML page for your application to crash when being generated.  I had to revert to a non-generic class to correct this.  Not sure how these two are linked at this time.

Advertisements

4 thoughts on “Centralize Your Styles with Xamarin Forms

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s