Post
Ask Question

Style With CSS Using Xamarin.forms

Today in this article I am telling you about the CSS in Xamarin.Forms, XAML. If you know about web designing you can easily understand. This is a feature that is easy to use and your app design will be very good with its help.

What is CSS ??

I think you know about CSS, but still let me tell you that CSS stands for Cascading Style Sheets. CSS describes how HTML (XAML) elements should be displayed on the screen, paper ,or other media. CSS saves a lot of work. It can control the layout of many web pages at once. We can use it in three ways through inline, internal and external.

Now, let's come back to Xamarin.forms. Here I am telling you how to use CSS on xaml.

  • Here we create a project solution whose name is xaml with CSS. Go to vs2017 and select file then choose new and select project. 
  • If you want to use shortcut key, press Ctr+Shift+N. 
  • Now here a dialog box appears, and then select cross-platform, give the app a name, then choose a path where you want to place your project. 
  • Now one more dialog box appears here, choose a blank app and then select .netStenderd(PCL) then press enter. 
  • Before working on CSS please make sure your xamarin forms package is updated. CSS Styling is supported after 2.6.0 or higher. This feature allows you to use CSS xamarin application in the web app. 
  • And if not updated, please update to the latest version. 
  • Now, in this project we create a folder named Assets, you can give the name as whatever you like. 
  • Now here we are adding a CSS file, go to the Assets folder and then right click on the folder, select Add then click on new items. 
  • Here appears a dialog box and then select the web (this option is showing on the left side) and then select CSS file. Give it a name StylingwithCSS and press enter. 
Note
Firstly we can change the Build Action EmbeddedResource, Default to set the content so, the process is: In vs2017 right click on CSS file, go to properties, then change to build action. And In Mac xamarin studio, right click on CSS file, then choose build action, then hit the EmbeddedResource. 

CSS Benifits

Here are some benefits of CSS in Zamarin.Forms,

  • Essentially, HTML for both Web and XAML for Xamarin.Forms makes both visual trees. 
  • Many Xamarin developers come from an ASP.NET background so it is good for asp developers.
  • CSS is powerful and loved by many people.
  • Developers have to reuse skills before creating web applications.
  • Compared to XAML style, CSS can be easy to learn and reduces code.
  • CSS needs to be mapped with built-in XAML styles.
  • All inline XAML markup for style can be moved to CSS files.
  • CSS style offers some unique advantages with styling inheritance.
  • CSS Web and Xamarin.Forms provide the ability to sharecodesof styles between apps.
  • CSS usage is another option and developers do not complain about flexibility. 

Element Property Suport

CSS can access any styling property for XML elements. Here are some of the most common styling properties familiar with XAML developers,
  • color
  • background-color
  • font-family
  • font-size
  • font-style
  • height
  • width
  • border-color
  • border-width
  • visibility
  • opacity
  • text-align
  • margin - left | right | top | bottom
  • padding - left | right | top | bottom

CSS selectors determine which element to be used and these asset values can be set to XAML.

Style Classes

As you can expect, you can assign a CSS class to XAML elements and define the style in your CSS file - in terms of property value disputes, the last style wins. Consider the following XML, 

  1. <Label Text="Welcome to Xamarin Forms!" StyleClass="MyLabel" />  

 

XML

The Label has the .MyLabel class applied, which is as follows,

  1. .MyLabel {  
  2.  color: red;  
  3. }  

 

CSS

Here's how it looks at runtime

Named Styling

You can refer to any XAML visual element by their generic name as CSS selectors, but you may also fall back to x:Name to identify individual elements out of the visual tree. For example, assume the following XAML:

  1. <Label x:Name="NamedLabel" Text="Hello World" />  

 

XML

You can map this Label using its Name property through an ID selector in CSS:

  1. #NamedLabel {  
  2.     font-size: large;  
  3. }  

 

CSS

Here's how it looks at runtime:

Inline Styling

If you have any complex styling needs, you are almost always advised to have your styles defined in a separate CSS file - XAML visual tree definition and its styling can be pulled together at runtime. For very simple scenarios, however, you have the option of defining your CSS styles inline within your XAML file,

  1. <ContentPage.Resources>  
  2.  <StyleSheet>  
  3.    <![CDATA[  
  4.      ^contentpage {  
  5.        background-color: aqua;  
  6.      }  
  7.    ]]>  
  8.  </StyleSheet>  
  9. </ContentPage.Resources>  

 

XML

Here's how it looks at runtime:

Inheritance

Let's get to the cascading part of CSS styling. This is where CSS shines with easy "trickle-down" effects. Assume you want all Labels within a StackLayout to have a certain style. You can refer to direct children using the element>element selector.

Assume the following XAML,

  1. <StackLayout x:Name="MyStack"  
  2.             Orientation="Vertical"  
  3.             VerticalOptions="Center"  
  4.             HorizontalOptions="Center">  
  5.  <Label Text="Welcome to Xamarin Forms!" StyleClass="MyLabel" />   
  6.  <Label x:Name="NamedLabel" Text="Hello World" />  
  7. </StackLayout>  

 

XML

Let's style the direct children of the StackLayout using the element>element selector.

  1. stacklayout>label {  
  2.  color: blue;  
  3. }  

 

CSS

You can start to appreciate the power and flexibility that CSS support in Xamarin.Forms provide

Now, what if you want all child elements to have a specific style, even though they do not inherit from a direct parent? Simply use the element selector! Again, let's assume some XAML.

  1. <StackLayout x:Name="MyStack"  
  2.             Orientation="Vertical"  
  3.             VerticalOptions="Center"  
  4.             HorizontalOptions="Center">  
  5.  <Label Text="Welcome to Xamarin Forms!" StyleClass="MyLabel" />   
  6.  <Label x:Name="NamedLabel" Text="Hello World" />  
  7.  <StackLayout Orientation="Vertical">  
  8.    <Button Text="Hi" />  
  9.  </StackLayout>  
  10. </StackLayout>  

 

XML

Let's use the element selector to style the button

  1. stacklayout button   
  2. {  
  3.     background-color: wheat;  
  4. }  


Similar Articles