xamarin.forms - 用于自定义控件的 Xamarin.Forms CSS 选择器

Question

我的 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 样式的解决方案。

Answer 1

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

例如，设置样式Label

样式.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 的更多详细信息，您可以在此处查看。

更新

您可以设置样式如下

^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>

Answer 2

按基类选择元素

/Styles/styles.cssXamarin.Forms 项目中的文件中的 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>

笔记：

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