CSS-селектор Xamarin.Forms для пользовательского контроля - PullRequest
Новая
       54

CSS-селектор Xamarin.Forms для пользовательского контроля

0 голосов
/ 01 октября 2019

У меня есть собственный элемент управления (MyControl) в моем проекте Xamarin.Forms. Интересно, можно ли стилизовать мой элемент управления с помощью 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-правила не поддерживаются».

Поэтому мне интересно, есть лирешение для пользовательского элемента управления в стиле CSS.

Ответы [ 2 ]

0 голосов
/ 01 октября 2019

Выбор элемента по базовому классу

CSS в файле /Styles/styles.css в проекте Xamarin.Forms: 

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

0 голосов
/ 01 октября 2019

Элементы с определенным атрибутом класса могут быть выбраны с учетом регистра .class:

Например, установите стиль Label

style.css 

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

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

в xaml 

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

        </StackLayout>
    </ScrollView>
</ContentPage>

В вашем случае вы должны убедиться, что ваш пользовательский элемент управления имеет свойство Margin.

Для получения более подробной информации об использовании CSS в xamarin.formsВы можете проверить здесь .

Обновление

Вы можете установить стиль следующим образом 

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