Стилизация с помощью CSS

Последнее обновление: 12.01.2021

Начиная с версии 3.0 в Xamarin Forms для стилизации элементов управления можно использовать стили CSS (почти так же, как в HTML). Правда, при использовании CSS в Xamarin Forms есть ряд особенностей и ограничений.

Итак, возьмем проект Xamarin Forms и добавим в главный проект решения файл css (в Visual Studio элемент Style Sheet). Допустим, он будет называться mystyles.css:

CSS в Xamarin Forms

После добавления файла убедимся, что для в окне свойств в поле Build Action задано значение EmbeddedResource (хотя при добавлении файла css такая установка должна происходить по умолчанию):

Использование CSS в Xamarin Forms

Определим в файле страницы MainPage.xaml следующий интерфейс:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    
    <ContentPage.Resources>
        <StyleSheet Source="/mystyles.css" />
    </ContentPage.Resources>

    <StackLayout>
        <Label x:Name="header" StyleId="header" Text="Words"/>
        <Label Text="apple" StyleClass="english" />
        <Label Text="яблоко" StyleClass="russian" />
        <Label Text="house" StyleClass="english" />
        <Label Text="дом" StyleClass="russian" />
        <Label Text="bread" StyleClass="english" />
        <Label Text="хлеб" StyleClass="russian" />
    </StackLayout>

</ContentPage>

Файл стилей css подключается на страницу как обычный ресурс с помощью элемента StyleSheet. У этого элемента устанавливается атрибут Source, который указывается на путь к файлу css. В данном случае файл css расположен в корневой папке главного проекта, поэтому прописываем путь "/mystyles.css".

Для установки стилей в CSS могут использоваться различные селекторы, в том числе классы и идентификаторы. Для этого для каждого визуального элемента начиная с Xamarin Forms 3.0 были добавлены два атрибута. Свойство StyleId позволяет задать идентификатор для элемента (в html это атрибут id), а свойство StyleClass задает название класса элемента (в html ему соответствует атрибут class). При этом не стоит путать свойства Style и StyleClass: к css относится только последнее.

Определим в файле mystyles.css следующее содержимое:

^contentpage {
    background-color: lightcyan;
}

stacklayout {
    margin: 15;
    padding: 10;
}

label {
    color: black;
}

#header {
    font-size: 32;
    font-weight:bold;
}

.english {
    font-weight: bold;
    font-size: large;
    color: darkblue;
}

.russian {
    font-size:medium;
}

stacklayout label {
    font-family:Verdana;
}

Как и в обычном файле css, здесь стили задаются с помощью селекторов. В то же время было бы некорректным распространять свой опыт работы с css на xamarin, поскольку в данном случае есть ряд особенностей. Так, вначале идет селектор ^contentpage. Он задает стили для элементов, которые находятся в элементе ContentPage. В стандартном CSS подобные селекторы не применяется, это является особенностью Xamarin.

Затем последовательно устанавливаются стили для элементов StackLayout и Label, а также для элементов с идентификатором header и классами english и russian.

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

Стилизация в Xamarin Forms с помощью CSS

Таким образом, подобно HTML в Xamarin можно подключать стили CSS, однако в то же время в Xamarin Forms есть немало ограничений на этот счет, о которых речь пойдет далее.

Подключение файла стилей

Подключать файл стилей CSS можно в XAML, либо через код C#.

В XAML файл CSS подключается как ресурс через элемент StyleSheet, у которого атрибут Source принимает путь к файлу относительно корня главного проекта:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    
    <ContentPage.Resources>
        <StyleSheet Source="/mystyles.css" />
    </ContentPage.Resources>
	<!-- содержимое страницы -->

</ContentPage>

Загрузка файла стилей коде C#:

using System.Reflection;
using Xamarin.Forms;
using Xamarin.Forms.StyleSheets;

namespace HelloApp
{
	public partial class MainPage : ContentPage
	{
		public MainPage()
		{
			InitializeComponent();

            this.Resources.Add(StyleSheet.FromResource
                    ("mystyles.css", IntrospectionExtensions.GetTypeInfo(typeof(MainPage)).Assembly ));
        }
	}
}

Поскольку файл стилей используется как ресурс, он добавляется в коллекцию ресурсов страницы с помощью метода Resources.Add(). Для загрузки самих стилей применяется метод StyleSheet.FromResource(). Первый аргумент этого метода - путь к файлу стилй внутри проекта - в данном случае название файла, так как он располагается в корне проекта. А второй аргумент - сборка, которая содержит файл стилей.

Определение стилей в XAML и коде C#

В HTML с помощью тега style можно определять стили напрямую на странице, не используя сторонних файлов с расширением *.css. Также можно поступать и в Xamarin Forms. Определение стилей в XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">

    <ContentPage.Resources>
        <StyleSheet>
            <![CDATA[
            ^contentpage {
                background-color: lightcyan
            }

            stacklayout {
                margin: 15;
                padding: 10;
            }
            ]]>
        </StyleSheet>
    </ContentPage.Resources>

	<!-- содержимое страницы -->
	
</ContentPage>

Определение стилей в коде C#:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        using (var reader = new System.IO.StringReader("^contentpage { background-color: lightgray; }"))
        {
            this.Resources.Add(StyleSheet.FromReader(reader));
        }
    }
}

Определение селекторов

При определении стилей в Xamarin Forms в целом мы можем использовать большинство селекторов, которые принимаются в стандартном CSS. В тоже время есть некоторые отличия.

Список применяемых в Xamarin Forms селекторов:

  • *

    Устанавливает стили для всех элементов

  • element

    Используя название типа элемента, мы можем применить к нему стили:

    stacklayout {
    margin: 20;
}

  • ^корневой_элемент

    С помощью селектора ^корневой_элемент можно определить стили для всех элементов, который расположены в данном элементе:

    ^contentpage {
	background-color: green;
}
^stacklayout {
	color:red;
}

    В данном случае для всех элементов в ContentPage устанавливается в качестве фона зеленый цвет, а для элементов в StackLayout - красный цвет для шрифта.

  • #id

    Идентификатор элемента задается с помощью свойства StyleId. Например, стили для идентификатора header:

    #header {
	color:red;
}

  • .class

    Класс элемента задается с помощью свойства StyleClass. Например, стили для класса "english":

    .english {
    font-weight: bold;
    font-size: large;
    color: darkblue;
}

  • element element

    С помощью селектора типа родительский_элемент дочерний_элемент можно задать стили для дочернего элемента, который располагается в определенном родительском элементе:

    stacklayout label {
    font-family:Verdana;
}

    В данном случае задан стиль для элементов Label, которые располагаются в элементе StackLayout.

    При этом дочерний элемент не обязательно должен располагаться напрямую в родительском элементе, например:

    <StackLayout>
	<Frame OutlineColor="Accent">
		<Label Text="Xamarin Forms" />
	</Frame>
</StackLayout>

  • element>element

    Если необходимо определим стиль только для прямых дочерних элементов, корый располагаются непосредственно в родительском элементе, то применяется конструкция родительский_элемент>дочерний_элемент:

    stacklayout > label {
    font-family:Verdana;
}

  • element, element

    Устанавливает стили для ряда элементов:

    label, button {
    background-color: green;
}

    Устанавливает фон для кнопок и меток

  • element+element

    Устанавливает стили для элемента, который идет сразу за определенным элементом (оба элемента являются сестринскими):

    label+button {
    background-color: green;
}

    Устанавливает фон для кнопки, которая располагается сразу после метки

  • element~element

    Устанавливает стили для элемента, который идет непосредственно перед определенным элементом (оба элемента являются сестринскими):

    label~button {
    background-color: green;
}

    Устанавливает фон для кнопки, которая располагается перед элементами Label

Используемые стили

Цель использования CSS - установить определенные стили для определенных элементов. В Xamarin Forms фактически это означает установку значений для свойств определенных объектов. Однако здесь есть много ограничений. Не для всех свойств объектов мы можем установить стили.

Какие стилевые свойства мы можем установить:

  • background-color

    Представляет свойство BackgroundColor. Применяется к элементу типа VisualElement

    background-color: lightblue;

  • background-image

    Представляет свойство BackgroundImage. Применяется к элементу типа Page

    background-image: mypic.png;

  • border-color

    Представляет свойство BorderColor. Применяется к элементам типа Button и Frame

    border-color: #9acd32;

  • border-width

    Представляет свойство BorderWidth. Применяется к элементу Button. Принимает значение типа double:

    border-width: .5;

  • color

    Представляет свойство TextColor (цвет текста). Применяется к элементам Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker.

    color: rgba(255, 0, 0, 0.3);

  • direction

    Соответствует свойству FlowDirection (направление текста). Применяется к элементу VisualElement. Допустимые значения: ltr, rtl, inherit.

    direction: rtl;

  • font-family

    Соответствует свойству FontFamily. Применяется к элементам Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span.

    font-family: Consolas;

  • font-size

    Соответствует свойству FontSize. Применяется к элементам Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span.

    В качестве значения могут использоваться значения типа double или именованные размеры (small, large, medium).

    font-size: 12;

  • font-style

    Соответствует свойству FontStyle. Применяется к элементам Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span.

    Допустимые значения: bold (выделение жирным) и italic (выделение курсивом).

    font-style: bold;

  • height

    Соответствует свойству HeightRequest. Применяется к элементу VisualElement. Принимает значение типа double.

    height: 150;

  • width

    Соответствует свойству WidthRequest. Применяется к элементу VisualElement. Принимает значение типа double.

    width: 120;

  • min-height

    Соответствует свойству MinimumHeightRequest. Применяется к элементу VisualElement. Принимает значение типа double.

    min-height: 150;

  • min-width

    Соответствует свойству MinimumWidthRequest. Применяется к элементу VisualElement. Принимает значение типа double.

    min-width: 120;

  • margin

    Соответствует свойству Margin. Применяется к элементу View. Принимает значение типа Thickness.

    margin: 6 12;

    Для установки внешних отступов элемента о одной из сторон контейнера также могут применяться следующие стили:

    margin-left: 3;
margin-top: 2;
margin-right: 1;
margin-bottom: 6;

    Эти стилевые свойства также аналогичны свойству Margin, только устанавливают отступ для одной из сторон, а для остальных сторон устанавливается значение по умолчанию

  • padding

    Соответствует свойству Padding. Применяется к элементу Layout, Page. Принимает значение типа Thickness.

    padding: 6 12;

    Для установки отступов между элементами по одной стороне также могут применяться следующие стили:

    padding-left: 3;
padding-top: 2;
padding-right: 1;
padding-bottom: 6;

    Эти стилевые свойства также аналогичны свойству Padding, только устанавливают отступ для одной из сторон, а для остальных сторон устанавливается значение по умолчанию

  • text-align

    Соответствует свойству HorizontalTextAlignment (выравнивание текста). Применяется к элементам Entry, EntryCell, Label, SearchBar. Допустимые значения: left, right, center, start, end.

    text-align: right;

  • visibility

    Соответствует свойству IsVisible. Применяется к элементу VisualElement. Допустимые значения: true, visible, false, hidden, collapse.

    visibility: hidden;

  • opacity

    Соответствует свойству Opacity. Применяется к элементу VisualElement. Допустимые значения: true, visible, false, hidden, collapse.

    opacity: .3;

Margin и padding

Ряд свойств: margin (а также margin-left, margin-right, margin-top, margin-bottom) и padding (padding-bottom, padding-left, padding-right, padding-top) принимают значение thickness. В реальности мы можем присвоить одно, два, три или четыре числовых значения:

  • Одно значение задает отступ для всех сторон

  • Два значения задают отступы соответственно по вертикали и по горизонтали

  • Три значения задают соответственно верхний отступ, отступ по горизонтали (как справа, так и слева) и отступ снизу

  • Четыре значения задают соответственно отступ сверху, справа, снизу и слева

Примеры:

margin: 10;
margin: 20 10;
margin: 15 20 10;
margin: 45 15 20 10;

Установка цвета

Стилевые свойства background-color, border-color и color принимают значение цвета, которое можно задать различными способами:

  • Предустановленные значения, например, green, red и т.д.

  • Шестнадцатеричные значения в форматах: #rgb, #argb, #rrggbb, #aarrggbb

  • Значения rgb, например, rgb(255,0,0), rgb(100%,0%,0%). Значения находятся в диапазонах 0-255 или 0%-100%.

  • Значения rgba, например, rgba(255, 0, 0, 0.8),rgba(100%, 0%, 0%, 0.8). Четвертое значение - прозрачность находится в диапазоне 0.0-1.0.

  • Значения hsl, например, hsl(120, 100%, 50%). Значение h в диапазоне 0-360, а значения s и l в диапазоне 0%-100%.

  • Значения hsla, например, hsla(120, 100%, 50%, .8). Последнее значение находится в диапазонах 0.0-1.0.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850