Xamarin.Forms 3.0 Features - CSS Support In XAML

Introduction

In this article, we will learn how to apply styling to our Xamarin.Forms app with CSS and Xamarin.Forms version 3.0 new properties.

Requirements

• This article's source code is prepared by using Visual Studio. It is better to install the latest Visual Studio updates from here.
• This article is prepared on a MAC machine.
• This sample project is in Xamarin.Forms of PCL project.
• This sample app is targeted for Android, iOS. And tested for Android & iOS.

Description:

Step 1:

First, follow the below steps to create the new Xamarin.Forms project.

1. Open Visual Studio for Mac.
2. Click on the File menu and select New Solution.
3. In the left pane of the dialog, let's select the type of templates to display. Multiplatform > App > Xamarin.Forms > Blank Forms App and click "Next".
4. Next, enter your app name (Ex: CSSXamarinForms). At the bottom, select target platforms to Android & iOS and shared code to Portable Class Library and click the "Next" button.
5. Then, choose project location with the help of Browse button and click "Create".

Now, the project structure will be created like below.

• CSSXamarinForms: It is for Shared Code
• .Droid: It is for Android.
• .iOS: It is for iOS.

This article will explain the below topics,

1. How to apply styling to our Xamarin.Forms app with CSS
2. New properties in Xamarin.Forms 3.0

1) How to apply styling to our Xamarin.Forms app with CSS

Step 1:

Make sure all three of your projects (PCL, Android and iOS) have Xamarin.Forms 3.0 or later.

Option 1:

• Right, click on Packages->AddPackages,

• Now Search Xamarin.Forms Package, and make sure to select version 3.0 or later.
• Click on AddPackage

Option 2:

• Right click On Xamarin.Forms packages under Packages folder in all platforms, then click on Update, it will install the latest version of Xamarin.Forms.

Note
If we don't update Xamarin.Forms we will get the below error.

Step 2:

Now we are going to create CSS Styles file,

• Right click on your PCL project => Add => New Folder and name it “Styles”. After that we need to create styles file by right click on “Styles” folder => Web => Empty CSS File and name it css like below,

• Default CSS file Build Action is None but it should be EmbeddedResource, if not CSS file will fail to load.

Note
If we did't change CSS file Build Action to EmbeddedResource will get the below error. So make sure it is EmbeddedResource.

Style Classes:

Here we can see how to declare Style sheet in XAML.

Create .xaml file with you own name

Create CSS file with MyStyles, name and declare your styles

MyStyles.css

Named Styling:

Here we can set particular VisualElement style using reference name x:Name.

CSSPage.xaml

MyStyles.css

Note
Here I gave #lblTitle x:Name to Label in XAML.

Inline Styling:

Here we will declare CSS inside the XAML file.

CSSPage.xaml