CSS in Xamarin.Forms

I know front-end developers want to develop mobile apps. We can already develop mobile applications using basic C# knowledge with Xamarin. But whenever I talked to a front end developer he/she said UI development with xaml is very difficult. 

Xamarin.Forms supports styling visual elements using Cascading Style Sheets (CSS).

Selector reference

Selector Example Description
.class .header Selects all elements with the StyleClass property containing ‘header’. Note that this selector is case sensitive.
#id #email Selects all elements with StyleId set to email. If StyleId is not set, fallback to x:Name. When using XAML, x:Name is preferred over StyleId. Note that this selector is case sensitive.
* * Selects all elements.
element label Selects all elements of type Label, but not sub-classes. Note that this selector is case insensitive.
^base ^contentpage Selects all elements with ContentPage as the base class, including ContentPage itself. Note that this selector is case insensitive and isn’t part of the CSS specification.
element,element label,button Selects all Button elements and all Label elements. Note that this selector is case insensitive.
element element stacklayout label Selects all Label elements inside a StackLayout. Note that this selector is case insensitive.
element>element stacklayout>label Selects all Label elements with StackLayout as a direct parent. Note that this selector is case insensitive.
element+element label+entry Selects all Entry elements directly after a Label. Note that this selector is case insensitive.
element~element label~entry Selects all Entry elements preceded by a Label. Note that this selector is case insensitive.

Property reference

Property Applies to Values Example
background-color VisualElement color | initial background-color: springgreen;
background-image Page string | initial background-image: bg.png;
border-color Button, Frame color | initial border-color: #9acd32;
border-width Button double | initial border-width: .5;
color Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker color | initial color: rgba(255, 0, 0, 0.3);
direction VisualElement ltr | rtl | inherit | initial direction: rtl;
font-family Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span string | initial font-family: Consolas;
font-size Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span double | namedsize | initial font-size: 12;
font-style Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span bold | italic | initial font-style: bold;
height VisualElement double | initial min-height: 250;
margin View thickness | initial margin: 6 12;
margin-left View thickness | initial margin-left: 3;
margin-top View thickness | initial margin-top: 2;
margin-right View thickness | initial margin-right: 1;
margin-bottom View thickness | initial margin-bottom: 6;
min-height VisualElement double | initial min-height: 50;
min-width VisualElement double | initial min-width: 112;
opacity VisualElement double | initial opacity: .3;
padding Layout, Page thickness | initial padding: 6 12 12;
padding-left Layout, Page double | initial padding-left: 3;
padding-top Layout, Page double | initial padding-top: 4;
padding-right Layout, Page double | initial padding-right: 2;
padding-bottom Layout, Page double | initial padding-bottom: 6;
text-align Entry, EntryCell, Label, SearchBar left | right | center | start | end | initial. left and right should be avoided in right-to-left environments. text-align: right;
visibility VisualElement true | visible | false | hidden | collapse | initial visibility: hidden;
width VisualElement double | initial min-width: 320;

Let’s try!

Firstly we need to create Style Sheet and set the build action of the CSS file to EmbeddedResource

Then we need to set StyleSheet  Source in ContentPage Resurces

<ContentPage.Resources>
<StyleSheet Source="Styles/YigitStyle.css" />
</ContentPage.Resources>

We can use directly page, view, class or id like css

^ContentPage
{
background-color: red;
}
.header {
color: white;
font-size: large;
text-align: center;
margin: 20;
}
entry{
color:blue;
text-align:left;
padding:10;
}
#myButton{
background-color:white;
color:blue;
}
<StackLayout StyleClass="header">
<Label Text="CSS in Xamarin.Forms" />
<Entry />
<Button StyleId="myButton" Text="CSS" />
</StackLayout>

Alternatively, the style sheet can be loaded and parsed with the StyleSheet class by inlining it in a CDATA section

<ContentPage.Resources>
<StyleSheet>
<![CDATA[ ^contentpage { background-color: red; } ]]>
</StyleSheet>
</ContentPage.Resources>

How to set in back-end

Resources.Add(StyleSheet.FromAssemblyResource(IntrospectionExtensions.GetTypeInfo(typeof(MainPage)).Assembly,"XFCSS.Styles.styles.css"));

Alternatively, the style sheet can be loaded from a StringReader and added to the ResourceDictionary for the page

using (var reader = new StringReader("^contentpage { background-color: red; }"))
{
this.Resources.Add(StyleSheet.FromReader(reader));
}

Yes, you can load all style sheets via web services 🙂

Yiğit

Xamarin Developer, Consultant & Architect. Community Leader and Director of Xamarin Türkiye

Post A Reply