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

Description:

Let's start,

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.

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:

Xamarin
Xamarin

Option 2:

Xamarin

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

Xamarin

Step 2:

Now we are going to create CSS Styles file,

Xamarin
Xamarin

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

Xamarin

Style Classes:

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

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" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="CSSXamarinForms.CSSPage">
  3. <ContentPage.Resources>
  4. <StyleSheet Source="Styles/MyStyles.css" />
  5. </ContentPage.Resources>
  6. <StackLayout>
  7. <Label x:Name="lblTitle" Text="Xamarin.Forms 3.0 CSS!" VerticalOptions="CenterAndExpand" />
  8. </StackLayout>
  9. </ContentPage>

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. stacklayout {
  9. background - color: transparent;
  10. padding: 20;
  11. } ^ Label {
  12. text - align: center;
  13. color: black;
  14. font - size: 30;
  15. font - style: italic;
  16. }
Xamarin

Named Styling:

Here we can set particular VisualElement style using 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. stacklayout {
  9. background-color: transparent;
  10. padding: 20;
  11. }
  12. # lblTitle {
  13. color: blue;
  14. font - size: 30;
  15. text - align: center;
  16. }

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

Xamarin

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

Inheritance:
Here we can declare nested layout styles using CSS. In the first row I've taken StackLayout with two children (Labels) and in the second row I have taken Button, see the examples below for applying styles

CSSPage.xaml

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

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. stacklayout button {
  7. color: red;
  8. font - size: 20;
  9. text - align: center;
  10. }
Xamarin

Example 3:

Button in Grid.Row="1":

  1. stacklayout button {
  2. color: blue;
  3. font - size: 20;
  4. text - align: center;
  5. }
  6. grid button {
  7. color: purple;
  8. font - size: 20;
  9. text - align: center;
  10. }
Xamarin
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 with default left margin, in the latest version we can set full width, and platform-specific features for iOS and Android.

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

Xamarin

3. ProgressBar ProgressColor

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

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

4. Picker, DatePicker and TimePicker font styles

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