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.
We install the plugin, then we go to TOOLS / Options / XAML Styler and leave it just like the following images.
…to then obtain this result in our XAML code.
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:
Install the extension, then go to TOOLS, click on “Color Picker”, and attach it to the right side of Visual Studio.
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.
From there, this style architecture emerges, the following image shows the flow of the Style Library:
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 :
On websites that offer free and paid Font Icons, a popular one is MaterialDesignIcons.
The other way is to create your own icon source, ooohhhhhhh !!!!, we will use two tools, AdobeXD and IconMoon:
In AdobeXD, batch select the icons and export it to SVG.
In IconMoon, convert them to a custom font.
With “ IconFontToCode”, you will transform the source into code, which you will use in your Xamarin.Forms project.
…then we copy the two sources to the Android and iOS projects.
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.- 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:keymust start with the variant followed by the name of the font family, this helps to differentiate from other sources. Example:BoldFont_ProductSans.
Font size is an important issue, and thanks to Material Design we can categorize them as shown in the left image.
TIP: The
x:keybegins withTxtSizefollowed by the abbreviation of theScale Categoryand theSizeof this, exampleTxtSizeH2_60(see the full Image).
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
FontSizebut with differentTextColororFontFamily, the abbreviation ends in a number that indicates the priority, this case can be seen in the image.
2.2.- Icons.xaml
This ResourceDictionary establishes the IconFonts through OnPlatform, its structure can be seen in the following image.
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.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").
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.
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.
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.
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.
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 ).
In the following image we can see the structure of Shell in broad strokes.
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.
… With DynamicResource it will make possible the change of Themes.
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
Conclusions
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.
Top comments (0)