Home Creating a clean Style Library for Xamarin.Forms
Creating a clean Style Library for Xamarin.Forms

Creating a clean Style Library for Xamarin.Forms

A brief introduction of how this publication originated, seeing several Xamarin.Forms projects with different ways of using styles, I said to myself, why not make a Library that is universal for any type of application?, Then I started researching Microsoft documentation, blogs, etc., and thus this great project was born.

Before explaining step by step the components that make up this Style Library, we will add two primary extensions focused on the order and readability of XAML.

XAML Styler

XAML Styler is an extension compatible with Visual Studio 2017 and 2019, its purpose is to organize the XAML code.

Next, I show you my configuration for XAML Styler.

1.- We install the plugin, then we go to TOOLS / Options / XAML Styler and leave it just like the following images.

2-XAML-Styler-Part-1 XAML Styler Part 1

2-XAML-Styler-Part-2 XAML Styler Part 2

2.-… to then obtain this result in our XAML code.

2-XAML-Styler-in-action XAML Styler in action

Color picker

Color picker is another extension compatible with Visual Studio 2017 and 2019, its purpose is to highlight hexadecimal colors, RGB, etc., it is very useful to realize what type of color we use in an XAML style or control.

To have it included in our Visual Studio work area we will make the following configurations:

1.- Install the extension, then go to TOOLS, click on “Color Picker”, and attach it to the right side of Visual Studio.

2-Color-Picker-in-action Color Picker in action

Now that we have these two great extensions, we will begin to understand the Style Library.

Styles Architecture in Xamarin.Forms

Before talking about style architecture, we have to see what interfaces have in common, we can see that there are images, icons, texts and the spaces that separate it.

2-Pokedex-design-by-Daniel-Motta “Pokedex” design by Daniel Motta

From there, this style architecture emerges, the following image shows the flow of the Style Library:

2-Style-Architecture-by-Daniel-Monettelli Style Architecture by Daniel Monettelli

Does it seem complicated to understand ?, do not worry, then I explain step by step said Workflow.

1.- Font Icons

The Font Icons are enriched icons SVG font, exactly as you read it , let alone implement your project type icons png, jpg, etc, now you will work with sources, and how do I get Font Icons ?, there are two ways to acquire :

1.- On websites that offer free and paid Font Icons, a popular one is MaterialDesignIcons.

2-materialdesignicons-webfont materialdesignicons-webfont.ttf

2.- The other way is to create your own icon source, ooohhhhhhh !!!!, we will use two tools, AdobeXD and IconMoon:

a) In AdobeXD, batch select the icons and export it to SVG.

b) In IconMoon, convert them to a custom font.

c) With “ IconFontToCode”, you will transform the source into code, which you will use in your Xamarin.Forms project.

2-AdobeXD-and-IconMoon-in-action AdobeXD and IconMoon in action

… then we copy the two sources to the Android and iOS projects.

2-Font-Icons-on-Android-and-iOS Font Icons on Android and iOS

In the .NET Standard project, create a folder called “Styles”, and two classes called “IconFont.cs” (a nexa materialdesignicons-webfont.ttf ) and “CustomIconFont.cs” ( appendix CustomIconFont.ttf ), then copy the code generated by ”IconFontToCode”…

2-Static-Classes-of-Font-Icons Static Classes of Font Icons

2.- Resource Dictionary in XAML

2.1.- Texts.xaml

This ResourceDictionary establishes the sources of the application through OnPlatform, and with their respective variants called Bold, ItalicBold, italic, etc.

First we add the TTF or OTF source, Adam Pedley’s post clearly explains how to do it.

Tip: The x:key must start with the variant followed by the name of the font family, this helps to differentiate from other sources. Example: BoldFont_ProductSans.

2-Fonts-using-OnPlatform Fonts using OnPlatform

Font size is an important issue, and thanks to Material Design we can categorize them as shown in the left image.

Tip: The x:key begins with TxtSize followed by the abbreviation of the Scale Category and theSize of this, example TxtSizeH2_60 (see the full Image).

2-Scale-Category-by-Material-Design Scale Category by Material Design

As for the “TargetType” of the styles, we will use controls that have text, example: Button, Label, etc.

The abbreviation is easy to understand, and thanks to the XAML intellisense we will create styles in record time, in the following image you can distinguish the parts that integrate a text style.

CASE: When we have two styles with similar FontSize but with different TextColor or FontFamily, the abbreviation ends in a number that indicates the priority, this case can be seen in the image.

2-Text-Style-structure Text Style structure

2.2.- Icons.xaml

This ResourceDictionary establishes the IconFonts through OnPlatform, its structure can be seen in the following image.

2-Icon-fonts-by-OnPlatform Icon fonts by OnPlatform

To use the IconFonts, the labeling “FontImageSource” must be created, and since we are using Shell we must separate the resources from Tabs, Flyout and Interfaces ( views that will use these resources ).

2-FontImageSource-in-Tabs-Flyout-and-Interfaces FontImageSource in Tabs, Flyout and Interfaces

2.3.- Spaces.xaml

This ResourceDictionary implements Thickness, and thanks to OnPlatform we establish the amplitude of the Layouts, following the parameters of Material Design.

We regularly use GridLayout, StackLayout and Frame, therefore, the styles will be exclusive to them.

NOTE: The layouts and controls mentioned have default spaces, for which, assign a group of basic styles and whose properties are of value 0 (See the image “Spaces BASE”).

2-Structure-in-Spaces-xaml Structure in Spaces.xaml

3.- Themes

This ResourceDictionary implements “Color”, a group of colors that will qualify the interfaces of Xamarin.Forms.

NOTE: The colors of the themes I classify as follows:

  • Color Range: It is the range of colors that the interfaces will have, the range is by level of prominence.
  • Backgroundcolors: They are the background colors of an interface.
  • Entry Colors: Typical colors for the Entry control.
  • Border Colors: Border colors for controls such as Button, frame etc.
  • Remark Colors: Colors for the Button type Label control.
  • Surface Colors: Surface colors for Frames.
  • Shell Colors: Colors for Tabs and Flyout.

2-White-and-Dark-Theme White and Dark Theme

The help of Zeplin is very important to organize resources to the themes, only the way you use it depends, in the following gif you can see how I import colors from Zeplin to Visual Studio.

2-Zeplin-in-action Zeplin in action

4.- General.xaml

This ResourceDictionary merges Texts.xaml, Icons.xaml and Spaces.xaml through MergedDictionaries, thanks to Adam Pedley, it is possible to separate several XAML files, and create this great style architecture.

2-Use-of-MergedDictionaries-in-General-xaml Use of MergedDictionaries in General.xaml

5.- App.xaml

The XAML App class, is the nexus of the architecture of styles and the Views of Xamarin.Forms, therefore, to link them, it is necessary to add a dictionary of resources, in this case, the source is WhiteTheme.xaml.

2-Designated-theme-in-App-xaml Designated theme in App.xaml

6.- AppShelll.xaml

AppShell seeks to reduce the complexity of creating mobile applications by providing fundamental application architecture features. As a complete visual hierarchy, common browsing experience, URI-based routing and integrated search management ( David Ortinau, Principal Program Manager of Microsoft ).

2-Shell-architecture Shell architecture

In the following image we can see the structure of Shell in broad strokes.

2-Shell-architecture-in-xaml Shell architecture in xaml

7.- Views

They are XAML files whose base class is a ContentPage, in it we can add layouts, controls, etc.

Binding also plays an important role, the following image shows the MainService.cs class, whose “Image_Category” property, is a font icon, and with “ImageColor_Category”, allows the color to be different in each instance, in XAML we add a Label and we include this logic.

2-Logic-of-a-list-of-icons Logic of a list of icons

… With DynamicResource it will make possible the change of Themes.

2-Using-DynamicResource Using DynamicResource

8.- Final result

The application speaks for itself, remember that the only way to do a great job is to love what you do … ( Steve Jobs )

GitHub: https://github.com/danielmonettelli/XF_FoodApp

2-Xamarin-Forms-application-made-with-the-Style-Library Xamarin.Forms application made with the Style Library


As one learns, one realizes that order is very important in every way, and in programming with greater reason, that is why I take the time to create such a publication, this Xamarin Styles Architecture.Forms will serve to To ignore common properties that we use, it is feasible for Shell, easy implementation of colors to Themes thanks to Zeplin, use of Font Icons to improve the performance of the application, clean management of resources in each interface of the application, etc.

I hope it helps, any questions you have regarding the Architecture of Styles write to me and I will gladly answer all your questions.

This post is licensed under CC BY 4.0 by the author.

The new perspective of the Developer

What’s new in Xamarin.Forms – XAML