Global styles from a XAML file in Xamarin.Forms

So I’m learning Xamarin.Forms and there is a simple (in Windows 8, at least) thing I want to do. I want to make a master style form in XAML for all my various styles. The thing is, as of right now Xamarin.Forms doesn’t support this. Well, I found a way to do it.

What you need to do, is create a ContentPage to hold your styles. Something like this:

  
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SharedProject.Styles.GlobalStyles">

	<ContentPage.Resources>
		<ResourceDictionary>
			<Style x:Key="ContentLabelStyle" TargetType="Label">
				<Setter Property="Label.TextColor" Value="Navy"/>
        		<Setter Property="Label.LineBreakMode" Value="WordWrap"/>
        		<Setter Property="Label.FontSize" Value="25"/>
			</Style>

			<Style x:Key="HeaderLabelStyle" TargetType="Label" BasedOn="{StaticResource ContentLabelStyle}">
				<Setter Property="Label.Font" Value="Bold, Large"/>
			</Style>
		</ResourceDictionary>
	</ContentPage.Resources>
</ContentPage>		

Essentially what we’re doing is outsourcing the style holding to another page. As a result, we’ll need to apply that page’s local Resources to our App level Resources. You’ll want to add two lines to your App.cs constructor:

 
// Your file path may be different.
var globalStyles = new SharedProject.Styles.GlobalStyles ();
Resources = globalStyles.Resources;

So it’ll look like this:

 
public App ()
{
    var globalStyles = new SharedProject.Styles.GlobalStyles ();
    Resources = globalStyles.Resources;

    // The root page of your application
    MainPage = new ContentPage {
		Content = new StackLayout {
			VerticalOptions = LayoutOptions.Center,
			Children = {
				new Label {
					XAlign = TextAlignment.Center,
					Text = "Welcome to Xamarin Forms!"
				}
			}
		}
	};
}

And that’s it. Now all those styles are accessible from all your pages as a StaticResource. I haven’t tested this with templates, but I’m guessing the same will hold true. I’ll update with more as I complete those tests.

This entry was posted in Xamarin, Xamarin.Forms, XAML. Bookmark the permalink.

2 Responses to Global styles from a XAML file in Xamarin.Forms

  1. JonJon says:

    Nice post! I think this is a bit more simple solution than what the Xamarin docs say (adding it directly to an App XAML).

    • Mark says:

      Thanks. For simple apps this works well. Just be aware, it means one thing in memory (it is an entire page, after all). For all the situations I’ve run into it meets my needs well.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s