如何在 Xamarin Forms 中使用 HTML 和 CSS？

Question

Do all UI designers use xaml syntax to design xamarin forms screens? I'm learning mobile development and want to use html and css in Xamarin Forms. I don't know if I can.How to design professional xamarin forms screens? Thanks for your replies.

Answer 1

Do all of UI designers xamarin screen using xaml syntax?

The answer is yes.

I'm learning mobile development and want to use html and css design on Xamarin Forms. I don't know if I can.

It is not possible to use html and css as page designer in Xamarin projects. If you really want to use html+css to develop mobile apps. Cordova is a good option for you.

Answer 2

You could use XAML with CSS. This is implented in Xamarin Forms since 2.6.0. All you need is to add CSS file to eg Asset folder in Xamarin Forms Shared project and load it in XAML in resource part.

Write your CSS:

^Label {
  color: blue;
}

^Entry {
    color: #ff0038;
}

#MyId {
    font-style: bold;
}

.FirstClass .SecondClass {
    font-size:6;
}

Load css file in XAML:

<!-- set global style -->
<ContentPage.Resources>
   <StyleSheet Source="/Assets/styles.css" />
</ContentPage.Resources>

Set css classes in XAML:

 <StackLayout ClassId="FirstClass">
     <Entry ClassId="SecondClass"/>
     <Label StyleId="MyId" Text="This is a unique Text"/>
 </StackLayout>