Xamarin嵌入StyleSheet样式表不生效问题排查咨询

问题排查及解决方法 #

1. 嵌入式CSS资源引用路径错误

你将CSS文件的生成操作设置为Embedded resource（嵌入式资源）时，不能使用相对路径../Styles/stylemain.css加载，必须使用符合嵌入式资源规则的路径格式：

<!-- 格式为 assembly://[程序集名称]/[资源完整命名空间]/[文件名] -->
<StyleSheet Source="assembly://你的程序集名/你的项目默认命名空间.Styles/stylemain.css" />

注：如果你的CSS文件生成操作设置为Content，才可以用相对路径加载。

2. 核心问题：Xamarin.Forms 原生CSS无法作用于HtmlLabel内部的HTML内容

你写的img相关选择器完全不会生效，原因是：
Xamarin.Forms 自带的CSS样式系统仅作用于Xamarin.Forms原生控件（比如StackLayout、Label、Image这些框架自带控件），而你用到的htmlLabel:HtmlLabel是第三方渲染HTML的控件，它内部展示的<img>等HTML标签是控件自身解析渲染的，不属于Xamarin.Forms原生控件树的一部分，页面级的Forms CSS管不到这部分内容。

如果你需要给HtmlLabel内部的HTML内容加样式，正确做法是把CSS样式写入你绑定的ProductInfo.Contents对应的HTML字符串的<head>标签内，比如：

<head>
<style>
ol, ul {
   margin-top: 0;
   margin-bottom: 10px;
}
ul li {
   margin:0
}
img {
   width: auto;
   height: auto;
   border-radius: 4px;
}
</style>
</head>
<!-- 下面是你的原HTML内容 -->

部分第三方HtmlLabel控件也会提供单独的属性来传入HTML专属样式，你可以查阅对应控件的说明确认。

3. 内联CSS写法的额外问题

你测试的内联CSS里.bor-radius4>htmllabel>img选择器本身逻辑就不成立，img不属于Forms控件，就算你要选择HtmlLabel控件，也需要确认第三方控件是否支持CSS元素选择器，写法一般是^htmlLabel|HtmlLabel这种带命名空间前缀的格式。另外你测试的^contentpage背景色不生效，大概率是你当前ContentPage本身显式设置了BackgroundColor属性，控件属性赋值的优先级高于CSS样式，所以会覆盖CSS的配置。

内容的提问来源于stack exchange，提问作者Chim Di Tru