From 2018 Xamarin.Forms support styling controls by CSS Styles:

What is better than making our XAML code simpler by creating selectors and styles in a separate file, where we could see just styling of our classes or controls, without XAML large descriptions for each style/color/…?

But CSS is too poor and can not be used by 100% in Xamarin.Forms most useful features will not work only at runtime. It’s sad. But we could use SASS or LESS in our project. In this “story” I will show you how to add a Less into your Xamarin.Forms application.

Base Project

Here I plan to show you with that we will work:

Simplest project with one page — Main Page. All defined at XAML. Here it is:

Add CSS into XAML

Create a new Folder — Styles. In that folder, we will save all our CSS files.

Here we have two options:

  • Create one base file for all application and attach it at App.xaml
  • Create one CSS file per XAML Page.

It depends on your project specification and does not matter what will you choose it will still be easy to attach it via Resources:

Now let’s move all style into our CSS file.

After moving our CSS will be next:

And our XAML right now more clear and easy to read:

All about selectors and allowed styles you could read from a Styling Xamarin.Forms Apps using Cascading Style Sheets (CSS) — Xamarin link(same as in the top)

But what about more, what if we want to shave colors part of styles between CSS files?

Add LESS into Xamarin.Forms

For that, we could use [LESS](http://lesscss.org/features/).

For that, we will create separate .Net Standard Library, but we could also add it into our project if you want it ;)

  • Create New .Net Standard Library with name StyledApp.Less:
  • Open PowerShell or CMD at StyledApp.Less folder.
  • Initialize NPM: npm init
  • Into package.json add next dependencies: “devDependencies”:
    { “gulp”: “3.9.1”, “gulp-less”: “3.3.0” }
  • At console type: npm install

Now your project is ready for using LESS with GULP tasks.

Add our Less File. For that project, I plan to share standard colors in separate less file and load it in page less files where plan to use it. It will help me to leave application in one color scheme like we could make it with Style at XAML.

What’s next? Is it all we need? — No, one more thing is left. We need to build our LESS into CSS.

We will do that with Gulp tasks and gulpfile:

  • Create gulpfile.js at StyledApp.Less folder.
  • Add Task for build our less file and attach into default task
  • Open Properties of StyledApp.Less => Build Events => Pre-build event command line => type gulp

Now if you build StyledApp.Less you will see that our less compiled into CSS and added into our StyledApp.Styles folder:

That's it. Now you can write LESS styles and use them in your Xamarin.Forms projects.

All sources you could find at my GitHub => https://github.com/bbenetskyy/StyledApp-Xamarin-Less

Thanks for reading ;)

P.S. => This is my first story, will be happy for all suggestions about how to make this simple guide more better and useful.

Microsoft MVP | C# .Net | Xamarin

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store