XF Styling With CSS

Hello friends,

        How are you, hope you all are fine. 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 still let me tell you, CSS stands for Cascading Style Sheets CSS which 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, guys come back to xamarin.forms so 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 is appearing a dialog box and then select cross-platform give the app 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 or not CSS Styling is supported after 2.6.0 or higher this feature allow to use CSS xamarin application like in the web app.
• And if not updated, please update to latest version.
• Now, In this project we create a folder named Assets, you can give the name 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- 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 xamarin.Forms,

• Essentially, HTML for both Web and XAML for Xamarin.Forms make 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 reduce 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 share codes of styles between apps.
• CSS usage is another optional and developers do not complain about flexibility. 

Element Property Suport

CSS can access any styling property for XML elements. Here are some 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,

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

XML

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

.MyLabel {

 color: red;
}

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:

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

XML

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

#NamedLabel {
 font-size: large;
}

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:

<ContentPage.Resources>
 <StyleSheet>
   <![CDATA[
     ^contentpage {
       background-color: aqua;
     }
   ]]>
 </StyleSheet>
</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:

<StackLayout x:Name="MyStack"
            Orientation="Vertical"
            VerticalOptions="Center"
            HorizontalOptions="Center">
 <Label Text="Welcome to Xamarin Forms!" StyleClass="MyLabel" />
 <Label x:Name="NamedLabel" Text="Hello World" />
</StackLayout>

XML

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

stacklayout>label {

 color: blue;
}

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.

<StackLayout x:Name="MyStack"

            Orientation="Vertical"
            VerticalOptions="Center"
            HorizontalOptions="Center">
 <Label Text="Welcome to Xamarin Forms!" StyleClass="MyLabel" />
 <Label x:Name="NamedLabel" Text="Hello World" />
 <StackLayout Orientation="Vertical">
   <Button Text="Hi" />
 </StackLayout>
</StackLayout>

XML

Let's use the element selector to style the button

stacklayout button {

 background-color: wheat;
}

HAPPY XAM CODING  :)