{"id":6285,"date":"2018-06-16T20:30:16","date_gmt":"2018-06-16T20:30:16","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=6285"},"modified":"2018-06-16T20:30:16","modified_gmt":"2018-06-16T20:30:16","slug":"xamarin-forms-3-0-supports-css","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/xamarin-forms-3-0-supports-css\/","title":{"rendered":"Xamarin Forms (>= 3.0) supports CSS"},"content":{"rendered":"

In my previous post Styles in Xamarin Forms<\/a> I demonstrated creating a simple styles using XAML Style objects. However, as of version 3.0 of Xamarin Forms, you can also use CSS (Cascading Style Sheet) files\/syntax to define your styles.<\/p>\n

XAML Style is quite a verbose way of defining styles but if you’re used to WPF or UWP it’s probably something you’re quite happy with. If, however, you come from a web background you’ll probably be used to CSS files instead. Now you can use similar syntax to define your styles for Xamarin Forms (3.0 or above).<\/p>\n

If you create a standard mobile application in Visual Studio you’ll get a simple ContentPage based application – as per the previous post we’re going to start off by simply defining a Lime green background for our ContentPage’s.<\/p>\n

Now simply add a CSS file (mine’s named Styles.css) to your solution and set it’s Build Action<\/strong> to Embedded resource<\/strong> and place the following into the file<\/p>\n

\r\n^ContentPage {\r\n     background-color: Lime;\r\n}\r\n<\/pre>\n
Note: the CSS is case insensitive, but I’ve stuck to using the case associated with the controls\/page here.<\/em><\/p>\n
Notice the use of the ^ followed by the base type. If you read my previous post Styles in Xamarin Forms<\/a>, you’ll notice that this is equivalent to an implicit style. i.e. it’s applied to anything of the type ContentPage.<\/p>\n
To use this style we need to add the following to our ContentPage XAML<\/p>\n
\r\n<ContentPage.Resources>\r\n   <StyleSheet Source="Styles.css" \/>\r\n<\/ContentPage.Resources>\r\n<\/pre>\n
Note: you do NOT need to add any namespace to use the StyleSheet (or at least I didn’t at the time of writing). if Visual Studio or Resharper suggests you need to add a namespace, just ignore it.<\/em><\/p>\n
Now if you run your application you’ll be presented with the Lime background ContentPage.<\/p>\n
If you’re used to CSS you’ll know that you can also declare an id (the equivalent of an explicit style) to your CSS. Let’s change our CSS to this following <\/p>\n
\r\n#ContentStyle {\r\n     background-color: Lime;\r\n }\r\n<\/pre>\n
Now we can assign this to either the StyleId or it will fallback to using x:Name (if no StyleId is set) on our control. For example <\/p>\n
\r\nStyleId="ContentStyle"\r\n<\/pre>\n
or if you prefer you can simply use the x:Name (remember no StyleId should exist)<\/p>\n
\r\nx:Name="ContentStyle"\r\n<\/pre>\n
We can also declare our CSS using CLASS selectors such as<\/p>\n
\r\n.ContentStyle {\r\n     background-color: Lime;\r\n}\r\n<\/pre>\n
Now we would use the StyleClass attribute on our ContentPage instead of StyleId or x:Name, i.e.<\/p>\n
\r\nStyleClass="ContentStyle"\r\n<\/pre>\n
Finally, we can also declare CSS for child elements, so for example CSS for the Label which is a child of a StackLayout would look like this<\/p>\n
\r\nStackLayout Label {\r\n    background-color: Lime;\r\n}\r\n<\/pre>\n
See Selector reference<\/a> for more on selector syntax, which also demonstrated setting style for direct child objects etc.<\/p>\n
References<\/strong><\/p>\n
Styling Xamarin.Forms apps using Cascading Style Sheets (CSS)<\/a>
\nStyling Xamarin.Forms Apps with CSS<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In my previous post Styles in Xamarin Forms I demonstrated creating a simple styles using XAML Style objects. However, as of version 3.0 of Xamarin Forms, you can also use CSS (Cascading Style Sheet) files\/syntax to define your styles. XAML Style is quite a verbose way of defining styles but if you’re used to WPF […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[122],"tags":[],"class_list":["post-6285","post","type-post","status-publish","format-standard","hentry","category-xamarin-forms"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/6285","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=6285"}],"version-history":[{"count":3,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/6285\/revisions"}],"predecessor-version":[{"id":6291,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/6285\/revisions\/6291"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=6285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=6285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=6285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}