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 🙂
Post A Reply