How to use Stylesheets/CSS in Xamarin?

In addition to programming and inserting relevant code is very important for designing a site or application. For this App or site to communicate better and easier with the user, the App or  site must have a user interface. And a better graphical interface. CSS in Xamarin is used to design and beautify apps and sites graphically.

Styling apps and sites with CSS

As we said, in addition to inserting codes and programming to  design and produce different types of applications  and sites, it is necessary that users like these apps and sites in terms of beauty. Because image and beauty can attract the user's attention more than anything, that is why in the production and design of different types of applications and sites, we must also consider styling.

There are some points in styling that must be considered. For example, it can be said that styling and graphic interface design can significantly impact the absorption and smoothness of doing things. In this way, if we style the site or developed applications ( on German:  die Website oder entwickelte Anwendungen gestalten  )in a principled way, we can easily attract many users. In addition, with the design of user interfaces and graphical interfaces, it is easy to make doing some work on sites and applications more accessible.

In XamarinForms, you can style and beautify applications in two ways. One of the methods of styling applications developed with Xamarin ( in French:  méthodes d'applications de style développées avec Xamarin  ) is CSS and the other is Xaml.

You may ask what Resource is. A resource is the Dictionary in which everything can be traced. Such as numbers, styles, strings, etc.

The App. XAML file and all pages have the same Resource dictionary. Of course, it is good to know that if we put something like a command and code inside App. XAML Resources, we can use it for the whole program. For example, when we place a style code inside App. XAML Resources, this style can be used for the entire program. But if we put something like style, number, code, etc., inside the Resources for a page, it can only be used for the controls on that page.

In another styling method, Xaml, you can use all the features such as Triggers, Binding, etc.

It should be noted that each style has a Target Type, and if the type of this style inside the Target Type is of the Label type, we can assign tasks to all Properties.

How to calculate the values ​​by each Label is as follows:

- If a FontFamily is set and set directly on a label, then that value is considered valid.

- If the style is defined and set for the Label located in the Resources and the style is set for that style in FontFamily, the given value will be the criterion.

- If there is no value for FontFamily on the resources of the page where the page contains the Label and on the Label itself, it is checked whether there is a value and style in App. XAML for the Label or not. If there is a style for it, that number will be the criterion.

In the other case, if no value to FontFamily is done in any of the pages and layers, the value that will be considered for it will be the default value selected by the  programmer and designer of Xamarin Forms.

In this case, when we want to expand all the application pages that we want to have, have a blue background in the App. XAML section, we will write a style for ContentPages that has a Blue Background Color feature.

In the code above, the value of ApplyToDerivedTypes is True. This is because all the pages that we want to blue background. Some pages are not ContentType and have been inherited from those pages. For example, if we design, the login page and login page are not of the ContentType type and instead inherited from those pages. Even PopupPages have inherited from ContentPage. To be able to apply a change not only on the main pages but also on the inherited runners. Using other methods may apply these changes to the main pages, while the other pages are copied without modifications.

To do this, we need to use ApplyToDerivedTypes to apply the desired changes to all pages, even inherited runners.

In other cases, we may want to apply a style to one or more buttons on some pages, rejecting this model. If we consider a change or a technique for a Button, other Buttons will take the exact change, and the same change applies to them. What is the solution in this case? How to prevent changes and styles for all buttons and apply that style to special buttons on some pages?

To prevent changes to all buttons on all pages and do something until styles and changes are applied to some specific buttons, we must put x: Key next to the type we define for the switch. You must remember this. If the style of a button has a key, we must also insert the key next to it whenever we use the button and call it.

When using StaticResource for page resources with a button or in App. XAML searches for a Style with x: Key equal to DangerButton and looks for it.

How to style with CSS is as follows.

The code below, which is for styling with CSS, is used to bold all the text of the buttons and can bold all the text of the buttons.

If we want to use CSS styling, we can save all the commands and related code in a file with CSS extension and then the written file that contains the code and controls to style the project. Let's add.

Each control has two properties, Styled, and class, which must be given a class/id.

If you want to use specific fonts, you must collect your favorite fonts and put them in a file. Of course, you should note that the fonts for the three Android / iOS / Windows projects are different, and you need to collect the fonts for them. Then consider these fonts for all three projects in App. XAML for Font Family of different types of controls such as Labels or other items.

To do this, add your favorite fonts that you selected for related projects to the relevant project.

Then copy the Windows operating system to Assets / Fonts, Android to the Assets / Fonts folder, and iOS to the Resources / Fonts folder.

Then add the leaked codes of the following rejection:

The code above When OpenSansBold is used for FontFamily when FontAttributes is a label equal to Bold.

By inserting these codes and applying these changes, we can change the existing fonts for all three Windows / Android and  iOS projects  in addition to styling.