用于自定义控件的 Xamarin.Forms CSS 选择器答案

【问题标题】：Xamarin.Forms CSS selector for custom control用于自定义控件的 Xamarin.Forms CSS 选择器
【发布时间】：2020-01-30 10:11:18
【问题描述】：

我的 Xamarin.Forms 项目中有一个自定义控件 (MyControl)。我想知道是否可以使用 CSS 为我的控件设置样式？目前我不知道如何为我的自定义控件指定一个选择器。

如果我在 XAML 中设置控件样式，我需要导入一个命名空间并使用它：

xmlns:ctrls="clr-namespace:DemoApp.Controls"
...
<Style TargetType="ctrls:MyControl"...

CSS 也支持命名空间：

@namespace ctlrs "clr-namespace:DemoApp.Controls";

但是，如果我尝试编写 CSS 规则...

ctrls|MyControl {
    margin: 10;
}

...我收到 System.NotSupportedException: 'AT-rules not supported'。

所以我想知道是否有解决方案让自定义控件使用 CSS 设置样式。

【问题讨论】：

你解决了吗？

标签： xamarin.forms xamarin.forms-styles

【解决方案1】：

按基类选择元素

Xamarin.Forms 项目中 /Styles/styles.css 文件中的 CSS：

   ^MyClass {
       font-style: italic;
   }

XAML：

<ContentPage ...
             xmlns:myNamespace="clr-namespace:MyNamespace;assembly=MyAssembly"
             ...
  >
  <ContentPage.Resources>
    ...
    <StyleSheet Source="/Styles/styles.css" />
    ...
  </ContentPage.Resources>
    ...
    <myNamespace:MyClass Text="Text" />
    ...
</ContentPage>

Note:

^base 选择器特定于 Xamarin.Forms，不是 CSS 规范的一部分。

【讨论】：

如果我对基类使用选择器 - 它会影响所有自定义控件（如果基类是 ContentView）。如果我创建自己的基类，我最终会遇到同样的问题：如何在 Xamarin.Forms 中的 CSS 中使用命名空间。
只要新基类的名称与现有基类不同（例如，新基类未命名为“ContentView”），“按基类选择元素”选项应该有效- 不将命名空间带入 css。

【解决方案2】：

可以使用区分大小写的 .class 选择器选择具有特定类属性的元素：

例如设置Label的样式

style.css

.detailPageTitle {
    font-style: bold;
    font-size: medium;
    text-align: center;
}

.detailPageSubtitle {
    text-align: center;
    font-style: italic;
}

在xml中

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Assets/styles.css" />
    </ContentPage.Resources>
    <ScrollView>
        <StackLayout>
            <Label ... StyleClass="detailPageTitle" />
            <Label ... StyleClass="detailPageSubtitle"/>
            
        </StackLayout>
    </ScrollView>
</ContentPage>

在您的情况下，您应该确保您的自定义控件具有属性Margin。

有关在 xamarin.forms 中使用 CSS 的更多详细信息，您可以查看here。

更新

你可以设置如下样式

^MyControl {
                background-color: lightgray;
}

也可以直接在xaml中设置

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

<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

  <conv:MyControl Text="1111111"/>
  <conv:MyControl Text="1111111"/>
  <conv:MyControl Text="1111111"/>
  <conv:MyControl Text="1111111"/>
          
</StackLayout>

【讨论】：

不幸的是，这并不能回答我的问题，因为它需要修改 Label 的所有实例。使用 XAML 中定义的样式也可以实现同样的效果。
您可以在自定义控件中使用它。我的代码只是为了测试。
在自定义控件中使用什么？样式标签？当然可以，但问题是如何将样式应用于自定义控件，而不是自定义控件的内容。假设我有一个包含一百个 MyControl 实例的页面？如何在 XFs CSS 中设置它们的样式？ XAML Style 完全可以，但是如何通过 CSS 来实现呢？
嗯...我会尝试从后面的代码中设置它，看看我能实现什么。
我不认为你能做到。我们只能参考xaml中的CSS样式或后面的代码。哪个喜欢 Html 。如果您想一次性引用样式（避免在 xaml 中设置 100 次）。您可以在后面的代码中设置样式。