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
Let's start,

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

• CSSXamarinForms.Droid:   It is for Android.

• CSSXamarinForms.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 to your all three projects (PCL, Android and iOS) should have Xamarin.Forms should be 3.0 or later.

Option 1:

Right, click on Packages->AddPackages

• Now Search Xamarin.Forms Package, and make sure 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 latest version of Xamarin.Forms.

Note:

If we did't update Xamarin.Forms we will get 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 Styles.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 below error. So make sure it is EmbeddedResource.

Style Classes:

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

1) Create .xaml file with you own name 

CSSPage.xaml:

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
3.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
4.     x:Class="CSSXamarinForms.CSSPage">  
5.     <ContentPage.Resources>  
6.         <StyleSheet Source="Styles/MyStyles.css"/>  
7.     </ContentPage.Resources>  
8.     <StackLayout>  
9.         <Label x:Name="lblTitle" Text="Xamarin.Forms 3.0 CSS!" VerticalOptions="CenterAndExpand"/>  
10.     </StackLayout>  
11. </ContentPage>  

2)  Create CSS file with MyStyles  name and declare your styles

MyStyles.css

1. ^ContentPage {  
2.     background-color: #eedd82;  
3.     padding-top: 40;  
4.     padding-left: 5;  
5.     padding-right: 5;  
6.     padding-bottom: 5;  
7. }  
8.   
9. stacklayout {  
10.     background-color: transparent;  
11.     padding: 20;  
12. }  
13.   
14. ^Label {  
15.     text-align: center;  
16.     color: black;  
17.     font-size: 30;  
18.     font-style: italic;  
19. }  

Named Styling:

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

CSSPage.xaml:

1. <Label x:Name="lblTitle" Text="Xamarin.Forms 3.0 CSS!" VerticalOptions="CenterAndExpand"/>  

MyStyles.css:

1. ^ContentPage {  
2.     background-color: #82E0AA;  
3.     padding-top: 40;  
4.     padding-left: 5;  
5.     padding-right: 5;  
6.     padding-bottom: 5;  
7. }  
8.   
9. stacklayout {  
10.     background-color: transparent;  
11.     padding: 20;  
12. }  
13.   
14. #lblTitle {  
15.     color: blue;  
16.     font-size:30;  
17.     text-align:center;  
18. }  

Note: 

Here I given #lblTitle x:Name to Label in XAML

Inline Styling:

Here we will declare CSS inside the XAML file.

CSSPage.xaml:

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
3.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
4.     x:Class="CSSXamarinForms.CSSPage">  
5.     <ContentPage.Resources>  
6.         <StyleSheet>  
7.             <![CDATA[ 
8.             ^contentpage { 
9.             background-color: #3498DB; 
10.             } 
11.             ^Label{ 
12.             color:  white; 
13.             font-size:30; 
14.             text-align:center; 
15.             } 
16.           ]]>  
17.         </StyleSheet>  
18.     </ContentPage.Resources>  
19.     <StackLayout>  
20.         <Label x:Name="lblTitle" Text="Xamarin.Forms 3.0 CSS!" VerticalOptions="CenterAndExpand" />  
21.     </StackLayout>  
22. </ContentPage>  

Inheritance

Here we can declare nested layout styles using CSS.

CSSPage.xaml:

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
3.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
4.     x:Class="CSSXamarinForms.CSSPage">  
5.     <ContentPage.Resources>  
6.         <StyleSheet Source="Styles/MyStyles.css"/>  
7.     </ContentPage.Resources>  
8.     <Grid VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">  
9.         <Grid.RowDefinitions>  
10.             <RowDefinition Height="Auto"/>  
11.             <RowDefinition Height="Auto"/>  
12.         </Grid.RowDefinitions>  
13.         <StackLayout Grid.Row="0">  
14.             <Label x:Name="lblTitle" Text="Xamarin.Forms 3.0 CSS!" HorizontalOptions="CenterAndExpand"/>  
15.             <Label x:Name="eventName" Text="Microsoft Build(May7th-9th 2018)" HorizontalOptions="CenterAndExpand"/>  
16.             <StackLayout Orientation="Vertical">  
17.                 <Button x:Name="btnStack" Text="Venky Balaraju" />  
18.             </StackLayout>  
19.         </StackLayout>  
20.         <Button x:Name="btnGrid" Grid.Row="1" Text="Venky Balaraju" />  
21.     </Grid>  
22. </ContentPage> 

Example 1:

StackLayout child labels in Grid.Row="0":

MyStyles.css:

1. stacklayout > label {  
2.     color: blue;  
3.     font-size:20;  
4.     text-align:center;  
5. }   

Example 2:

StackLayout child button in Grid.Row="0":

1. stacklayout > label {  
2.     color: blue;  
3.     font-size:20;  
4.     text-align:center;  
5. }  
6.   
7. stacklayout button {  
8.     color: red;  
9.     font-size: 20;  
10.     text-align: center;  
11. }  

Example 3:
Grid button Grid.Row="1":

1. stacklayout button {  
2.     color: blue;  
3.     font-size: 20;  
4.     text-align: center;  
5. }  
6.   
7. grid button {  
8.     color: purple;  
9.     font-size: 20;  
10.     text-align: center;  
11. }  

2.  New properties in Xamarin.Forms 3.0

1) Entry MaxLength:

1. <Entry Placeholder="mobileNumber" MaxLength="10"/>  

2) ListView Separator full width for iOS

In iOS ListView having default left margin, in latest version we can set full width, and for platform specifics futures iOS and Android.

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
3.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
4.     xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"  
5.     x:Class="CSSXamarinForms.CSSPage">  
6.     <StackLayout VerticalOptions="FillAndExpand">  
7.         <ListView x:Name="EmployeeView" ios:ListView.SeparatorStyle="FullWidth" Footer="">  
8.             <ListView.ItemTemplate>  
9.                 <DataTemplate>  
10.                     <TextCell Text="{Binding DisplayName}" TextColor="#3498DB" />  
11.                 </DataTemplate>  
12.             </ListView.ItemTemplate>  
13.         </ListView>  
14.     </StackLayout>  
15. </ContentPage>  

3) ProgressBar ProgressColor:

Now we can set progress color for ProgressBar instead of default color.

1. <ProgressBar ProgressColor="Maroon" Progress="0.5" BackgroundColor="Silver"/>  

4) Picker, DatePicker and TimePicker font styles:

1. <Picker  Title="Select" FontFamily="Times New Roman" TextColor="Maroon" FontSize="20" FontAttributes="Italic" HeightRequest="40"/>  
2. <DatePicker FontFamily="Times New Roman" FontSize="20" FontAttributes="Italic" HeightRequest="40"/>  
3. <TimePicker FontFamily="Times New Roman" FontSize="20" FontAttributes="Italic" HeightRequest="40"/>  

Thanks for reading the article.