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

.NET MAUI поддерживает стилизацию элементов с помощью стилей CSS (почти так же, как в HTML). Правда, при использовании CSS в .NET MAUI есть ряд особенностей и ограничений.

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

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

^contentpage {
    background-color: #fefefe;
}

stacklayout {
    padding: 20;
}

stacklayout label {
    font-family: Verdana;
    margin: 5;
}

#header {
    font-size: 18;
    font-weight: bold;
    text-decoration:underline;
}

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

.russian {
    font-size: 12;
}

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

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

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    <ContentPage.Resources>
        <StyleSheet Source="/styles/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 расположен в корневой папке главного проекта, поэтому прописываем путь "/styles/mystyles.css".

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

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

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

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

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

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

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

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

</ContentPage>

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

using Microsoft.Maui.Controls.StyleSheets;
using System.Reflection;

namespace HelloApp;

public partial class MainPage : ContentPage
{
	public MainPage()
	{
		InitializeComponent();
        this.Resources.Add(StyleSheet.FromResource
                    ("styles/mystyles.css", IntrospectionExtensions.GetTypeInfo(typeof(MainPage)).Assembly));
    }
}

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

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

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             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));
        }
    }
}

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

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

Список применяемых в .NET MAUI селекторов:

• *

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

• 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=".NET MAUI и C#" />
  	</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

В то же время не поддерживаются следующие селекторы:

• [attribute] (выбора по атрибуту)

• @media и @supports

• : и ::

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.